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

当做一个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文件？

解决方法

在这里我有一个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是非常难以测试的。测试类型可以添加到这里的某个地方，以方便测试。

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!