Question

我们试图实现其页面上显示的Grid.Mvc详细信息和http://gridmvc.codeplex.com/上的“示例屏幕截图”

这里显示右侧的“订单详情”，点击其中一行？目标是实现这一点，在那里添加ActionLinks以采取行动，例如Edit / Details / Delete，就像原始bootstrap / Entity Framework index（）视图一样。

问题是如何正确连接，

@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中的任何细节，UPDATED：修复了函数及其工作中的语法。 / p>

 <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>

单击Grid.Mvc列详细信息？

1 个答案: