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

在这里,单击任一行,在右侧显示“订单详细信息”?目标是实现此目标,在其中添加ActionLinks以执行诸如原始Bootstrap /实体框架index()视图所具有的操作,例如Edit / Details / Delete。

问题是如何正确连接,

@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:修复了函数的语法及其工作方式。

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

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

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

最佳答案

您的网格名称与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>

关于asp.net-mvc - 单击Grid.Mvc列详细信息?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32383094/

10-12 15:50