Can i put ASP.NET in Js file?

Question

I am doing an ajax "Post" action and i need to work out the URL of my action.

To do this i am using

   var url = '<%= Url.Action("Action", "Controller") %>';

But this code lives in a rather large Js file that is loading into my MVC View. I dont want to move it all into my view as it is too big and will look a mess.

I tried setting my JS include to runat="server" but this errors.

<script runat="server" src="<%: ResolveUrl("~/Scripts/Custom/MyScript.js")%>" type="text/javascript" ></script>

Can this be done?

Thanks, Kohan

Answer 1

No you can't put ASP.NET in a javascript file. Javascript files are static resources which should be directly served by your web server. They should never contain any server side language. You could define url as a global variable in the view:

<script type="text/javascript">
    var url = '<%= Url.Action("Action", "Controller") %>';
</script>

then use this url variable in your javascript file.

Notice tough that depending on what you are doing with this variable there might be much better ways. For example let's suppose that in your view you have an anchor that you want to ajaxify:

<%: Html.ActionLink("some text", "actionName", new { id = "fooAnchor" }) %>

Then in your javascript you could:

$(function() {
    $('#fooAnchor').click(function() {
        $('#result').load(this.href);
        return false;
    });
});

So no need of declaring any variables at all. Another option is to define a javascript function which takes parameters so that you can pass it whatever you need.

Conclusion: think of your javascript files as reusable components that tomorrow you might plug into your cool site based on Java Servlets for example and host them on a CDN. You could even try to convert them to reusable jQuery plugins. Don't try to mix it with server side languages as it leads to a strong coupling, ugly code - tag soup.

Answer 2

Another method that I've been using recently is to create an object containing the actions :-

<script type="text/javascript">        
  Actions = {
              Create: "<%= Url.Action("Create") %>",
              Edit: "<%= Url.Action("Edit") %>",
              GetGridData: "<%= Url.Action("GetGridData") %>"
            };        

</script>

and then using that in the Javascript :-

$(celDiv).html("<a href=" + Actions.Edit + "/" + id + ">" + $(celDiv).text() + "</a>");

It's nice to use as the actions are all contained together in a single place.

Answer 3

Yes you can, but you probably don't want to.

Its entirely possible to have the asp.net pipeline handle requests for js files, its just a case of setting up the association in IIS. However it will play havok with intellisense, and will probably be needlessly confusing.

For ajax posts the best way that I have found is to write out the forms with the appropriate action attribute set. Then read this attribute using JS. that way if you change the action of your form the JS gets updated too. This also complies with the idea that js is there to add features to your pages, not to define them completely.