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

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

1> Sam..：

---

我这样做是生成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,并以相同方式填充数据属性.

---

这应该是#1答案.对于那些添加html属性的人来说,serveride ....`data_url`在html源代码中翻译成`data-url`.

---

一个小更新:更高版本的jQuery支持使用`data()`函数直接访问数据属性(例如`$(this).data('url')`).

2> Simon_Weaver..：

---

这种方式完全使用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中我可以有这样的功能.请注意,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并且难以测试.测试类型可以在此处的某处添加一层,以便于测试.

3> tvanfosson..：

---

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

...

\n'
                    +"已关注")
            }else if(response=="0"){
                tips('已取消关注！')
                $("#follow_bt").html('\n' +
                    "关注作者")
            }else if(response=="-2"){
                tips("请先登录！")
            }else{
                tips("关注失败！")
            }
        });
        
    }

    function like(sid) {

        var myDate = new Date();
        $.get("/blog/article/like?sid="+sid+"&stime="+myDate.getMilliseconds(),null,function(response){
            if(response!="-1"){
                $("#like_num").html(response+"赞")
            }else{
                tips("关注失败！")
            }
        });

    }





    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有