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

当我正在对MVC操作进行Ajax调用时，我在View中有我的javascript，而不是在自己的JS文件中。

这样做非常容易：

var xhr = $.ajax({ url: '/' + el1.siblings("input:hidden").val(), data: { ajax: "Y" }, cache: false, success: function(response) { displayMore(response, el1, xhr) } }); 

…然后在JS中使用Url.Action()包含在ajax调用中的URL非常简单。 如果不对URL进行硬编码，我怎么能移动这个自己的JS文件呢？

Answer 1

这种方式完全使用MVC路由，因此您可以充分利用MVC框架。 受到stusmith的回答的启发。

这里我在ApplicationController中为这个URL的动态javascript做了一个动作：

  /application/js 

我在这里包含静态文件，因为我只想下载一个主javascript文件。 如果需要，您可以选择仅返回动态内容：

  /// 
 /// Renders out javascript /// 
 ///  [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中，我可以拥有这样的function。 请注意，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中动态创建URL是icky并且难以测试。 测试类型可以在此处的某处添加一层，以便于测试。

Answer 2

我这样做是生成URL服务器端并使用HTML5数据属性存储在生成的HTML中，例如:( Razor语法）

 
... 

然后你可以使用jQuery attr（）函数来获取url，例如：

 $(".customClass").click(function () { $.ajax({ url: $(this).attr("data-url"), success: function (data) { // do stuff } }); }); 

如果您在响应AJAX调用时生成HTML客户端，则可以在JSON有效内容中包含相关URL，并以相同方式填充数据属性。

Answer 3

将AJAX调用包含在将URL（和任何其他数据）作为参数的函数中，并返回响应。 然后在您的视图中，调用函数而不是直接调用AJAX调用。

 function doAjax( url, data, elem, callback ) { return $.ajax({ url: url, data: { ajax: data }, cache: false, success: function(response) { callback(response, elem, xhr); } }); } ... 
 我建议您阅读http://jqfundamentals.com/book/index.html#N20D82以更好地处理模块模式。 

Answer 4

这是另一种方式：

在您的母版页中，包含内联脚本的区域：

  ...  ...  

然后在Page_Load中，创建一个实用程序函数：

 protected void Page_Load( object sender, EventArgs e ) { AddInlineScript( string.Format( "$.url=function(url){{return '{0}'+url;}}", GetBaseUri() ) ); ... } private Uri GetBaseUri() { var requestUrl = Request.Url.AbsoluteUri; var i = requestUrl.IndexOf( request.Path ); return new Uri( requestUrl.Substring( 0, i ) ); } private void AddInlineScript( string content ) { var script = new HtmlGenericControl( "script" ); script.Attributes.Add( "type", "text/javascript" ); script.InnerHtml = content; _inlineScripts.Controls.Add( script ); } 

现在你可以在你的ajax中使用这个function：

 $.ajax({ url: $.url('path/to/my-handler'), ... });