asp.net mvc - Url.Content for javascript - Stack Overflow

admin管理员组

文章数量:1309980

I currently use this approach to obtain the correct relative URI (independent of the deployment situation). Razor code (asp mvc 3):

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

Separate js file:

$.ajax({
    url: _getUrl,

Do you reckon there is a better approach?

I currently use this approach to obtain the correct relative URI (independent of the deployment situation). Razor code (asp mvc 3):

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

Separate js file:

$.ajax({
    url: _getUrl,

Do you reckon there is a better approach?

• javascript
• asp-mvc
• asp-mvc-3

Share Improve this question Follow asked Apr 5, 2013 at 12:37 cs0815cs0815 17.4k4747 gold badges154154 silver badges322322 bronze badges 7

• Your scripts should be in a separate minimizable/cachable js file. – asawyer Commented Apr 5, 2013 at 12:42
• I do the same, but I'm not sure if it's a good thing to do. +1 for question :) – Mariusz.W Commented Apr 5, 2013 at 12:49
• 2 @asawyer - not sure what the point of your ment is ... – cs0815 Commented Apr 5, 2013 at 13:28
• @asawyer "should" is not the correct word. In .NET 4.5 you can do this, however, you couldn't solve this issue with that! – LiverpoolsNumber9 Commented Apr 5, 2013 at 13:38
• @LiverpoolsNumber9 The only issue I see here is that csetzkorn should be using @Url.Action or possibly @Url.RouteUrl not @Url.Content – asawyer Commented Apr 5, 2013 at 13:41

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 6

Personally I prefer using HTML5 data-* attributes or including the URL as part of some DOM element that I unobtrusively AJAXify.

The thing is that you never write $.ajax calls flying around like that. You write them to correspond to some DOM events. Like for example clicking of an anchor. In this case it's trivial, you just use an HTML helper to generate this anchor:

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

and then:

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

    });
    return false;
});

or maybe you are AJAXifying a form:

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

and then:

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

Another example would be to use HTML5 data-* attributes when an appropriate url is not available on the corresponding DOM element. Suppose that you want to invoke a controller action with AJAX when the selection of a dropdown changes. Think for example cascading ddls.

Here's how your dropdown might look like:

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

and then:

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

So as you can see you don't really need this _getUrl global javascript variable that you declared in your view.

I would do the following:

Razor C# script before Javascript

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

JavaScript

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

You could also use Url.RouteUrl or Url.HttpRouteUrl.

EDIT - showing example with separated JS file

Razor

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

JS file

var MyHelperObject = function(){

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

};

本文标签： aspnet mvcUrlContent for javascriptStack Overflow