Question

我是MVC的新手，所以有一些概念问题。我有一个WebGrid，用于填充来自视图模型的数据，并且使用DropDownList，用户可以选择要返回的记录数（50,100等），这也是VM上的属性。我已经设置了DDL的onchange客户端事件来触发this.form.submit（）并且我的控制器操作获得了POST。麻烦是刷新视图不会触发的逻辑。 View只会更新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);
}

View使用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的值。该操作返回具有更新模型的默认视图，但View不刷新，它不执行JSON调用。由于我不太确定这个路由和AJAX如何协同工作，这可能很简单。

Answer 1

由于您尝试回发页面，其中在MVC中消除了Postback，您只是尝试刷新页面，但实际刷新网格的是$.getJSON对/Shops/ShopsPager的调用。相反，不要回发您的页面，只需在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>

mvc 3回发不刷新屏幕

1 个答案: