3

我有一个包含部分视图的视图，其中包含一个通过 ajax 进行页面的 WebGrid。但是，我无法让父视图了解 WebGrid 所在的页面。我想要完成的是：我在包含视图上有一个“创建”按钮，可以导航到新页面，但我希望它将当前页面 # 作为查询字符串参数传递给新页面，这样如果他们取消创建，原始视图将加载上一页，而不是默认加载第一页。

我看到的问题是，当部分视图的网格更新时，父视图的模型不会改变。而且，虽然我可以为 ajaxUpdateCallback 创建一个方法，但我还没有弄清楚如何告诉这个方法当前页面是什么。

我的代码的相关部分如下所示： 在父视图中：

<div id="divList">
    @Html.Partial("_MatterList", Model) //This is where the grid is defined
</div>
<br/>
<div id="newSection">

<input type="button" value="New Matter" onclick="newMatter();"></input>
</div>
<script type="text/javascript">

    var _Page; //I tried creating a javascript variable to hold the page, but can't get it to populate with anything but the default 1.

    function newMatter() 
    {
        var urlAction = "@Url.Action("Create", "Matter", new { area = "Admin" })";
        var subclientid = $("#SubClientID > option:selected").attr("value"); //defined in a form not displayed here
        var clientid = $("#ClientID > option:selected").attr("value");//defined in a form not displayed here
        redirect(urlAction, clientid, subclientid);

    }
    function redirect(urlAction, clientid, subclientid) {
        if(clientid > 0 || subclientid > 0 ) {
            urlAction += "?";
        }
        if(clientid > 0) {
            urlAction += "clientid=" + clientid;
            if(subclientid > 0) {
                urlAction += "&subclientid=" +subclientid;
            }
        }
        //I want to be able to add page in here as well. a la &page=_Page
        window.location = urlAction;
    }

在 _MatterList 部分视图中：

 <div id="matterListing">

    @{

        var grid = new WebGrid<Matter>(null, rowsPerPage: 10, canSort: false, defaultSort: "Name", ajaxUpdateContainerId: "matterListing",ajaxUpdateCallback:"afterUpdate");
        grid.Bind(Model.Matters, rowCount: Model.TotalRows, autoSortAndPage: false);
        @grid.GetHtml(
            tableStyle: "table90",
            alternatingRowStyle: "tableAltRows",
            headerStyle: "tableHeaders",
            columns: grid.Columns(

                grid.Column(...  //there are a lot of columns, removed them because not important to the problem.


                )
                   )
    }
    <script type="text/javascript">
        function afterUpdate() {
            _Page = @Model.PageNumber; //I tried this but it only ever shows 1 because it evaluates when the page first loads.  What I need is for it to dynamically get the correct page at execution time.
        }
    </script>
</div>

我在想，afterUpdate 方法需要使用当前页面的参数（即调用 afterUpdate(2) 而不是使用@Model.PageNumber），但我不知道如何强制 WebGrid 通过沿着回调。有没有人有这个问题的解决方案？

4

1 回答 1

1

解决方案最终变得非常简单，我有点尴尬我花了多长时间才想出它。

在 _MatterList 部分视图中，我创建了表单并放置了一个带有页码的 HiddenField：

<form id="frmPage">
    @HiddenFor(model => model.PageNumber)
</form>

然后在主页中，我修改了 newMatter() 以提取该页面，并使用 redirect() 将其添加为查询字符串参数：

function newMatter() 
{
    var urlAction = "@Url.Action("Create", "Matter", new { area = "Admin" })";
    var subclientid = $("#SubClientID > option:selected").attr("value"); //defined in a form not displayed here
    var clientid = $("#ClientID > option:selected").attr("value");//defined in a form not displayed here
    var page = $("#frmPage").find("#PageNumber").val();
    redirect(urlAction, clientid, subclientid, page);
}

function redirect(urlAction, clientid, subclientid, page)
{
        if(clientid > 0 || subclientid > 0  || page > 1) {
            urlAction += "?";
        }
        if(clientid > 0) {
            urlAction += "clientid=" + clientid;
            if(subclientid > 0) {
                urlAction += "&subclientid=" +subclientid;
            }
            if(page > 1) {
                urlAction += "&page=" + page;
            }
        }
        else if(page > 0){
            urlAction += "page=" + page;
        }
        window.location = urlAction;
}
于 2012-10-08T16:20:45.623 回答