当前,当对MVC操作进行Ajax调用时,我的javascript位于视图内,而不位于其自己的JS文件中。
然后很容易做到这一点:
var xhr = $.ajax({ url: '<%= Url.Action("DisplayItem","Home") %>/' + el1.siblings("input:hidden").val(), data: { ajax: "Y" }, cache: false, success: function(response) { displayMore(response, el1, xhr) } });
…然后Url.Action()在JS内部使用ajax调用将URL包含在内就非常简单。如果不对URL进行硬编码,该如何移动它自己的JS文件?
Url.Action()
这种方式充分利用了MVC路由,因此您可以充分利用MVC框架。受斯图史密斯答案的启发。
在这里,我有一个ApplicationController针对此URL的动态javascript 操作:
ApplicationController
/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非常困难且难以测试。测试类型可以在此处的某处添加一层,以方便进行测试。