Cuộc gọi AJAX trên sự kiện OnChange trong MVC

Question

Tôi phải thực hiện cuộc gọi AJAX trên sự kiện onchange của danh sách thả xuống là một phần của chế độ xem. Trong sự kiện thay đổi, tôi cần gọi cơ sở dữ liệu, thực hiện một số tính toán hiển thị giao diện người dùng và sau đó sử dụng các phép tính để điền vào một điều khiển biểu đồ. Màn hình giao diện người dùng nằm trong chuỗi này. Biểu đồ Danh sách thả xuống danh sách danh sách các danh mục phụ có điểm xếp hạng Vì vậy, bạn có thể cần hiển thị xếp hạng danh mục trong div3 trên sự kiện thay đổi, sử dụng điểm xếp hạng để điền biểu đồ. Dễ dàng thực hiện trong .NET nhưng làm thế nào để trong MVC ?? Tùy chọn duy nhất tôi có thể nghĩ đến là tạo điều khiển người dùng bằng mã phía sau nhưng đánh bại mục đích sử dụng MVC. Bất kỳ trợ giúp nào được đánh giá cao.

Answer 1

Xem xét sử dụng chế độ xem một phần. Có rất nhiều các liên kết nếu bạn google ASP.Net MVC Partial View nhưng đây là một trong tôi tìm thấy intestering

http://blog.stevensanderson.com/2008/10/14/partial-requests-in-aspnet-mvc/

Answer 2

Tôi không chắc tôi hoàn toàn hiểu những gì bạn đang cố gắng để làm, nhưng trong MVC đường Tôi có khả năng sẽ xử lý nó là kết nối với nhau một vài cuộc gọi AJAX. Bản cập nhật đầu tiên xếp hạng danh mục dựa trên lựa chọn. Điều này có khả năng trả về JSON để bạn có thể dễ dàng trích xuất các điểm xếp hạng. Điểm thứ hai lấy điểm xếp hạng được trả về lần đầu tiên và gọi một hành động biểu thị biểu đồ dưới dạng HTML - tức là, nó hiển thị một phần xem được trả về và chèn vào vị trí thích hợp trong tài liệu.

Answer 3

Đây là ý tưởng chung về cách bạn triển khai điều này.

<script type="text/javascript"> 
    // assuming you're using jQuery 
    $("#ddlAjax").change(function (event) { 
     $.ajax({ 
      url: "Controller/GetPartialGraph/" + $(this).val(), 
      data: { id = $(this).val() /* add other additional parameters */ }, 
      cache: false, 
      type: "POST", 
      dataType: "html", 

      success: function (data, textStatus, XMLHttpRequest) { 
       $("#divPartialView").html(data); // HTML DOM replace 
      } 
     }); 
    }); 
</script> 

<select id="ddlAjax"> 
    ... list of options 
</select> 


<div id="divPartialView"> 
    <!-- something like this in your ASP.NET View --> 
    <%= Html.RenderPartial("MyPartialView", Model) %> 
</div> 

Đây là phương pháp hành động điều khiển của bạn.

[HttpPost] 
public PartialViewResult GetPartialGraph(int id /* drop down value */) 
{ 
    // do calculations whatever you need to do 
    // instantiate Model object 
    var model = myBusinessLogicService.DoCalculations(id); 

    return PartialView("MyPartialView", model); 
} 

Tôi nghĩ đây là câu trả lời bạn đang tìm kiếm.

Answer 4

Ok, nếu những gì bạn muốn ia một cách để gọi một sự kiện onchange khi một sự thay đổi DropDownList này có thể hữu ích:

@Html.DropDownListFor(
         model => model.SelectedId, 
         new SelectList(ViewBag.Ids, "Id", "Name"), 
         "[All]", 
         new { onchange = "onChangeId();", @id ="municipalityDropDown" } 
         ) 

sau đó bạn có thể có điều này mã javascript và bạn mã ajax. Và đây là một ví dụ về mã jax để gọi một phương thức hành động.

function onChangeId() { 
     jQuery.ajax({ 
      url: '@Url.Action("Action Method Name", "Controller Name")', 
      type: 'POST', 
      contentType: 'application/json', 
      data: JSON.stringify({ data: data2 }), 
      success: function (result) { } 
     }); 
    } 

Answer 5

Vâng, đúng vậy - chỉ thay đổi được thay thế:

onchange = “this.form.submit();” 

với:

onchange = “$(this.form).submit();” 

tìm thấy nó trong this bài