在外部 JavaScript 中处理 ASP.NET MVC 路由

Question

在 JavaScript 中避免硬编码 URL 的最佳方法是什么（主要用于进行 AJAX 调用时）？

过去：

1. 呈现结果为@Url.Action 或@Url.RouteUrl 的JavaScript 变量
2. 将@Url.Action 或@Url.RouteUrl 的结果传递给init/ctor 中的JavaScript。

有没有更好的办法？

这样做会很好：

var url = $.routes("actionName", "controllerName") // or "routeName" for named routes
$.post(url, { id = 1 }, function() { //.. });

这当然是不可能的（JavaScript 无法直接访问 ViewContext，因此无法访问路由表）。

但我想知道是否有一种方法可以为 JavaScript 设置我自己的“路由表”，只有我知道它需要的那些？ （例如我在视图中设置）

人们如何处理这个问题？

Answer 1

尽管在我更喜欢的视图中注入 javascript - 让 HTML 完成它的工作，让 javascript 完成它。下面是模式。

对于链接

/*A cssclass=ajaxlink is added to all those links which we want to ajaxify*/

//html in view
<a class='ajaxlink' href='@Url.Action("Action","Controller")'>I am An Ajax Link</a>

//generated clean html
<a class='ajaxlink' href='/controller/action'>I am An Ajax Link</a>


//Js


jQuery('.ajaxlink').live('click',function(e){
    e.preventDefault();    /*Prevent default behavior of links*/
    var url= $(e.target).attr('href');
   /*
          Now u have url, do post or get: 
          then append received data in some DOM element.
   */
});

//控制器

public ActionResult()
{
       if(Request.IsAjax())
       {    
            /*Return partial content*/
            return View(); 
       }
       else
       {
             return View("SomeOther_View.cshtml");

             /*
                At this point you may reject this request or return full view
                whatever you feel is okie.
             */
       }
}

这种方式可以处理两种类型的用户 javascript 启用和 javascript 禁用。

表单也可以这样做。

Answer 2

实现 Javascript 路由引擎不会太难。首先，将路由从 C# 序列化为 Javascript。其次，重新创建Url.Action 方法。

但是，对于我从事的任何项目来说，这都有些矫枉过正。我团队的项目总是呈现一个包含所有必要 URL 的通用 Javascript 变量。
这种方法确保了强类型的操作方法，也更适合重构。

Answer 3

这说起来容易做起来难，但是您的网站应该在关闭 JavaScript 的情况下完全正常运行。实现这一点后，您应该能够为您的网站添加 AJAX 支持，并在锚标记中重新使用现有的 HREF 属性或在 FORM 标记中重新使用操作属性。该网站将更易于维护，因为您无需更新 JavaScript 文件中的链接。

Answer 4

我决定实现我自己的 UrlFactory，在我的代码中直接使用 ASP.NET 帮助程序 (Html/Url)，现在我没有 src，我将在明天发布。

这方面的优点：我可以轻松地跟踪每个 url 并以集中的方式执行一些重写。

使用示例：

@{
  string myAjaxUrl = UrlFactory.GetUrl (ActionName, ControllerName, new { query-params });
}

然后在 javascript 中使用 'em with

var jsUrl = '@myAjaxUrl';

一旦您定义了自己的工厂，您就可以劫持“重要”的 url（例如用于重写），并将通用的 Url 帮助器实现留给实现。

然而，为了拥有这个完整的客户端，还有一个额外的步骤来呈现 Js 路由上下文，以访问客户端变量。

编辑：正如我所承诺的那样，我非常简单的 Url 类构建器：

public static class UrlFactory
{
    public static string GetUrl(string Action, string Controller, object RouteValues)
    {
        UrlHelper Url = new UrlHelper(HttpContext.Current.Request.RequestContext);
        return Url.Action(Action, Controller, RouteValues);
    }

    // Common URLS for Denied et similars.
    public static string GetDeniedUrl(PEDUtenti Utente, object RouteValues)
    {
        return GetUrl(Utente, "Denied", "Errors", RouteValues);
    }
    public static string GetDeniedUrl(object RouteValues)
    {
        return GetUrl("Denied", "Errors", RouteValues);
    }
}