当做一个Ajax调用MVC动作当前我有我的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) } });
…然后在JS中使用Url.Action()包含在ajax调用中的URL很简单。如果没有硬编码URL,我该如何移动它自己的JS文件?
解决方法
这样可以充分利用MVC路由,以便充分利用MVC框架。
灵感来自于stusmith的答案。
灵感来自于stusmith的答案。
在这里我有一个ActionController的动作javascript为这个URL的动作:
/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",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,它基本上只是从任意键到我的操作方法所需的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是非常难以测试的。测试类型可以添加到这里的某个地方,以方便测试。