JavaScript 没有发布到带有隐式索引 ASP.NET MVC 中的正确操作

本文关键字：MVC NET 操作 ASP JavaScript 索引 | 更新日期: 2023-09-27 18:31:06

当我像这样冲浪到地址时：

服务器：端口/控制器

它会自动假定请求的操作是索引，因此显示的页面等效于以下内容：

服务器：端口/控制器/索引

我的问题是，当我在单击按钮时执行这样的事情时：

$(function () {
  $("#clickaroo").click(function (event) {
    event.preventDefault();
    $.post("Action", null, function () { ... });
  });
});

当我隐式访问索引时它会失败（即显示该操作的页面但 URL 不包含其名称），而在显式访问它时工作（即 URL 说 .../控制器/索引）。如果我然后将帖子更改为以下内容：

$.post("Controller/Action", null, function () { ... });

它适用于前者，但开始失败于后者。当然，我确实理解为什么 - location.href 以 /Action 为后缀，如果没有控制器的名称或重复的名称，它会感到困惑。处理这个问题的最佳实践方法是什么？

  • 用 RouteConfig.cs 文件四处走动？（听起来矫枉过正）
  • 在 JS 中添加条件？（感觉像巴阿德设计）
  • 强制 URL 显式后缀？（不确定如何）

JavaScript 没有发布到带有隐式索引 ASP.NET MVC 中的正确操作

最好的解决方案是使用 Url.Action 或 Url.RouteUrl html 帮助程序方法来构建操作方法的正确相对 url。这将负责构建正确的URL，无论您当前所在的页面/视图如何。

var url1="@Url.Action("Create","Home")";
//use url1 now.

如果你在剃刀视图中有你的javascript，上面的代码将起作用。如果您的脚本位于外部文件中，则可以构建根目录的相对 url 并将其传递给您的 js 文件，并根据需要使用它来构建 url。确保在执行此操作时使用 javascript 命名空间，以避免全局 JavaScript 变量可能出现的问题。

因此，在您的剃须刀视图（布局文件或特定视图）中，您可以执行此操作。

<script>
    var myApp = myApp || {};  
    myApp.Urls = myApp.Urls || {};
    myApp.Urls.baseUrl = '@Url.Content("~")';
    myApp.Urls.jobListUrl= '@Url.Action("Index","jobs")';
</script>
<script src="~/Scripts/YourExternalJsFile.js"></script>

在您的YourExternalJsFile.js文件中，您可以像阅读它一样

var urlToJobIndex= myApp.Urls.jobListUrl;
// Or With the base url, you may safely add the remaining url route.
var createUrl= myApp.Urls.baseUrl+"home/create";

编辑 ：如果您只是关心获取网站的根/基本网址，以便您可以附加它以获取您追求的另一个网址，您可以简单地使用 / 作为 url 的第一个字符。

   var createUrl= "/home/create";

对于锚标记用例中的特定点击事件，您只需读取链接的href属性值即可使用该值。

如果要对与链接的href属性值相同的操作方法进行 ajax 调用。

<a id="clickaroo" href="@Url.Action("Create","Customer")">Create<a/>

并在您的点击事件中获取 href 属性值

$(function(){
  $("#clickaroo").click(function(e){
    e.preventDefault();
    var u = $(this).attr("href");
    $.post(u,function(response){
    });
  });
});

如果要对链接的 href 属性值以外的其他操作方法进行 ajax 调用。

在这里，您可以使用数据属性将其他网址保留在链接标记标记中。

<a id="clickaroo" href="#" data-targurl="@Url.Action("Create","Customer")">Create<a/>

并在点击事件中获取"targurl"的数据属性值 $（function（）{

  $("#clickaroo").click(function(e){
    e.preventDefault();
    var u = $(this).data("targurl");
    $.post(u,function(response){
    });
  });
});

您可以使用html5 attirbute，因为您有外部js文件，因此无法访问那里的razor，请在按钮上使用data-属性，然后通过点击句柄中的jquery选择URL，例如：

<button  id="clickaroo" data-url="@Url.Action("Action","Controller")">Click me</button>

然后在 js 文件中：

$("#clickaroo").click(function (event) {
    event.preventDefault();
    var button = $(this);
    $.post(button.data("url"), null, function () { ... });
  });
相关文章：