Question

我不知道它是否只是我网站上的错误，但WebGrid显然复制了ajaxUpdateContainerId上指定的容器。这是我的代码：

<div id="grid-wrapper" class="grid-wrapper">
@{
    var a = new []
    {
        new { Mensagens = 3, Nome = "Rodrigo Manguinho", Agendamento = "08:00", Prazo = 2, Tipo = "Novo", Percentual = "30%"},
        new { Mensagens = 5, Nome = "Rodrigo Manguinho", Agendamento = "08:00", Prazo = 2, Tipo = "Novo", Percentual = "30%"}
    };

    var grid = new WebGrid(source: a, ajaxUpdateContainerId: "grid-wrapper");

    @grid.GetHtml(tableStyle: "grid round-3", alternatingRowStyle: "even", rowStyle: "odd", htmlAttributes: new { @cellpadding = "0px", @cellspacing = "0px" });
}
</div>

当我检查firebug时，div grid-wrapper有另一个具有相同id和class的div。当我点击任何TH链接对表进行排序时，它会重复。

Answer 1

我们遇到了同样的问题。我们分析了WebGrid控制器的源代码，显然这个bug存在且无法更改，因为它是硬编码的：

取自“mvc3-rtm-sources \ webpages \ src \ System.Web.Helpers \ WebGrid \ WebGrid.cs”，第17-22行：

namespace System.Web.Helpers {
    public class WebGrid {
        // jquery code for partial page update of grid components (see http://api.jquery.com/load/)
        private const string _ajaxLinkScript = "$(\'#{0}\').load(\'{1} #{0}\');";
        private const string _ajaxLinkScriptWithCallback = "$(\'#{0}\').load(\'{1} #{0}\', {2});";

如您所见，无法从外部API更改ajax链接。幸运的是，我们找到了一种方法来解决这个问题，并使其适用于启用或禁用的JavaScript：

@{
    WebGrid grid = new WebGrid(Model, ajaxUpdateContainerId: "myDivId", ajaxUpdateCallback: "myFunctionName");
    WebGrid gridNoJS = new WebGrid(Model);
}

<script type="text/javascript">
    $(myFunctionName);

    function myFunctionName() {
        $('#myDivId table tfoot a').each(function () {
            var $this = $(this);
            $this.attr('onclick', $this.attr('onclick').replace('#myDivId\',', '#myDivId table\','));
        });

        $('#myDivId table tfoot div').show();
    }
</script>

<div id="myDivId">
    @grid.Table(
        columns: grid.Columns(
            grid.Column("MyColumn1", header: "MyColumn1"),
            grid.Column("MyColumn2", header: "MyColumn2")),
        footer: @<text><noscript>@gridNoJS.Pager()</noscript><div style="display:none">@grid.Pager()</div></text>
    )
</div>

你也可以推断这个想法来修复排序链接。

Answer 2

我不知道这对你有帮助，但我遇到了同样的问题。我有同样的问题，并能够解决它。在我的例子中，我将ajaxContainerUpdateId设置为与网格html Id相同的id。相反，我必须在webgrid周围放置一个容器div，并将ajaxUpdateContainerId设置为div的Id，并在GetHtml方法中为WebGrid提供不同的id。我的网格声明的第一部分如下所示，其中searchContainer是一个包含grid.GetHtml方法的div。

var grid = new System.Web.Helpers.WebGrid(canPage: true, rowsPerPage: ViewData["pagesize"] != null ? (int)ViewData["pagesize"] : 20, canSort: true,ajaxUpdateContainerId:"searchContainer");
grid.Bind(Model.Records, rowCount: Model.TotalResults, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
grid.SortColumn = ViewData["sortColumn"].ToString();
grid.SortDirection = ViewData["sortDir"].ToString().ToLower() == "asc" ? SortDirection.Ascending : SortDirection.Descending;
@grid.GetHtml(htmlAttributes: new { id = "searchgrid", @class = "grid" }, alternatingRowStyle: "alt" ,

Mvc3 WebGrid ajaxUpdateContainerId复制容器

2 个答案: