Best way not to hardcode url's when using ASP.NET MVC with JQuery

Question

Hallo guys,

I'm using ASP.NET MVC with jquery and it's going great for now. Just, there is one question that is bothering me. How should I handle urls in jquery methods? I really wouldn't like to hard code it, like here:

 $(function() {  
        $.getJSON("/Home/List", function(data) {  
            var items = "---------------------";  
            $.each(data, function(i, country) {  
                items += "" + country.Text + "";  
            });  
            $("#Countries").html(items);  
        });  

       $("#Countries").change(function() {  
           $.getJSON("/Home/States/List/" + $("#Countries > option:selected").attr("value"), function(data) {  
               var items = "---------------------";  
               $.each(data, function(i, state) {  
                   items += "" + state.Text + "";  
               });  
               $("#States").html(items);  
           });  
       });  
   });

It is highly recommended to use HTML helper methods to create links in MVC, like Html.ActionLink, Html.BeginForm so in case that someone change that HomeController is mapped on MyHome instead of Home there will be no problem.

So, how not to hard code the url like in example?

Also, I don't want to use ASP.NET Ajax because i agree with this answer asp-net-ajax-vs-jquery-in-asp-net-mvc.

Thanks

Answer 1

A really simple and pragmatic approach I have been using, is to put something like this at the top of every master page:

<script type="text/javascript">
    var baseUrl = '<%= Url.Resolve("~") %>';
</script>

and then include all your javascript files afterwards, using baseUrl whenever it needs it.

Answer 2

You could define multiple global javascript variables:

<script type="text/javascript">
    var listUrl = '<%= Url.Action("Index", "Home") %>';
    var statesListUrl = '<%= Url.Action("States", "Home") %>';
</script>

which will be used later by the $.getJSON methods.

Answer 3

I often only need the current controller and action in js. Thats why I included this in my MasterPage.

<script type="text/javascript">
  var controller = '';
  var action = '';
  controller =   '<%= ViewContext.RouteData.GetRequiredString("controller")%>' ;
  action =   '<%= ViewContext.RouteData.GetRequiredString("action")%>' ;
    </script>