Cấp bậc tác giả:

DOTNET

AJAX Cascading Dropdownlist với Autosuggest sử dụng Jquery

Được viết bởi QuangIT vào ngày 03/09/2014 lúc 10:44 AM

Cascading Dropdownlists thiết lập điều khiển dropdownlist trong mỗi dropdownlist là cơ sở phổ biến để lựa chọn item của DropDownList khác và tiếp cận tốt nhất để thực hiện không cần refresh lại toàn bộ trang bằng AJAX.

0
9902

AJAX Cascading Dropdownlist với Autosuggest sử dụng Jquery

Có một số cách thức mà chúng ta có thể đạt được điều này như sử dụng CascadingDropdown mở rộng bởi AJAX Toolkit cùng với ASP.NET DropDownList, sử dụng DropDownList trong UpdatePanel và sử dụng jquery để gọi AJAX đến DropDownList. Một tính năng nữa mong muốn trong DropDownList là chức năng tự động hoàn chỉnh, có thể giúp người sử dụng có được lựa chọn đúng mà không cần di chuyển nhiều đặc biệt là khi có rất nhiều mục trong DropDownList.

Trong bài viết này, tôi sẽ giải thích với ví dụ về cách thực hiện DropDownList sử dụng jquery và áp dụng tính năng tự động hoàn chỉnh sử dụng Select2 jquery plugin trong các item. Chúng ta sẽ sử dụng dropdownlists bằng cách ajax jquery gọi phương thức phía máy chủ (WebMethod) và kích hoạt tính năng tự động hoàn chỉnh phía máy khách sử dụng Select2 jquery plugin.

1. Trước hết chúng ta hãy tải về tất cả các thư viện cần thiết

a. jQuery

b. Select2

2. Đặt thư viện đã download ở trên bên trong thư mục project asp.net của bạn.

3. Tạo ra hai lớp modal, sẽ phục vụ các dữ liệu cần thiết cho dropdownlists. Đầu tiên DropDownList sẽ chứa item.

Department.cs

namespace CascadingAutoCompleteSample
{
    public class Department
    {
        public string dptName { get; set; }
        public string dptAliasName { get; set; }

        public List<Department> GetDepartment()
        {
            return new List<Department>
            {
                new Department {
                    dptName = "Aeronautical Engineering",
                    dptAliasName = "AE"
                },
                new Department {
                    dptName = "Biomedical Engineering",
                    dptAliasName = "BME"
                },
                new Department {
                    dptName = "Computer Science Engineering",
                    dptAliasName = "CSE"
                },
                new Department{
                    dptName = "Information Technology",
                    dptAliasName = "IT"
                },
                 new Department{
                    dptName = "Mechanical Engineering",
                    dptAliasName = "MECH"
                },
                 new Department{
                    dptName = "Electronics and Communication Engineering",
                    dptAliasName = "ECE"
                }
            }.ToList();
        }
    }
}

Subjects.cs

namespace CascadingAutoCompleteSample
{
    public class Subjects
    {
        public string deptAliasName { get; set; }
        public string subName { get; set; }
        public string subAliasName { get; set; }

        public List<Subjects> GetSubjects()
        {
            return new List<Subjects>
            {
                new Subjects {
                    deptAliasName="AE",
                    subName = "Fluid Mechanics",
                    subAliasName = "FM"
                },
                new Subjects {
                    deptAliasName="AE",
                    subName = "Aircraft System",
                    subAliasName = "AS"
                },
                new Subjects {
                    deptAliasName="AE",
                    subName = "Helicopter Theory",
                    subAliasName = "HT"
                },
                new Subjects {
                    deptAliasName="BME",
                    subName = "Bio Analytical Techniques",
                    subAliasName = "BAT"
                },
                new Subjects {
                    deptAliasName="BME",
                    subName = "Bio Signal Processing",
                    subAliasName = "BSP"
                },
                new Subjects {
                    deptAliasName="CSE",
                    subName = "Data Structures & Algorithms",
                    subAliasName = "DSA"
                },
                new Subjects{
                    deptAliasName="CSE",
                    subName = "Computer Architecture",
                    subAliasName = "CO"
                },
                 new Subjects{
                    deptAliasName="CSE",
                    subName = "Artificial Intelligence",
                    subAliasName = "AI"
                },
                 new Subjects{
                     deptAliasName="CSE",
                    subName = "Fundamentals of Computing",
                    subAliasName = "FOC"
                },
                new Subjects{
                     deptAliasName="IT",
                    subName = "Numerical Methods",
                    subAliasName = "NM"
                },
                new Subjects{
                     deptAliasName="IT",
                    subName = "Fundamentals of Computing",
                    subAliasName = "FOC"
                },
                new Subjects{
                    deptAliasName="IT",
                    subName="Priciples of Communication",
                    subAliasName="POC"
                },
                new Subjects{
                     deptAliasName="MECH",
                    subName = "Measurements and Controls",
                    subAliasName = "MC"
                },
                new Subjects{
                     deptAliasName="MECH",
                    subName = "Machine Tools",
                    subAliasName = "MT"
                },
                new Subjects{
                     deptAliasName="ECE",
                    subName = "Electronic Devices & Circuits",
                    subAliasName = "EDC"
                },
                new Subjects{
                     deptAliasName="ECE",
                    subName = "Electro Magnetic Theory",
                    subAliasName = "EMT"
                }
                
            }.ToList();
        }
    }
}

