0

jqueryグリッドにjsonデータを入力しようとしています:

 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 データがブラウザに返され、クエリ コードが起動されることはありません。少なくとも jquery コードが起動することがわかります。

コントローラー コードから jquery my 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 に答える