类似cshtml@Url.Artion（动作、控制器）的Javascript

作为我项目的一部分，我将cshtml脚本部分分离到它自己的文件中。除了一条线外，它大部分都很成功。最初，视图文件在脚本部分包含以下行：

"sAjaxSource": "@Url.Action("CertificationRun", "Certifications")", //<= part of DataTable() process

但是，在启动时，我收到了以下错误：

DataTables警告：表id={id}-Ajax错误

在浏览了官方网站之后，我用建议的步骤调试了该部分。它返回错误500。因此，在深入研究该错误之前，我想确保我理解了

@Url.Action（“CertificationRun”、“Certifications”）

的转换，并且正确地转换了它。

---

这样，我就可以消除一些理论，朝着正确的方向前进。

您应该在razor视图中执行

Url.Action

方法，该方法将在服务器中执行，并使用该方法的结果（与Action方法的相对Url），然后通过全局变量将其传递给js代码。确保使用javascript名称空间传递值以避免值覆盖

所以在你的razor视图中，你会有这样的代码

<script>
    var myApp = myApp || {};  
    myApp.urls = myApp.urls || {};       
    myApp.urls.certificateRunUrl= '@Url.Action("CertificationRun","Certifications")';
</script>
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

var url = myApp.urls.certificateRunUrl;
//use url for your datatable call

var url = $("#urls").data("certificateRunUrl");
//use url for your datatable call

另一个选项是将其设置为表单元素，并使用jQuery在外部js代码中读取该值

 <div id="urls" 
           data-certificateRunUrl="'@Url.Action("CertificationRun","Certifications")" />

---

当您需要基于表单中输入元素的url时，此方法非常有用（例如：对于url获取输入元素值更改事件的数据，您可以将此url保留在输入元素数据字段中）

您应该在razor视图中执行

url.Action

方法，它将在服务器中执行，并使用结果（这是操作方法的相对url），并通过全局变量将其传递给js代码。确保使用javascript名称空间传递值以避免值覆盖

所以在你的razor视图中，你会有这样的代码

<script>
    var myApp = myApp || {};  
    myApp.urls = myApp.urls || {};       
    myApp.urls.certificateRunUrl= '@Url.Action("CertificationRun","Certifications")';
</script>
<script src="~/Scripts/PageSpecificExternalJsFile.js"></script>

var url = myApp.urls.certificateRunUrl;
//use url for your datatable call

var url = $("#urls").data("certificateRunUrl");
//use url for your datatable call

另一个选项是将其设置为表单元素，并使用jQuery在外部js代码中读取该值

 <div id="urls" 
           data-certificateRunUrl="'@Url.Action("CertificationRun","Certifications")" />

---

当您需要基于表单中输入元素的url时，此方法非常有用（例如：对于url获取输入元素值更改事件的数据，您可以将此url保留在输入元素数据字段中）

事实证明，我有一个正确的实现。为了使javascript指向来自控制器的特定操作，需要一个cshtml操作代码行

"sAjaxSource": "@Url.Action("ActionName", "ControllerName")

可以转换为纯Javascript，如下所示：

var ajSource = $("#RootDirectory").val() + "/ExpiredCert/ExpiredCertRun";

    $('.ssdatatable').DataTable({
        //irrelevant block
        "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
        "bProcessing": true,
        "sDom": "TBflrtip",
        "bServerSide": true,
        //end irrelevant block

        //"sAjaxSource": "@Url.Action("CertificationRun", "Certifications")",
        //"sAjaxSource": "$(\"#RootDirectory\").val() + \"/ExpiredCert/ExpiredCertRun\" ",
        "sAjaxSource": ajSource,

       //more code
       ,
       "aoColumns": [{ "mData": "VariableName" },//more columns
                                     ]
       });
    }

var ajSource = $("#RootDirectory").val() + "/ControllerName/ActionName"

其中RootDirectory是根目录（localhost或主页）的url字符串最终回答了我的问题。

---

在我的特殊情况下，实现是正确的，我与列命名/声明不一致。

事实证明，我的实现是正确的。为了使javascript指向来自控制器的特定操作，需要一个cshtml操作代码行

"sAjaxSource": "@Url.Action("ActionName", "ControllerName")

可以转换为纯Javascript，如下所示：

var ajSource = $("#RootDirectory").val() + "/ExpiredCert/ExpiredCertRun";

    $('.ssdatatable').DataTable({
        //irrelevant block
        "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
        "bProcessing": true,
        "sDom": "TBflrtip",
        "bServerSide": true,
        //end irrelevant block

        //"sAjaxSource": "@Url.Action("CertificationRun", "Certifications")",
        //"sAjaxSource": "$(\"#RootDirectory\").val() + \"/ExpiredCert/ExpiredCertRun\" ",
        "sAjaxSource": ajSource,

       //more code
       ,
       "aoColumns": [{ "mData": "VariableName" },//more columns
                                     ]
       });
    }

var ajSource = $("#RootDirectory").val() + "/ControllerName/ActionName"

其中RootDirectory是根目录（localhost或主页）的url字符串最终回答了我的问题。

---

在我的特殊情况下，实现是正确的，我与列命名/声明不一致。

感谢您的快速响应。最初的一行写在视图文件的脚本部分，我的目标是将视图文件的脚本部分全部删除。有没有办法把这一行变成一个纯js？看起来你的另一个选择更符合我的需要，你能详细说明一下吗？谢谢。我将尝试这两种方法，并告知您进展情况。如果您想利用帮助器方法生成正确的相对URL，则需要在razor文件中，因为它会在服务器中执行。经过进一步研究，我找到了原因（与问题无关），并回答了问题。我的想法是正确的，所以我将把我的答案留给可能需要它的人+1谢谢您的努力。@Shyju我要强调的是data-*属性方法，而不是内联脚本标记。使用data-*属性比其他方法要简单得多。感谢您的快速响应。最初的一行写在视图文件的脚本部分，我的目标是将视图文件的脚本部分全部删除。有没有办法把这一行变成一个纯js？看起来你的另一个选择更符合我的需要，你能详细说明一下吗？谢谢。我将尝试这两种方法，并告知您进展情况。如果您想利用帮助器方法生成正确的相对URL，则需要在razor文件中，因为它会在服务器中执行。经过进一步研究，我找到了原因（与问题无关），并回答了问题。我的想法是正确的，所以我将把我的答案留给可能需要它的人+1谢谢您的努力。@Shyju我要强调的是data-*属性方法，而不是内联脚本标记。使用data-*属性比其他方法要简单得多。