asp.net-mvc - 单击 Grid.Mvc 列的详细信息？

Question

我正在尝试实现 Grid.Mvc 的详细信息，如其页面和 http://gridmvc.codeplex.com/ 上的“示例屏幕截图”所示

这里它通过单击其中一行在右侧显示“订单详细信息”？目标是实现这一点，在其中添加 ActionLinks 以执行编辑/详细信息/删除等操作，就像原始 Bootstrap / Entity Framework index() View 所具有的那样。

问题是如何正确连接它，

@Html.Grid(Model).Named("ordersGrid").Columns(columns =>
{
    columns.Add(model => model.ID).Titled("ID").SetWidth(10);
    columns.Add(model => model.CustomerNumber).Titled("Cust #").SetWidth(10);

}).WithPaging(10)

<div class="row">
<div class="col-md-3 col-md-push-9">
    <h4>
        Order details
    </h4>
    <div id="order-content">
        <p class="muted">
            Select order to display detailed infomation
        </p>
    </div>
</div>

<script>
$(function () {
    pageGrids.ast.onRowSelect(function (e) {
        alert(e.row.ID);

        $.post(e.row, function (data) {
            //if (data.Status <= 0) {
            //    alert(data.Message);
            //    return;
            //}
            $("#order-content").html(e.row);
        });
    });
});
</script>

没关系，它不会在行点击时触发，因为/Shared/_Layout.cshtml 中需要引用，必须下载 jquery.min.js 并将其重命名以匹配；

 <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"></script>

现在它被触发，点击任何行都会得到带有 ID 编号的警告对话框。

但是在 $.post(e.row, function (data) { 这没有在名为“#order-content”的 div 中填写任何细节，更新:修复了函数中的语法及其工作。

 <script>
$(function () {
    pageGrids.ast.onRowSelect(function (e) {
        alert(e.row.ID);

        $.post("/astroidreports/details/" +e.row.ID,
            function(data){

                $("#order-content").html(data);
            })
        });
    });

Answer 1

您的网格名称与 javascript 不匹配:

@Html.Grid(Model).Named("ordersGrid")  <--- you name it here, change to "ast"
.Columns(columns =>
{
    columns.Add(model => model.ID).Titled("ID").SetWidth(10);
    columns.Add(model => model.CustomerNumber).Titled("Cust #").SetWidth(10);

}).WithPaging(10)

<script>
$(function () {
    pageGrids.ast.onRowSelect(function (e) {    <--- expects grid name "ast"
        alert(e.row.ID);

        $.post(e.row, function (data) {
            //if (data.Status <= 0) {
            //    alert(data.Message);
            //    return;
            //}
            $("#order-content").html(e.row);
        });
    });
});
</script>