MVC将json编码为DataTables [英] MVC encode json to DataTables

问题描述

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

Im using the following code to populate data to populate a DataTable with Ajax.

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

My problem is that i use AllowHtml (needed) when i save the company names to the database.

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

So my question is: How do i encode Title = asset.CompanyName so datatable dont get scripts/html like in the picture?

    // 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(); 

            });

推荐答案

问题是您未对data.Title进行HTML编码.

The problem is you are not HTML encoding the data.Title.

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

应替换为:

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

您将需要构建自己的htmlEncode实现，或使用此.

You will need to build your own htmlEncode implementation, or use this one.

这篇关于MVC将json编码为DataTables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！