DOTNET POINT: cascading list box in asp.net using jquery,json and linq

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="JScript.js" type="text/javascript"></script>
    <script src="JScript2.js" type="text/javascript"></script>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript">
        $(document).ready
       (
            function () {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "WebService.asmx/x",
                    data: "",
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $('#ddl').append("<option value=0>------Select------</option>");
                        for (var i = 0; i < data.d.length; i++) {
                            $('#ddl').append("<option value=" + data.d[i].DID + ">" + data.d[i].DNAME + "</option>");

                        }

                    }
                });

                $('#ddl').change
             (
             function () {
                 $.ajax({
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     url: "WebService.asmx/y",
                     data: "{a:" + $('#ddl option:selected').val() + "}",
                     dataType: "json",
                     async: false,
                     success: function (data) {
                         $('#ddl1 option').remove()
                         $('#ddl1').append("<option value=0>------Select------</option>");
                         for (var i = 0; i < data.d.length; i++) {
                             $('#ddl1').append("<option value=" + data.d[i].EID + ">" + data.d[i].NAME + "</option>");

                         }

                     }
                 });
             }
             )
            }
       )
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <select id="ddl" name="ddl" size="2" multiple="multiple">
    </select><br />
    <select id="ddl1" name="ddl1" multiple="multiple" size="2"></select><br />
    <input type="button" value="Save" />
    </div>
    </form>
</body>
</html>

Page looks like:

web service Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    DataClassesDataContext o = new DataClassesDataContext();
    public WebService ()
    {


    }
    [WebMethod]
    public List<EMP> x()
    {
        return o.EMPs.ToList();
    }
    [WebMethod]
    public List<EMP1> y(int a)
    {
        var m = from x in o.EMP1s where x.DID == a select x;
        return m.ToList();
    }


}

DOTNET POINT

Tuesday 12 June 2012

cascading list box in asp.net using jquery,json and linq

No comments:

Post a Comment