0

我正在尝试使用 json 数据填充 jquery 网格：

 public ActionResult DataHandler()
        {
            List<Employee> employees = EmployeeRepository.GetEmployees();

            return Json(new
            {
                employees
            },
            JsonRequestBehavior.AllowGet);

        }

我的客户端代码：

$(document).ready(function () {
    alert("Code Fired!");
    var source =
            {
                url: '@Url.Action("DataHandler", "Home")',
                datatype: "json",
                datafields: [{ name: "FirstName" }, { name: "LastName" }, { name: "Product" }, { name: "Price", type: "float" }, { name: "Quantity", type: "int" }, { name: "Total", type: "float"}]
            };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'FirstName', width: 100 },
                  { text: 'Last Name', dataField: 'LastName', width: 100 },
                  { text: 'Product', dataField: 'Product', width: 180 },
                  { text: 'Quantity', dataField: 'Quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'Price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'Total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });


});

这是我的观点：

@{
    ViewBag.Title = "DataHandler";
}

@section scripts
{
    @Content.Script("GetGridData.js",Url)
}


<h2>DataHandler</h2>

<div id="jqxgrid"></div>

如果我有这样的代码设置，它会将填充的 JSON 数据返回给浏览器，永远不会触发 iquery 代码如果我有控制器，只需返回 View(); 我可以看到 jquery 代码至少会触发。

如何设置页面以从控制器代码中处理我的 json 数据并将其显示在网格中？

4

1 回答 1

0

以下对我来说很好。

模型：

public class Employee
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Product { get; set; }
    public decimal Price { get; set; }
    public int Quantity { get; set; }
    public decimal Total { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult DataHandler()
    {
        List<Employee> employees = Enumerable
            .Range(1, 5)
            .Select(x => new Employee
            {
                FirstName = "fn " + x,
                LastName = "ln " + x,
                Price = 0.7m * x,
                Product = "prod",
                Quantity = x,
                Total = 7.2m * x
            })
            .ToList();

        return Json(new
        {
            employees
        },
        JsonRequestBehavior.AllowGet);
    }
}

查看 ( ~/Views/Home/Index.cshtml):

<script src="@Url.Content("~/Scripts/jqwidgets/jqxcore.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqwidgets/jqx-all.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var source =
            {
                url: '@Url.Action("DataHandler", "Home")',
                datatype: "json",
                datafields: [{ name: "FirstName" }, { name: "LastName" }, { name: "Product" }, { name: "Price", type: "float" }, { name: "Quantity", type: "int" }, { name: "Total", type: "float"}]
            };

        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'FirstName', width: 100 },
                  { text: 'Last Name', dataField: 'LastName', width: 100 },
                  { text: 'Product', dataField: 'Product', width: 180 },
                  { text: 'Quantity', dataField: 'Quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'Price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'Total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
                ]
            });
    });
</script>

<div id="jqxgrid"></div>

所以我猜你可能在脚本包含或服务器端操作引发异常或检索员工列表时遇到了一些问题。

于 2012-08-06T15:44:55.467 回答