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

Question

当前，当对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文件？

Answer 1

这种方式充分利用了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非常困难且难以测试。测试类型可以在此处的某处添加一层，以方便进行测试。