Điền một danh sách thả xuống tự động sử dụng Javascript/jQuery

Question

Trong một cái nhìn ASP NET MVC Razor, tôi có một danh sách thả xuống như sau:

@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

DeviceModelList chỉ là một SelectList.

Làm cách nào để tự động điền vào DeviceModelList tùy thuộc vào hành động phía máy khách như nhấp vào nút hoặc một lựa chọn thả xuống khác bằng Javascript/jQuery/Ajax?

Answer 1

Bạn có thể ra bên ngoài thả xuống này thành một phần:

@model MyViewModel 
@Html.DropDownListFor(model => model.SelectedDeviceModel, Model.DeviceModelList) 

sau đó trong giao diện chính của bạn bao gồm nó trong một số container:

@model MyViewModel 
... 
<div id="ddlcontainer"> 
    @Html.Partial("Foo", Model) 
</div> 
... 

sau đó bạn có thể có một hành động điều khiển trong đó có một số tham số và dựa trên giá trị của nó, nó hiển thị phần này:

public ActionResult Foo(string someValue) 
{ 
    MyViewModel model = ... go ahead and fill your view model 
    return PartialView(model); 
} 

Bây giờ phần cuối cùng là gửi yêu cầu AJAX để làm mới danh sách thả xuống khi một số sự kiện xảy ra. Ví dụ khi giá trị của một số thay đổi DDL khác (hay cái gì khác, một nút bấm hoặc bất kỳ):

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the ddl container with 
       // the partial HTML returned by the Foo controller action 
       $('#ddlcontainer').html(result); 
      } 
     }); 
    }); 
}); 

Một khả năng khác bao gồm vào sử dụng JSON. Hành động điều khiển Foo của bạn sẽ chỉ trả về một số đối tượng Json chứa bộ sưu tập khóa/giá trị mới và trong lần gọi lại thành công của yêu cầu AJAX, bạn sẽ làm mới danh sách thả xuống. Trong trường hợp này, bạn không cần phải mở rộng nó vào một phần riêng biệt. Ví dụ:

$(function() { 
    $('#SomeOtherDdlId').change(function() { 
     // when the selection of some other drop down changes 
     // get the new value 
     var value = $(this).val(); 

     // and send it as AJAX request to the newly created action 
     $.ajax({ 
      url: '@Url.Action("foo")', 
      type: 'POST', 
      data: { someValue: value }, 
      success: function(result) { 
       // when the AJAX succeeds refresh the dropdown list with 
       // the JSON values returned from the controller action 
       var selectedDeviceModel = $('#SelectedDeviceModel'); 
       selectedDeviceModel.empty(); 
       $.each(result, function(index, item) { 
        selectedDeviceModel.append(
         $('<option/>', { 
          value: item.value, 
          text: item.text 
         }) 
        ); 
       }); 
      } 
     }); 
    }); 
}); 

và cuối cùng Foo hành động điều khiển của bạn sẽ trở lại Json:

public ActionResult Foo(string someValue) 
{ 
    return Json(new[] { 
     new { value = '1', text = 'text 1' }, 
     new { value = '2', text = 'text 2' }, 
     new { value = '3', text = 'text 3' } 
    }); 
} 

Đối với một ví dụ tương tự bạn có thể có một cái nhìn tại following answer.