Jquery Mvc3 WebGrid ajaxUpdateContainerId复制容器

我不知道这是否只是我网站上的一个bug，但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>

@{
var a=新[]
{
新的{Mensagens=3，Nome=“Rodrigo Manguinho”，Agendamento=“08:00”，Prazo=2，Tipo=“Novo”，Percentual=“30%”，
新的{Mensagens=5，Nome=“Rodrigo Manguinho”，Agendamento=“08:00”，Prazo=2，Tipo=“Novo”，Percentual=“30%”
};
var grid=newwebgrid（来源：a，ajaxUpdateContainerId：“网格包装器”）；
@GetHtml（tableStyle:“grid round-3”、alternatingRowStyle:“偶数”、rowStyle:“奇数”、htmlAttributes:new{@cellpadding=“0px”、@cellspacking=“0px”}）；
}

---

当我检查firebug时，div网格包装器有另一个具有相同id和类的div。当我单击任何TH链接对表进行排序时，它会重复。

我不知道这是否会对您有所帮助，但我遇到了相同的问题。我遇到了同样的问题，并且能够解决它。在我的例子中，我将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" ,

---

我不知道这是否对你有帮助，但我也有同样的问题。我遇到了同样的问题，并且能够解决它。在我的例子中，我将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" ,

---

我们只是遇到了和你一样的问题。我们分析了WebGrid控制器的源代码，显然该错误存在且无法更改，因为它是硬编码的：

摘自“mvc3 rtm源代码\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>

@{
WebGrid grid=新的WebGrid（模型，ajaxUpdateContainerId:“myDivId”，ajaxUpdateCallback:“myFunctionName”）；
WebGrid gridNoJS=新的WebGrid（模型）；
}
$（myFunctionName）；
函数myFunctionName（）{
$（'#myDivId表tfoot a'）。每个（函数（）{
var$this=$（this）；
$this.attr（'onclick'，$this.attr（'onclick'）.replace（'myDivId\'，'，'myDivId table\'，'）；
});
$（'#myDivId表tfoot div'）.show（）；
}
@表格(
列：grid.columns(
grid.Column（“MyColumn1”，标题：“MyColumn1”），
grid.Column（“MyColumn2”，标题：“MyColumn2”），
页脚：@@gridNoJS.Pager（）@grid.Pager（）
)

---

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

我们刚才遇到了与您相同的问题。我们分析了WebGrid控制器的源代码，显然该错误存在且无法更改，因为它是硬编码的：

摘自“mvc3 rtm源代码\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>

@{
WebGrid grid=新的WebGrid（模型，ajaxUpdateContainerId:“myDivId”，ajaxUpdateCallback:“myFunctionName”）；
WebGrid gridNoJS=新的WebGrid（模型）；
}
$（myFunctionName）；
函数myFunctionName（）{
$（'#myDivId表tfoot a'）。每个（函数（）{
var$this=$（this）；
$this.attr（'onclick'，$this.attr（'onclick'）.replace（'myDivId\'，'，'myDivId table\'，'）；
});
$（'#myDivId表tfoot div'）.show（）；
}
@表格(
列：grid.columns(
grid.Column（“MyColumn1”，标题：“MyColumn1”），
grid.Column（“MyColumn2”，标题：“MyColumn2”），
页脚：@@gridNoJS.Pager（）@grid.Pager（）
)

---

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

你好，罗尼。如果你注意到，在我的例子中，我做到了。我在ajaxUpdateContainerId上使用了网格ID，但是当我注意到我的表被复制时，我将其更改为包装ID。从外观上看，它看起来不错，但是如果你检查源代码，包装也被复制了。哦，我想我没有仔细查看源代码。我没有意识到这个容器被复制了。我确实注意到，我认为头链接生成的onclick处理程序中有一个错误。我认为应该是$（“#containerId”）.load（“/ajax/test.html”，“#gridId”），但在我上面的示例中，网格使用ajaxUpdateContainerId作为两个值（“containerId和网格id”）。我想这可能是问题所在，但我不确定。你好，罗尼。如果你注意到，在我的例子中，我做到了。我在ajaxUpdateContainerId上使用了网格ID，但是当我注意到我的表被复制时，我将其更改为包装ID。从外观上看，它看起来不错，但是如果你检查源代码，包装也被复制了。哦，我想我没有仔细查看源代码。我没有意识到这个容器被复制了。我确实注意到，我认为头链接生成的onclick处理程序中有一个错误。我认为应该是$（“#containerId”）.load（“/ajax/test.html”，“#gridId”），但在我上面的示例中，网格使用ajaxUpdateContainerId作为两个值（“containerId和网格id”）。我想这可能是问题所在，但我不确定。很好。我试试你的建议。谢谢分享。很好。我试试你的建议