Filtering Dropdowns trong ASP.Net MVC sử dụng JQuery va JSon.

Có rất  nhiều cách để làm Filter cho Dropdowns mà Microsoft hổ trợ nhiều tool để phát triển,  với tôi, tôi không thích dựa nhiều tool. Nói thế không phải là không dùng vì có nhiều điều khi phát triển một project cũng phải cần đến. ASP.Net MVC cũng có thể làm được điều đó. Nhưng tại sao ta không kết hợp MVC, JQuery và Json để làm điều đó.  Câu hỏi là làm thế nào để làm được điều đó trong MVC.

Trong MVC các Server Control sẽ không còn như trong ASP.Net, cái còn lại bây giờ là thêm một chút code để chúng ta có thể có các chức năng tương tự dể dàng hơn nữa, sử dụng giao thức JSON cho vấn đề load dữ liệu nhẹ nhàng và dễ dàng hơn.

    
       
        
    
    #using (Html.BeginForm())
   {
       

           

                

Event Information

                

                      Event name:
                      ${Html.DropDownList("eventname", EventList)}
                

                

                      Event Date:
                        
                                Select Date:
                        
                

                

                      
                

           

      

#}

Nếu bạn đang tự hỏi tại sao lựa chọn danh sách thứ hai của tôi là không tạo ra bởi lớp HtmlHelper chỉ là vì tôi không muốn phụ thêm vào nó nên tôi sử dụng jQuery. Nếu thực sự là không cần thiết khi bắt đấu làm project.

public ActionResult Events()

{

        IList events = new List();
        const int upper = 5;
        for (int i = 0; i < upper; i++)
        {
               var eventItem = new EventDto() {
               EventCode = i.ToString(),
               Eventname = string.Format("Name {0}", i)};
               events.Add(eventItem);
         }
         var eventList = new SelectList(events, "EventCode", "EventName");
         ViewData["EventList"] = eventList;
         return View();
}


Không có gì đặc biệt ở đây. Tôi chỉ cần tạo một List các sự kiện và sau đó đi qua nó để một SelectList để nó có thể được xem.

Vì vậy, trang HTML code trông như thế này:

Event Information

   

          Event name:

         

                 Name 0

                 Name 1

                 Name 2

                 Name 3

                 Name 4

          

    

    

            Event Date:

           

                 Select Date:

            

    

    

           

    

Và trang web trông như thế này:

Chức năng JsonResult

ASP.Net MVC đi kèm với bộ action cotroller khác nhau, một trong số đó JsonResult action. Giống như các ActionResult, JsonResult gửi dữ liệu trở lại view như trong trường hợp này, response được chuyển đổi thành JSON.

[AcceptVerbs(HttpVerbs.Get)]

public JsonResult EventDates(string eventCode)

{

        IList eventDates = BuildEventDates(eventCode);
        return Json(eventDates);
}

Trong function trên tôi đã viết, trước tiên tôi muốn biết nó phản ứng như thế nào trong trường hợp này. Để đáp ứng các yêu cầu "GET" tôi cần phải có tham số là AcceptVerbs với chức năng là "GET", chức năng này cần có các tham số cho các mã số sự kiện mà người dùng chọn trong danh sách, và sau đó dựa trên các thông số ứng dụng có được một List các ngày đến những ngày này bộ sưu tập (được định dạng như các chuỗi trong trường hợp này) và trả lại bằng cách gọi các JSON() function.

Chức năng jQuery:

Để có được dữ liệu cho Dropdown thứ hai, chúng ta cần phải thực hiện một cuộc gọi AJAX đến máy chủ và qua nó giá trị của Dropdown trước khi "Change".

Khi sự kiện này gọi, sau đó chúng ta có thể sử dụng $jQuery AJAX gọi. Để thực hiện một "GET" yêu cầu đến URL như vậy:…/Home/EventDates?eventCode=3. Khi bạn. Nhìn vào tiêu đề của các yêu cầu của bạn cũng thông báo rằng "Accept" attribute được thiết lập để.

application/json, text/javascript, */*.

Chú ý rằng các dữ liệu chúng tôi là phải đi qua trong yêu cầu phải có định dạng JSON Vì vậy, trong trường hợp những dữ liệu chúng ta đang đi là (eventCode: 3). Các phản ứng, chúng tôi nhận lại. Là:

[{"EventDateCode":"10/27/2009","EventDateName":"10/27/2009"},{"EventDateCode":"10/30/2009","EventDateName" :"10/30/2009"}, [{"EventDateCode":"10/27/2009","EventDateName":"10/27/2009"},{"EventDateCode":"10/30/2009","EventDateName" :"10/30/2009"},

{"EventDateCode":"11/2/2009","EventDateName":"11/2/2009"},{"EventDateCode":"11/5/2009" ,"EventDateName":"11/5/2009"}, {"EventDateCode":"11/2/2009","EventDateName":"11/2/2009"},{"EventDateCode":"11/5/2009" ,"EventDateName":"11/5/2009"},

{"EventDateCode":"11/8/2009","EventDateName":"11/8/2009"},{"EventDateCode" :"11/11/2009","EventDateName":"11/11/2009"}, {"EventDateCode":"11/8/2009","EventDateName":"11/8/2009"},{"EventDateCode" :"11/11/2009","EventDateName":"11/11/2009"},

{"EventDateCode":"11/14/2009","EventDateName":"11/14/2009" },{"EventDateCode":"11/17/2009","EventDateName":"11/17/2009"}, {"EventDateCode":"11/14/2009","EventDateName":"11/14/2009" },{"EventDateCode":"11/17/2009","EventDateName":"11/17/2009"},

{"EventDateCode":"11/20/2009","EventDateName" :"11/20/2009"}] {"EventDateCode":"11/20/2009","EventDateName" :"11/20/2009"}]

Nếu trả lời là thành công, các chức năng gọi lại bộ sưu tập sẽ được trả về và xây dựng một chuỗi các thẻ và thêm nó vào đối tượng chọn.

Bài viết trên mong rằng sẽ giúp ít cho các bạn.
DangTrung.