如何异步更新ASP.NET MVC部分视图？

Question

I am trying to asynchronously update a table of data based on the user's selection from a drop-down. 我试图根据用户从下拉列表中的选择异步更新数据表。 Using stuff I've read here and elsewhere, I've been trying to use a partial view to accomplish this. 使用我在这里和其他地方读过的东西，我一直在尝试使用局部视图来实现这一目标。 My code looks something like this: 我的代码看起来像这样：

Home.cshtml: Home.cshtml：

<body>
<div id="main-region">       
    <div class="mySelector">
        <label class="dropdown-label">Filter: </label>
        @Html.DropDownListFor(m => m.SelectedStatus, Html.GetEnumSelectList(typeof(MyEnum)),
       new { @id = "mySelector" })
    </div>
    <div id="myPartialView">
        @Html.Partial("_Summary", Model)
    </div>
</div>
<script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
    $('#mySelector').change(function () {
        var newSelectionID = $(this).val();
        $('#myPartialView').load('@Url.Action("Filter", "Home")') //syntax for including newSelectionID?
    });

</script>

_Summary.cshtml is just a simple table. _Summary.cshtml只是一个简单的表。

HomeController.cs: HomeController.cs：

    [HttpGet]
    public IActionResult Filter(string statusID)
    {
      var modelData = mService.GetData(statusID);
        return PartialView("_Summary", model);
    }

I'm stuck on two things: 我坚持两件事：

I can't even seem to get this to hit my Filter method server-side. 我甚至无法得到这个来点击我的Filter方法服务器端。
I'm not sure how to pass back the user-selected value. 我不知道如何传回用户选择的值。

I'm obviously missing something. 我显然错过了一些东西。 Can anyone help me out? 谁能帮我吗？ I'm using asp.net core. 我正在使用asp.net核心。

Thanks very much. 非常感谢。

Answer 1

Your code might be crashing because you are not passing the statusID parameter to your method and i see you are using the parameter value to get the model data needed for the partial view. 您的代码可能会崩溃，因为您没有将statusID参数传递给您的方法，我发现您正在使用参数值来获取部分视图所需的模型数据。 If the code crashes, the server will return a 500 Internal error status code in the response and the div ( myPartialView ) will not be updated with the content. 如果代码崩溃，服务器将在响应中返回500内部错误状态代码，并且不会使用内容更新div（ myPartialView ）。

Since your action method is decorated with GET attribute, you may pass the value in querystring. 由于您的action方法是使用GET属性修饰的，因此您可以传递querystring中的值。

This should work 这应该工作

$(function() {

    $('#mySelector').change(function() {
        var v = $(this).val();
        $('#myPartialView').load('@Url.Action("FilterOnStatus", "Home")?statusID=' + v);
    });

});

如何异步更新ASP.NET MVC部分视图？

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-11-19 19:47:58

如何异步更新ASP.NET MVC部分视图？

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-11-19 19:47:58

解决方案1
3 已采纳 2017-11-19 19:47:58