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 blogged about here 技术对其进行分页。为简洁起见，我截取了代码。

    <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 调用获取具有当前在 Model.RowsPerPage 属性中指定的行数的 WebGrid。将其从 25 更改为 50， submit() 触发并调用 Index() POST 操作。参数正确，TryUpdateModel() 正确更新 RowsPerPage 的值。该操作返回带有更新模型的默认视图，但视图不刷新，它不执行 JSON 调用。因为我不太确定这个路由和 AJAX 是如何协同工作的，所以这可能很简单。

Answer 1

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

假设您的 /Shops/ShopsPager 接受参数 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&nbsp;
     @Html.DropDownList("RowsPerPage", ViewBag.PageList as SelectList, 
       new{onchange= "GetPage(this);"})&nbsp;Items per page
</div>