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调用，因为您正在调用options对象的成功回调中的$.ajax(options);调用。您没有在更改事件上调用$ .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>

MVC5 Ajax更新

2 个答案: