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>