mvc 3回发不刷新屏幕

Question

我是 MVC 新手，所以有一些概念问题。我有一个 WebGrid，它填充来自视图模型的数据，并且有一个 DropDownList，用户可以选择要返回的记录数（50、100 等），这也是 VM 上的一个属性。我已将 DDL 的 onchange 客户端事件设置为触发 this.form.submit() 并且我的控制器操作获取 POST。问题是刷新视图的逻辑不会触发。视图只是更新 DDL 中选定的值。

/* 控制器操作 */

public ShopsController()
{
    ViewBag.PageList =
    new SelectList(new[] { 10, 15, 25, 50, 100, 1000 }
        .Select(x => new { value = x, text = x }), "value", "text");
}

[HttpGet]
public ActionResult Index()
{
    var model = new ShopsViewModel();
    return View(model);
}
[HttpPost]
public ActionResult Index(int RowsPerPage)
{
    var model = new ShopsViewModel();
    TryUpdateModel(model);
    return View(model);
}

视图使用 JSON 更新网格中的数据，以便可以使用 Malcolm Sheridan 在这里发表博客。为了简洁起见，我剪掉了代码。

    <script type="text/javascript">
    $(function () {
        // fire JSON request to initially fill grid
        $.getJSON("/Shops/ShopsPager", null, function (d) {
            $("#grid").append(d.Data);

            $("#DataTable tfoot a").live("click", function (event) {
                event.preventDefault();
                OnPageClick($(this).text() );
            });
            $("#tLinks a").live("click", function (event) {
                event.preventDefault();
                OnPageClick($(this).text() );
            });
        });
    });
</script>
@Html.BeginForm();
    // this is the DDL that when changed, I want the view to refresh using the new value
    <div class="rlinks" style="float:right;">Display&nbsp;
         @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
           new{onchange= "this.form.submit();"})&nbsp;Items per page
    </div>
    <div id="grid" class="gridWrapper">
        <!-- the grid get inserted here by the JSON callback
    </div>

因此，会发生页面加载和 JSON 调用获取 WebGrid 以及当前在 Model.RowsPerPage 属性中指定的行数。将其从 25 更改为 50，submit() 会触发并调用 Index() POST 操作。参数正确，TryUpdateModel() 正确更新 RowsPerPage 的值。该操作返回带有更新模型的默认视图，但该视图不会刷新，也不会执行 JSON 调用。由于我不太确定路由和 AJAX 如何协同工作，这可能很简单。

Answer 1

由于您正在尝试回发页面，其中回发在 MVC 中被消除，因此您只是尝试刷新页面，但真正刷新网格的是对 / 的 $.getJSON 调用商店/ShopsPager。相反，不要回发页面，只需在 DDL onchange 事件上再次调用 getJSON 即可。

假设您的 /Shops/ShopsPager 接受像 Index 一样的参数 RowsPerPage。

$(document).ready(function(){
    // Fires Initially.
    GetPage(null);
});

function GetPage(data) {
    var passedData;
    if(data == null)
        passedData = null;
    else {
        passedData = $(data).val();
    }

    // Assuming called action accepts RowsPerPage parameter.
    $.getJSON("/Shops/ShopsPager", { "RowsPerPage" : passedData }, function (d) {
        $("#grid").append(d.Data);

        $("#DataTable tfoot a").live("click", function (event) {
            event.preventDefault();
            OnPageClick($(this).text() );
        });
        $("#tLinks a").live("click", function (event) {
            event.preventDefault();
            OnPageClick($(this).text() );
        });
    });
}

你的 DDL onchange 只需调用 GetPage()

<div class="rlinks" style="float:right;">Display 
     @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
       new{onchange= "GetPage(this);"}) Items per page
</div>