Better solution to using Url.Action in javascript code

Question

In my current project using asp.net MVC 3 (using razor), when I'm making Ajax calls, I have to keep the JS on the view page because I want to use Url.Action to generate the URL. This means I can't split the js code out into .JS files, Is there a better solution than what I'm currently doing.

Answer 1

I tend to accomplish this in a similar way as above, with a slightly different twist as I like namespacing my javascript.

The javascript file looks something like:

var my = {};

my.viewname = 
{
   init : function(settings){
      // do some work here. settings.someImportantUrl has my json/ajax url eg.
      alert(settings.someImportantUrl );
   }
}

Then my view would contain something like:

<script language='javascript'>
  // allocate an object with variables you want to use in the external js file
  var settings = {someImportantUrl: '<%=Url.Action(...)%>'};
  // call an init method for the current view
  my.viewname.init(settings);
</script>

Answer 2

You can define only urls in view and keep all other javascript code in .js files.

There is code from view in my MVC.NET 1 application:

<script type="text/javascript" src="<%=Url.Content("~/Scripts/Account/ManageUsers.js")%>"></script>

<script type="text/javascript" src="<%=Url.Content("~/Scripts/Account/ManageUsersAndGroups.js")%>"></script>

<script type="text/javascript">

    var getUsersUrl = '<%= Url.Action("GetUsers", "Account") %>';
    var getUserDetailsURL = '<%= Url.Action("GetUserDetails", "Account") %>';

    <%If Not ViewData("readOnly") Then%>
    var changeRolePermissionsUrl = '<%= Url.Action("ChangeRolePermissions", "Account") %>';
    var deleteUserUrl = '<%= Url.Action("DeleteUser", "Account") %>';
    var resetPasswordUrl = '<%= Url.Action("ResetPassword", "Account") %>';
    var updateUserGroupsUrl = '<%= Url.Action("UpdateUserGroups", "Account") %>';
    var updateUserDetailsUrl = '<%= Url.Action("UpdateUserDetails", "Account") %>';
    <%End If%>  
</script>

So, you can even don't render urls for actions which cannot be invoked by user because of security reasons. (ViewData("readOnly") means user have read only access to screen).

And there is a part of code in js file:

function GetUsersList() {
    ajax.getJSON(getUsersUrl, {}, function(data) {
        if (data != false) {
            ShowUsers(data);
        }
        else {
            jAlert('Error during users list retrieving.');
        }
    });
}

Where getUsersUrl is defined in View

Answer 3

I'm not sure of security ramifications on this, but another way to do it would be to use the @Url.Action to set the 'id' of the html markup, then you can create a javascript click function, like the following:

View

<div class="someClickable" id='@Url.Action("Action", "Controller")'>
</div>

Referenced javascript file

$(function() {
    $('someClickable').click(function () {
        $.ajax({
            url: this.id,
            success: someJSFunction,
            dataType: "html"
        });
    });
});

You end up with the desired url stored in the 'id' of the 'div'. This seems to be a reasonable solution as long as you are doing read only actions.

Answer 4

your javascript code should be reside in separate javascript file. you can use global variables to link your view and javascript. E.g. view page looks like below.

view html ...
<script type="text/javascript">
var pageUrl = @GetURL()
</script>

<script type="text/javascript" src="/js/script.js"/>

script.js file use the pageUrl variable and other global variables.