Dữ liệu được mã hóa cứng trong lớp này, bạn cũng có thể chỉnh sửa để lấy hàng từ cơ sở dữ liệu nếu bạn thích.

4. Chúng ta hãy tạo ra trang aspx với hai dropdownlists và script để thực hiện gọi ajax đến máy chủ. Script cũng sẽ chuyển các dropdownlists vào dropdownlists phong phú cho phép người dùng tìm kiếm item trong đó.

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Cascading AutoComplete DropDownlist using jQuery</title>

<link href="Styles/select2.css" rel="stylesheet" />

<script src="Scripts/jquery-1.9.1.js"></script>

<script src="Scripts/select2.js"></script>

<script type="text/javascript">

$(function () {

var $ddl = $("select[name$=ddlDepartment]");

$ddl.select2();

var $ddlSub = $("select[name$=ddlSubject]");

$ddl.focus();

$ddl.bind("change keyup", function () {

loadSubjects($("select option:selected").val());

$ddlSub.fadeIn("slow");

});

function loadSubjects(selectedItem) {

$.ajax({

type: "POST",

url: "CascadingAutocomplete.aspx/GetSubjectList",

data: "{deptAliasName:'" + selectedItem + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

async: true,

success: function (data) {

printSub(data.d);

error: function (xhr, status, err) {

var err = eval("(" + xhr.responseText + ")");

alert(err.Message);

}

});

}

function printSub(data) {

$("select[name*=ddlSubject] > option").remove();

$("select[name*=ddlSubject]").append(

$("<option></option>").val("Select Subject").html("Select Subject")

);

for (var i = 0; i < data.length; i++) {

$("select[name*=ddlSubject]").append(

$("<option></option>").val(data[i].subAliasName).html(data[i].subName)

);

}

$("#subjectdiv").css("display","block");

$("select[name$=ddlSubject]").select2();

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div style="text-align:center">

<h1>Cascading AutoComplete in ASP.NET using jQuery</h1>

Select Department :

<asp:DropDownList ID="ddlDepartment" runat="server" Width="280px">

</asp:DropDownList>

Select Subject :

<asp:DropDownList ID="ddlSubject" runat="server" Width="280px" >

</asp:DropDownList>

</div>

</form>

</body>

</html>

Chúng ta hãy nhìn kỹ vào Script jquery ajax được gọi trong DropDownList thứ hai. Phương thức loadSubjects được kích hoạt bất cứ khi nào người dùng lựa chọn hoặc thay đổi giá trị trong DropDownList đầu tiên và ajax gọi đến phương thức được khai báo là WebMethod trong trong code behind (CascadingAutocomplete.aspx/GetSubjectList). Khi dữ liệu được lấy từ phía máy chủ, phương thức printSub trong script cập nhật trên giao diện người dùng. Cả hai dropdownlists được kích hoạt với tính năng sử dụng autosuggest Select2 plugin.

5. Bây giờ trong trang code behind viết code gọi là script jquery để lấy dữ liệu cho đối tượng DropDownList. Lưu ý rằng để gọi phương thức phía máy chủ, phương thức này nên được khai báo là WebMethod.

using System.Web.Services;
using System.Web.Script.Services;


namespace CascadingAutoCompleteSample
{
    public partial class CascadingAutocomplete : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Department dept = new Department();
            List<Department> lstDept = dept.GetDepartment();
            ddlDepartment.DataSource = lstDept;
            ddlDepartment.DataTextField = "dptName";
            ddlDepartment.DataValueField = "dptAliasName";
            ddlDepartment.DataBind();
            ddlDepartment.Items.Insert(0, new ListItem("Select Department", "Select Department"));
            ddlDepartment.SelectedItem.Text = "Select Department";


        }


        [WebMethod]
        [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
        public static List<Subjects> GetSubjectList(string deptAliasName)
        {
            Subjects sub = new Subjects();
            List<Subjects> lstSubs = sub.GetSubjects().Where(x => x.deptAliasName == deptAliasName).ToList();
            return lstSubs;
        }

    }
}