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

Question

当我对MVC操作进行Ajax调用时,我在View中有我的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中使用JS内部包含URL 非常容易.如果不对URL进行硬编码,我怎么能移动它做自己的JS文件？

Answer 1

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

<li class='customClass' data-url='@Url.Action("DisplayItems", "Home", new { id = Model.Id })'>...</li>

然后你可以使用jQuery attr()函数来获取url,例如:

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

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

Answer 2

这种方式完全使用MVC路由,因此您可以充分利用MVC框架.灵感来自stusmith的回答.

在这里,我有一个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中动态创建URL是icky并且难以测试.测试类型可以在此处的某处添加一层,以便于测试.

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); }
    });
}

...

<input type='button' value='Go get it' onclick='doAjax( <%= Url.Action ...

我不确定这比在页面上而不是在JS文件中调用Ajax更好,除非你经常使用完全相同的模式.