Url.jtent for javascript

时间:2013-04-05 12:37:30

标签: javascript asp.net-mvc asp.net-mvc-3

我目前使用此方法获取正确的相对URI(独立于部署情况)。剃刀代码(asp.net mvc 3):

@section JavaScript
{  
    <script type="text/javascript">
        var _getUrl =  "@Url.Content("~/bla/di/bla")";
    </script>
}

单独的js文件:

$.ajax({
    url: _getUrl,

你认为有更好的方法吗?

2 个答案:

答案 0 :(得分:6)

就我个人而言,我更喜欢使用HTML5 data- *属性或将URL作为某些DOM元素的一部分,我不引人注意地使用AJAXify。

问题是你永远不会写$.ajax这样的电话。您编写它们以对应于某些DOM事件。例如点击锚点。在这种情况下,它是微不足道的,您只需使用HTML帮助程序来生成此锚:

@Html.ActionLink("click me", "someAction", "somecontroller", new { id = "123" }, new { @class = "link" })

然后:

$('.link').click(function() {
    $.ajax({
        url: this.href,
        type: 'GET',
        success: function(result) {
            ...
        }

    });
    return false;
});

或者你是AJAX化表单:

@using (Html.BeginForm("SomeAction", "SomeController", FormMethod.Post, new { id = "myForm" }))
{
    ...
}

然后:

$('#myForm').submit(function() {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function(result) {
            ...
        }
    });
    return false;
});

另一个例子是当相应的DOM元素上没有适当的url时,使用HTML5 data- *属性。假设您想在选择下拉列表时使用AJAX调用控制器操作。想想例如级联ddls。

以下是您的下拉列表的样子:

@Html.DropDownListFor(x => x.SelectedValue, Model.Values, new { id = "myDdl", data_url = Url.Action("SomeAction") })

然后:

$('#myDdl').change(function() {
    var url = $(this).data('url');
    var selectedValue =  $(this).val();
    $.getJSON(url, { id: selectedValue }, function(result) {
        ...
    });
});

因为您可以看到您并不真正需要在视图中声明的此_getUrl全局javascript变量。

答案 1 :(得分:0)

我会做以下事情:

在Javascript之前

Razor C#脚本

@{
    var myUrlString = Url.Action("ActionName", new { controller="ControllerName" });
}

<强>的JavaScript

$.ajax('@myUrlString',{
    // options
});

您还可以使用Url.RouteUrlUrl.HttpRouteUrl

编辑 - 显示分离的JS文件的示例

剃刀

@{
    var myServerGeneratedValue = Url.Action("ActionName", new{controller="ControllerName"});
}
<script type="text/javascript">
    var myHelperObject = new MyHelperObject();
    myHelperObject.Init('@myServerGeneratedValue');
</script>

JS文件

var MyHelperObject = function(){

    this.Init = function(serverGeneratedValue){
        // do something with serverGeneratedValue
    };

};