我正在使用
http://gridmvc.azurewebsites.net/提供的Grid.MVC,它提供了很好地在网格中显示数据的功能,其中很好地完成了过滤,排序和分页.这就是Grid中数据的当前表现方式.

到现在为止还挺好.要显示数据,我使用以下控制器和.cshtml

调节器

/// <summary>
    /// Brings List Of Customers
    /// </summary>
    /// <returns></returns>
    [HttpGet]
    public ActionResult CustomerList()
    {
        CustomerListViewModel custList = new CustomerListViewModel();
        List<CustomerViewModel> custVMList = new List<CustomerViewModel>();
        custVMList = custRepository.GetCustomers();
        custList.customers = custVMList;
        return View(custList);
    }

相同的.cshtml是

@model IEnumerable<DataAccess.Models.CustomerViewModel>
@*Using Twitter Bootstrap API*@
<link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
<script src="@Url.Content("~/Scripts/js/bootstrap.min.js")" type="text/javascript"> </script>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />

@using GridMvc.Html
@{
    ViewBag.Title = "Customers List";
}
@Html.Grid(Model).Columns(columns =>
                        {

                            columns.Add(m => m.CustomerName).Titled(" Name ").Sortable(true).SortInitialDirection(GridMvc.Sorting.GridSortDirection.Ascending).Filterable(true);
                            columns.Add(m => m.Address1).Titled("Address1").Sortable(true).Filterable(true);
                            columns.Add(m => m.Address2).Titled("Address2").Sortable(true).Filterable(true);
                            columns.Add(m => m.City).Titled("City").Sortable(true).Filterable(true);
                            columns.Add(m => m.County).Titled("County").Sortable(true).Filterable(true);
                            columns.Add(m => m.ContactName).Titled("Contact Name").Sortable(true).Filters.ToString();
                            columns.Add(m => m.Email).Titled("Email Address").Sortable(true).Filterable(true);
                            columns.Add(m => m.ReferenceNumber).Titled("Reference Number").Sortable(true).Filterable(true);
                            columns.Add(m => m.ModifiedOn).Titled("Modified On").Filterable(true).Sortable(true);
                            columns.Add(m => m.CustomerId)
                               .Titled("Edit")
                               .Sanitized(false)
                               .Encoded(false)
                                //.RenderValueAs(o => Html.ActionLink("Edit","EditCustomer","Customer",new { CustomerId = o.CustomerId },new { title = "Please click here to edit the record",@class = "modal-link" }).ToHtmlString());
                            .RenderValueAs(d => Html.ActionLink("Edit",new { CustomerId = d.CustomerId },new { @class = "modal-link" }));

                        }).WithPaging(4)
<br />
<br />
@Html.ActionLink("Click to Add Customer","AddCustomer",new { @class = "modal-link" })
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
    aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            ×</button>
        <h3 id="myModalLabel">
            Edit Customer</h3>
    </div>
    <div class="modal-body">
        <p>
            Loading…</p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">
            Close</button>
    </div>
</div>
<script type="text/javascript">
    //this script reset modal each time when you click on the link:
    $(function () {
        $(".modal-link").click(function (event) {
            event.preventDefault();
            $('#myModal').removeData("modal");
            $('#myModal').modal({ remote: $(this).attr("href") });
        });
    })
</script>

当我单击“编辑”按钮时,完整记录会在弹出窗口中加载,如下所示.顺便说一句,这是使用Twitter Bootstrap样式.

到现在为止还挺好.

控制器和.cshtml是

/// <summary>
    /// Brings a Specific Customer
    /// </summary>
    /// <param name="CustomerId"></param>
    /// <returns></returns>
    [HttpGet]
    public ActionResult EditCustomer(Guid CustomerId)
    {
        CustomerViewModel cusVM = custRepository.GetCustomer(CustomerId);
        return View(cusVM);

    }

    /// <summary>
    /// Editing Customer
    /// </summary>
    /// <param name="cusVM"></param>
    /// <returns></returns>
    [HttpPost]
    public ActionResult EditCustomer(CustomerViewModel cusVM)
    {
        if (ModelState.IsValid)
        {
            custRepository.EditCustomer(cusVM);
            return RedirectToAction("CustomerList","Customer");
        }
        else
        {
            return PartialView(cusVM);
        }
    }

编辑客户的.cshtml是

@model DataAccess.Models.CustomerViewModel
@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>       
        <div class="editor-label">
            @Html.LabelFor(model => model.CustomerName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CustomerName)
            @Html.ValidationMessageFor(model => model.CustomerName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Address1)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address1)
            @Html.ValidationMessageFor(model => model.Address1)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.Address2)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Address2)
            @Html.ValidationMessageFor(model => model.Address2)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.City)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)
        </div>
         <div class="editor-label">
            @Html.LabelFor(model => model.County)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.County)
            @Html.ValidationMessageFor(model => model.County)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ContactName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ContactName)
            @Html.ValidationMessageFor(model => model.ContactName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>
        <div>
            @Html.HiddenFor(model => model.CustomerId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ReferenceNumber)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ReferenceNumber)
            @Html.ValidationMessageFor(model => model.ReferenceNumber)
        </div>
        <p>
            <input type="submit" value="Save" class="btn btn-primary" />
        </p>
    </fieldset>
}