Question

我是使用Grid.MVC功能的新手。在看了一些我非常喜欢网格的例子后，我想知道如何在文档页面上实现类似于示例的解决方案。我已经创建了网格，并且我正在尝试将细节添加到网格的右侧，如图所示，但我不确定如何实现它。这是我试图用MVC和Razor完成的例子。 http://gridmvc.azurewebsites.net/

以下是我的看法：

@using GridMvc.Html
@using GridMvc.Sorting
@model IEnumerable<EmployeeManagement.Models.EmployeeMaster>

@{
    ViewBag.Title = "Index";
}
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")"></script>
    <title>Index</title>
    <script>
        pageGrids.employeeGrid.onRowSelect(function (e) {
            $.post("/Manage/GetEmployee?id=" + e.row.EmployeeNumber, function (data) {
                if (data.Status <= 0) {
                    alert(data.Message);
                    return;
                }
                $("#employee-content").html(data.Content);
            });
        });

    </script>
</head>



<div id="grid" style="float: left">
    @Html.Grid(Model).Columns(columns =>
{

    columns.Add(o => o.LastName)
            .Titled("Last Name")
            .SetWidth(10);

    columns.Add(o => o.FirstName)
            .Titled("First Name")
            .SortInitialDirection(GridSortDirection.Descending)
            .SetWidth(20);

    columns.Add(o => o.Initials)
            .Titled("Initials").SetWidth(20);

    columns.Add(o => o.Branch)
            .Titled("Branch").SetWidth(20);

    columns.Add(o => o.StatusFlag)
        .Titled("Status").SetWidth(20);

    columns.Add(o => o.EmployeeNumber)
            .Titled("Employee NO")
            .SetWidth(10);

    columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(d =>
            @<b>
                @Html.ActionLink("Edit", "Edit")
            </b>);
}).SetRowCssClasses(item => (bool)item.StatusFlag ? "success" : "danger").Sortable().Filterable().WithMultipleFilters().Named("employeeGrid")

</div>
<div id="details" style="float:left">
    <h2>Details</h2>
    <div id="employee-content">
        Click on an employee to get their detailed record.
    </div>

</div>

以下是GetEmployee方法：

    [HttpPost]
    public EmployeeMaster GetEmployee(int id)
    {
        var e = EmployeeDb.EmployeeMasters.FirstOrDefault(x => x.EmployeeNumber == id);
        return e;
    }

单击网格行时添加详细信息页面Grid.MVC

0 个答案: