将模型数据传递给 dataTables 的 ajax 请求 url答案

【问题标题】：Pass Model data to ajax request url for dataTables将模型数据传递给 dataTables 的 ajax 请求 url
【发布时间】：2020-10-02 00:15:55
【问题描述】：

我正在尝试将 @Model.Id 从我的 razor 视图传递给 javascript，以便我可以将它传递给 dataTables ajax url，但我无法将值传递给 javascript 文件。在这一点上，即使只是一个正确方向的点也会有所帮助

这是视图：

    @model GTravel.Domain.Package    
    @{
        var title = Model.Name;    
    }


   //boring html code


    @section Scripts{
        <script src="~/js/packageCity.js" data-packageId="@Model.Id"></script>
    }

还有一个 js 的 sn-p：


var dataTable;
var url;
$(document).ready(function () {
    url = "/admin/packageCity/GetAll/" + packageId.toString();
    loadDataTable();
});



function loadDataTable() {

    dataTable = $('#tblData').DataTable({
        "ajax": {
            "url": url,
            "type": "GET",
            "datatype": "json"
        },
        "columns": [
            { "data": "city", "width": "10%" },            

//more code etc

【问题讨论】：

标签： javascript ajax datatables asp.net-core-mvc razor-pages

【解决方案1】：

根据您的方法，您缺少一些关键内容。

为保证data-packageId传递的值能在js文件中准确获取，需要在引用js文件的脚本中添加id，然后获取传递的值通过在js文件中获取对应的id：

  @section Scripts{
        <script  id="Index.js"  src="~/js/packageCity.js" data-packageId="@Model.Id"></script>
    }

js 文件：

$(document).ready(function () {
    var $vars = $('#Index\\.js').data();
    url = "/admin/packageCity/GetAll/" + $vars.packageid;
    loadDataTable();
});

并且需要注意的是，通过$vars获取packageId时，要确保packageId都是小写字母。

另一种方法：

可以在引用js文件之前直接在视图中创建一个变量，然后接受需要传递的值，这样在js文件中就可以直接调用该变量来获取需要传递的值。

@section Scripts{
    <script> 
    var data = '@Model.Id'; 
    </script>
    <script  src="~/js/packageCity.js" ></script>

}

js 文件：

 $(document).ready(function () {

        url = "/admin/packageCity/GetAll/" + data;
        loadDataTable();
    });

【讨论】：