Question

我正在使用ASP.NET MVC5，我正在尝试将我的@Model绑定到jqgrid。我已经找到了带有xml和json的样本，但它们对我来说有点老了，因为我正在使用ActionResult将数据传递给视图。问题是我不知道如何将我的模型设置为网格源。 @Model 100％正常工作，因为它在另一个带表的视图上进行了测试。我不会发布任何javascript错误的图片，因为它没有显示任何有用的东西。我确信唯一的问题是将@Model.Employees映射到View中的源变量。这是我的代码。

型号：

 public class EmployeesTownsViewModel
    {
        public EmployeesTownsViewModel()
        {
            Towns = new List<SelectListItem>();
        }
        public List<Employee> Employees { get; set; }
        public IList<SelectListItem> Towns { get; set; }       
        public int Id { get; set; }
        public string EmployeeName { get; set; }
        public int TownId { get; set; }
        public string PhoneNumber { get; set; }
        public string Identitycard_num { get; set; }
        public string Address { get; set; }
    }

控制器：

[HttpGet]
public ActionResult Worker()
{
    var employee = new EmployeesTownsViewModel()
    {
        Employees = this.Data.Employees.All().Where(x => x.IsWorkerDeleted == false).ToList(),
        Towns = this.Data.Towns.All().Select(x => new SelectListItem { Text = x.TownName, Value = x.Id.ToString() }).ToList()
    };
    employee.Towns.Insert(0, new SelectListItem() { Text = "---Choose---", Value = "0" });
    return View(employee);
}

查看：

@model LogisticsEngineeringLTD.ViewModels.Employees.EmployeesTownsViewModel
@{
    ViewBag.Title = "Worker";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>
        This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.
    </title>
    <meta name="description" content="JavaScript Grid with rich support for Data Filtering, Paging, Editing, Sorting and Grouping" />
    @*<link rel="stylesheet" href="~/Content/jqx.base.css" type="text/css" />*@
    <script type="text/javascript">
        $(document).ready(function () {

            //How to set this variable 'source' to my Model properties
            var source =
           {
               datatype: "array",
               datafields: [
                    { name: 'Id', type: 'number' },
                    { name: 'EmployeeName', type: 'string' },
                    { name: 'PhoneNumber', type: 'string' },
                    { name: 'Address', type: 'string' },
                    { name: 'TownId', type: 'number' },
                    { name: 'Identitycard_num', type: 'string' },
               ],
               localdata: @Model,
           };

            var dataAdapter = new $.jqx.dataAdapter(source);
            var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                if (value < 20) {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                }
                else {
                    return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                }
            }
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                    { text: "Name", datafield: "EmployeeName" },
                    { text: "Number", datafield: "PhoneNumber" },
                    { text: "Address", datafield: "Address" },
                    { text: "Town", datafield: "TownId" },
                    { text: "Id Card Number", datafield: "Identitycard_num" }
                ],
                columngroups: [
                    { text: 'Product Details', align: 'center', name: 'ProductDetails' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

提前谢谢^^

jqwidgets将模型绑定到网格

0 个答案: