MVC5 Ajax更新

Question

我有一個帶有選擇ID StaffId的下拉列表。 我正在做的是一旦選擇了一個項目，我想將StaffId傳遞給控制器​​，以使用staffId獲取數據庫中的記錄。 這會導致頁面加載錯誤，而沒有將StaffId傳遞給控制器​​。 以下是代碼段

調節器

[HttpPost]
          public PartialViewResult GetStaffPosts(int? id)
          {

              var sPost = db.StaffPosts.Where(a => a.StaffId == id.Value);  
              return PartialView(sPost.ToList());

          }

   <div id="divPartialView">
   @{Html.RenderPartial("GetStaffPosts");}
   </div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#StaffId").change(function (event) {
            var options = {};
               options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
                options.data= { id: $(this).val() },
                options.cache= false,
                optionstype= "POST",
                options.dataType= "html",

                options.success= function (data, textStatus, XMLHttpRequest) {
                    $("#divPartialView").html(data); // HTML DOM replace
                    $.ajax(options);
                }
            });
        });

</script>

Answer 1

您當前的代碼實際上並未在change事件上進行ajax調用，因為您正在調用$.ajax(options); 在options對象的成功回調中調用。 您沒有在change事件上調用$ .ajax方法！

這應該工作（假設您的控制器代碼返回200響應） 。

$("#StaffId").change(function (event) {
        var options = {};
        options.url= "/StaffPost/GetStaffPosts/" + $(this).val(),
        options.data= { id: $(this).val() },
        options.cache= false,
        options.type= "POST",
        options.dataType= "html",
        options.success= function (data, textStatus, XMLHttpRequest) {
                $("#divPartialView").html(data); // HTML DOM replace

        }
        $.ajax(options);
 });

您也可以使用$.post方法簡化代碼。

$("#StaffId").change(function() {

    $.post("/StaffPost/GetStaffPosts/",{ id: $(this).val() } ,function (data) {
            $("#divPartialView").html(data);
    });

});

甚至使用$.load方法和一個襯里

$("#StaffId").change(function(event) {

    $("#divPartialView").load("/StaffPost/GetStaffPosts/", { id: $(this).val() });

});

Answer 2

嗨，您只需將ajax調用置於成功函數之外，並創建一個類似於以下代碼的網址，然后重試

您更改的代碼：

<script type="text/javascript">
    $(document).ready(function () {
        $("#StaffId").change(function (event) {
            var options = {};


               options.url= "../StaffPost/GetStaffPosts,


                options.data= { id: $(this).val() },
                options.cache= false,
                optionstype= "POST",
                options.dataType= "html",
                options.success= function (data, textStatus, XMLHttpRequest) 
                 {
                    $("#divPartialView").html(data); // HTML DOM replace

                }


                $.ajax(options);


            });
        });

</script>