【问题标题】:How can the View be aware of what page the ajax MVC WebGrid is on?视图如何知道 ajax MVC WebGrid 在哪个页面上?
【发布时间】:2012-10-09 00:20:45
【问题描述】:

我有一个包含部分视图的视图,其中包含一个通过 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 在回调中传递它。有没有人可以解决这个问题?

【问题讨论】:

    标签: asp.net-mvc-3 webgrid


    【解决方案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-05-14
      • 1970-01-01
      • 2020-02-21
      • 1970-01-01
      • 2012-04-29
      • 2017-01-21
      • 1970-01-01
      • 1970-01-01
      • 2014-09-29
      相关资源
      最近更新 更多