Code Sprouts

Wholesome Bits Of Tech

Including Ajax & JQuery into ASP.Net MVC

clock February 8, 2009 13:25 by author ColinW

While the latest RC of the the MVC Framework does include Microsoft's Ajax script libraries and JQuery 1.2.6, they're not accessible without manually inserting the script includes yourself.  In order to get up and running with the scripts, you'll need to include the following script references in your frontend code:

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

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

<script src="<%= Url.Content("~/Scripts/jquery-1.2.6.js") %>" type="text/javascript"></script>

I like to include these scripts in the header tag of my master page(s), that way I can set them once and then forget about them.  If the footprint from the size of the scripts is an issue, you can always just manually include the scripts only on the page(s) that need jquery and/or ajax functionality.

 - Colin



The Web Application Root Operator in MVC

clock February 8, 2009 12:24 by author ColinW

When writing URI paths in ASP.Net, one of the most useful features the run-time provides you with is the web application root operator. The operator is nothing more than the tilde (~) character, yet it gives you the ability to start any path from the root of your website without having to resort to using multiple directory-up (..\) directives to set the path you need. 

For example, take the scenario where your current page being processed is located at 'http://www.yoursite.com/Pages/Admin/Email.aspx', and you want to add an ImageButton that reference an image in the folder 'http://www.yoursite.com/Images/sendmail.jpg'.  Without the web application root operator, you would have to write something similar to the following:

<asp:ImageButton ID="sendMail" runat="server" ImageUrl="../../Images/sendMail.jpg" />

While this works, it's far from ideal as the link to the image will break if the page hosting the ImageButton changes location, or if someone copy/paste's your ImageButton code into a different page with a different relative path. 

However, using the web application root operator, you can simply write the control as follows:

<asp:ImageButton ID="sendMail" runat="server" ImageUrl="~/Images/sendMail.jpg" />

Now, it no longer matters where the page hosting this ImageButton control resides, the path will always be the root of the application + /Images/sendMail.jpg.  The page may change paths, or someone may copy the code, but the path will always stay the same.  This ends up being a much more robust solution, and looks much cleaner as well.  There is one drawback, however, and that is the operator is only available to server-side controls, and cannot be used in client-side html elements.

Since the MVC framework does away with the use of most server controls, it first appears that using relative paths is the only way to go.  Fortunately, there's a better option, the UrlHelper.Content() method!

In the current UrlHelper class, there's now a method called Content, which accepts a virtual path and turns it into an absolute path.  The virtual path that is passed in can be pre-pended with the ~, and it works exactly as it does in ASP.Net:

 <img src="../../Images/sendmail.jpg" />  

Can be replaced with:

<img src="<%= Url.Content("~/Images/sendmail.jpg") %>" />

The syntax is a bit longer, however you still get the same benefits of starting your path off with the application root, instead of trying to navigate around using relative paths.

- Colin