使用ASP.NET MVC在JS文件中为jQuery设置ajax url

使用ASP.NET MVC在JS文件中为jQuery设置ajax url

这种方式充分利用了MVC路由，因此您可以充分利用MVC框架。受斯图史密斯答案的启发。

在这里，我有一个

ApplicationController

针对此URL的动态javascript *** 作：

 /application/js

我在此处包括静态文件，因为我只想下载一个主Javascript文件。您可以根据需要选择只返回动态内容：

     /// <summary>    /// Renders out javascript    /// </summary>    /// <returns></returns>    [OutputCache(CacheProfile = "script")]    [ActionName("js")]    public ContentResult RenderJavascript()    {        StringBuilder js = new StringBuilder();        // load all my static javascript files      js.AppendLine(IO.File.ReadAllText(Request.MapPath("~/scripts/rr/cart.js")));        js.AppendLine(";");        // dynamic javascript for lookup tables        js.AppendLine(GetLookupTables());        js.AppendLine(";");        return new ContentResult()        { Content = js.ToString(), ContentType = "application/x-javascript"        };    }

这是创建查找表的帮助函数。只需为要使用的每个RouteUrl添加一行。

    [NonAction]    private string GetLookupTables()     {        StringBuilder js = new StringBuilder();        // list of keys that correspond to route URLS        var urls = new[] { new { key = "updateCart", url = Url.RouteUrl("cart-route", new { action = "updatecart" }) }, new { key = "removeItem", url = Url.RouteUrl("cart-route", new { action = "removeitem" }) }        };        // lookup table function        js.AppendLine("// URL Lookuptable");        js.AppendLine("$.url=function(url) {");        js.AppendLine("var lookupTable = " + new JavascriptSerializer().Serialize(urls.ToDictionary(x=>x.key, x=>x.url)) + ";");        js.AppendLine("return lookupTable[url];");        js.AppendLine("}");        return js.ToString();    }

这将生成以下动态javascript，基本上只是从任意键到我的action方法所需的URL的查找表：

// URL Lookuptable$.url=function(url) {var lookupTable = {"updateCart":"/rrmvc/store/cart/updatecart","removeItem":"/rrmvc/store/cart/removeitem"};return lookupTable[url];}

在cart.js中，我可以具有这样的功能。请注意，url参数来自查找表：

 var RRStore = {}; RRStore.updateCart = function(sku, qty) {    $.ajax({        type: "POST",        url: $.url("updateCart"),        data: "sku=" + sku + "&qty=" + qty,        dataType: "json"        // beforeSend: function (){},        // success: function (){},        // error: function (){},        // complete: function (){},    });    return false;

};

我可以从任何地方调用它：

 RRStore.updateCart(1001, 5);

这似乎是我想出的唯一方法，它将使我能够以干净的方式使用路由。在javascript中动态创建URLS非常困难且难以测试。测试类型可以在此处的某处添加一层，以方便进行测试。