MVC将json编码为DataTables

时间:2017-08-31 11:09:48

标签: c# jquery json asp.net-mvc

我使用以下代码填充数据以使用Ajax填充DataTable

我的问题是,当我将公司名称保存到数据库时,我使用AllowHtml(需要)。

所以我的问题是: 我如何编码 Title = asset.CompanyName 所以datatable不会像图片中那样获得脚本/ html?

Some Name <b>alert("hmm")</b>

    // GET: Jsons/Customers
    public JsonResult Customers([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel)
    {

        Db db = new Db();

        IQueryable<CustomersDTO> query = db.Customers.Where(x => x.CompanyId == companyId);

        var totalCount = query.Count();

        #region Filtering
        // Apply filters for searching
        if (requestModel.Search.Value != string.Empty)
        {
            var value = requestModel.Search.Value.Trim();

            query = query.Where(p => p.Id.ToString().Contains(value.ToString()) ||
                                     p.CompanyName.Contains(value)

                               );
        }

        var filteredCount = query.Count();

        #endregion Filtering

        #region Sorting
        // Sorting
        var sortedColumns = requestModel.Columns.GetSortedColumns();
        var orderByString = String.Empty;

        foreach (var column in sortedColumns)
        {
            orderByString += orderByString != String.Empty ? "," : "";
            orderByString += (column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc");
        }

        query = query.OrderBy(orderByString == string.Empty ? "Id asc" : orderByString);

        #endregion Sorting

        // Paging
        query = query.Skip(requestModel.Start).Take(requestModel.Length);


        var data = query.Select(asset => new
        {

            Id = asset.Id,
            //Allowing HTML for CompanyName
            Title = asset.CompanyName,
            Zip = asset.Zip,
            City = asset.City,
            Active = asset.Active

        }).ToList();

        return Json(new DataTablesResponse(requestModel.Draw,data, filteredCount, totalCount), JsonRequestBehavior.AllowGet);
    }

页面上的代码:

            var assetListVM; 
            $(function () { 
                assetListVM  =
                    { 
                    dt: null,
                        init:  function  ()
                        { 
                        dt = $('#assets-data-table').DataTable(
                            {
                                "language":
                                {
                                    "url": "/Scripts/plugins/dataTables/Swedish.json"
                                },
                                "serverSide": true, 
                                "processing": true, 
                                "ajax":
                                { 
                                    "url": "@Url.Action("Customers", "Jsons")",
                                    "data": function (d)
                                    {
                                        d.parameter1 = "Id";
                                        d.parameter2 = "Title";
                                    }
                                }, 

                                "columns":
                                [ 
                                    { "title": "Id", "data": "Id", "searchable": true }, 
                                    {
                                        "title": "Rubrik",
                                        "searchable": true,
                                        "data": null,
                                        "className": "class1 class2",
                                        "orderable": false,
                                        "render": function (data, type, row) {
                                            var someUrl = "/Admin/ShowCustomer/" + data.Id;
                                            return '<a href="' + someUrl + '" class="openEditor">' + data.Title + '</a>';
                                        }
                                    },
                                    { "title": "Postnr", "data":  "Zip",  "searchable":  true  }, 
                                    { "title": "Stad", "data":  "City",  "searchable":  true  }, 
                                    { "title": "Aktiv", "data": "Active", "searchable": true }
                                ],
                                "lengthMenu":  [[10,  25,  50,  100],  [10,  25,  50,  100]],
                            }); 
                        } 
                    } 

                // initialize the datatables 
                assetListVM.init(); 

            });

1 个答案:

答案 0 :(得分:0)

问题是您不是data.Title的HTML编码。

return '<a href="' + someUrl + '" class="openEditor">' + data.Title + '</a>';

应替换为:

return '<a href="' + someUrl + '" class="openEditor">' + htmlEncode(data.Title) + '</a>';

您需要构建自己的htmlEncode实施,或使用this one