Question

我正在尝试使用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代码至少会触发。

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

Answer 1

以下对我来说很好。

型号：

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>

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

返回JSON以查看导致Jquery无法触发

1 个答案: