Dave Arlin - Bloggin' - ASP.Net MVC

Simple Tip for Accessing Relative Path Items in Javascript in your ASP.NET Website

Dave Arlin — Mon, 03 May 2010 14:54:25 GMT

One common problem I’ve faced when developing applications is when I need to access an Image file or some other artifact that is relative to my website.

I’ve often gotten “lucky” where my virtual directory path locally matches my QA, Staging, Production, etc. So I’m able to have javascript code like this:

$('.ok-button').attr('src', '/Content/Images/btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src', '/Content/Images/btn_okOver.jpg');
}

, function() { $(this).attr('src', '/Content/Images/btn_ok.jpg');
}

);

Here, I’m assuming that my images will always be stored somehow like this:

http://localhost/Content/Images

http://[test-dns]/Content/Images

http://[prod-dns]/Content/Images

etc…

That above javascript will fail if I am forced to be put into a Virtual Directory such as this:

http://[prod-dns]/[some-virtual-directory]/Content/Images

The most effective way I’ve found to get around this is by creating a hidden field on my main master page that contains the value derived by the web server of the root URL to my website. This root URL might contain no virtual directory or 10 virtual directories depending on the IIS Web Server set up.

I’m using ASP.NET MVC, but this example can easily be ported into a Page_Load event with standard ASP.NET web forms.

<% string virtualPath = HttpRuntime.AppDomainAppVirtualPath;
       virtualPath = virtualPath.EndsWith("/") ? virtualPath : virtualPath + "/";
    %>

<input id = "website-image-path" type = "hidden" value = '<%=virtualPath + "Content/Images/" %>' />

Just place that code somewhere in the body of your master page.

Then access it via JQuery, or standard javascript using something like this:

$('#website-image-path').val();

Then finally you’re javascript might look something like this to get at your actual Image source.

var websiteImagePath = $('#website-image-path').val();

$('.ok-button').attr('src',
websiteImagePath + 'btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src',
websiteImagePath + 'btn_okOver.jpg'); }

, function() { $(this).attr('src',
websiteImagePath + 'btn_ok.jpg'); }

);

A Simple Extension of ASP.NET MVC HTMLHelper

Dave Arlin — Sat, 01 May 2010 03:17:20 GMT

If you’re an ASP.NET MVC developer, you’ve almost undoubtedly used HTML helpers, or at least the built in ones.

Here’s are some common ones:

<%=Html.DropDownList("Countries","Choose Country")%>

This generates a DropDownList populated with the property “Countries” of type “SelectList” on the ViewData model passed into the view.

<%=Html.TextBox("EntitySearch")%>

This generates a TextBox bound to the property “EntitySearch” on the ViewData model passed into the view. Can also be used to populate a property with the same name upon a form post.

In my current project, I’ve found the need to have many different buttons. These buttons are custom in the sense that they aren’t the standard HTML buttons, they have CSS and/or images associated with them. Here’s how I might declare a couple of them right now:

<input type = "image" class = "addnew-button" />

<%=Html.SubmitImage("Submit","~/images/submit-button.png") %>

So in both cases, I have to type in a string that kind of defines my button. In the first example, I have to say my button is an “image” and the class to use to style the button is called “addnew-button”.

In the second case, I have to define the actual path to the button. It’d be nice to have a more common and type safe way to declare all of my buttons, so I’ve created a Button HtmlHelper method. My goal is to be able to have code in my view like this:

<%=Html.Button(ButtonHtmlHelper.ButtonType.AddNew) %>

<%=Html.Button(ButtonHtmlHelper.ButtonType.Submit) %>

To do this, I created an extension method on the HtmlHelper class called button. This extension method can handle all my button types and has some overloads to accept a client id and any additional custom styling.

namespace MyProject.HtmlHelpers

{

public static class ButtonHtmlHelper

{

public enum ButtonType {
AddNew, Remove, Ok, Cancel, Submit, Save, Search, Clear, Continue, Active, Inactive
}

public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType)

{

return Button(htmlHelper, buttonType, null, null);

}

public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType, string id)

{

return Button(htmlHelper, buttonType, id, null);

}

public static string Button(this HtmlHelper htmlHelper, ButtonType buttonType, string id, string inlineCSS)

{

StringBuilder addNewButtonHTML = new StringBuilder();

addNewButtonHTML.Append(@");

addNewButtonHTML.Append(GetButtonTypeCSSClassPrefix(buttonType));

addNewButtonHTML.Append(@"-button"" type = ""image"" ");

if (!string.IsNullOrEmpty(id))

addNewButtonHTML.AppendFormat(@"id = ""{0}"" ",
id);

if (!string.IsNullOrEmpty(inlineCSS))

addNewButtonHTML.AppendFormat(@"style = ""{0}"" ",
inlineCSS);

addNewButtonHTML.Append("/>");

return addNewButtonHTML.ToString();

}

private static string GetButtonTypeCSSClassPrefix(ButtonType buttonType)

{

switch (buttonType)

{

case ButtonType.AddNew:

return "addnew";

case ButtonType.Cancel:

return "cancel";

case ButtonType.Ok:

return "ok";

case ButtonType.Remove:

return "remove";

case ButtonType.Submit:

return "submit";

case ButtonType.Save:

return "save";

case ButtonType.Search:

return "search";

case ButtonType.Clear:

return "clear";

case ButtonType.Continue:

return "continue";

case ButtonType.Active:

return "active";

case ButtonType.Inactive:

return "inactive";

default:

throw new ArgumentException(string.Format("Unknown
ButtonType of {0} was passed in.", buttonType));

}

}

}

}

That’s all! Just make sure you either add a using statement on the view to the namespace where the HTMLHelper is, or put it in the web.config like I did in my project. (line 10)

<namespaces>

<add namespace="System.Web.Mvc"/>

<add namespace="System.Web.Mvc.Ajax"/>

<add namespace="System.Web.Mvc.Html"/>

<add namespace="System.Web.Routing"/>

<add namespace="System.Linq"/>

<add namespace="System.Collections.Generic"/>

<add namespace="Microsoft.Web.Mvc"/>

<add namespace="xVal.Html"/>

<add namespace="MyProject.HtmlHelpers"/>

namespaces>

JSON to .NET Object Using JQuery and IModelBinder in ASP.NET MVC

Dave Arlin — Fri, 30 Apr 2010 03:15:59 GMT

Ok, so I have a pretty basic web page that displays a paginated grid of a collection of my business objects. This grid gets displayed when I perform a simple string search on let’s say my entity name. Of course, everyone hates dealing with full postbacks, so I want to perform this search via javascript, or more specifically via an AJAX call.

Using the typical form post method common in many ASP.NET MVC applications doesn’t really work in my scenario because I’m not mapping all the necessary fields upon landing on my page.

I know I want to use JQuery’s AJAX capabilities to post my search string information, but I couldn’t figure out a way to do it without passing in an “ugly” set of query strings and having to accept 3 parameters in my Controller Action method.

Basically I didn’t want to have to have something like this:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(string searchValue, int pageNumber, int itemsPerPage)

{

var allSearchResults = _entityAdministrationService.SearchEntities(searchValue);

var searchResultsForPage = allSearchResults.Skip((pageNumber
- 1) * itemsPerPage).Take(itemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = itemsPerPage,

PageNumber = pageNumber,

TotalResults = allSearchResults.Count()

});

}

(oh by the way, going forward in this post, ignore my custom “NoCache” attribute in any of my code snippets. It’s not related to this post, but I use it all the time now because of the automatic post caching feature in IE).

Ok, so if you look at the method signature, it really doesn’t look THAT bad right? Well it’s not bad, but the problem is that I’m sure I’ll have other pages that need to perform AJAX calls that will pass in other sets of parameters. I want one to have a nice POCO that I can work with that gets “automatically” mapped for me.

I want something like this:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(EntitySearchOutput entitySearchOutput)

{

var allSearchResults = _entityAdministrationService.SearchEntities(entitySearchOutput.SearchValue);

var searchResultsForPage = allSearchResults.Skip((entitySearchOutput.PageNumber
- 1) * entitySearchOutput.ItemsPerPage).Take(entitySearchOutput.ItemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = entitySearchOutput.ItemsPerPage,

PageNumber = entitySearchOutput.PageNumber,

TotalResults = allSearchResults.Count()

});

}

Where the definition of EntitySearchOutput is:

public class EntitySearchOutput

{

public string SearchValue
{ get; set;
}

public int PageNumber
{ get; set;
}

public int ItemsPerPage
{ get; set;
}

}

So, making use of Google’s jquery.json library, and javascript objects, I’m able to write the following javascript code that calls my “SearchEntities” controller action.

var searchValue = GetSearchValue();

var currentPageNumber = GetCurrentPageNumber();

var itemsPerPage = 20;

var searchData = {

'SearchValue': searchValue,

'PageNumber': currentPageNumber,

'ItemsPerPage': itemsPerPage

};

var searchDataJSON = $.toJSON(searchData);

searchDataJSON = searchDataJSON.replace(/null/g, '');

$.post(

'../ApplicationManagement/SearchEntities',

{ EntitySearchOutput: searchDataJSON },

function(jsonResult) {

DisplaySearchResults(jsonResult);

}, "json");

So what this actually does is builds out my “searchData” javascript object and then runs through the “$.toJSON” function to convert the javascript object to a JSON object called “searchDataJSON”. This in turn gets passed to my “SearchEntities” method as a JSON string. As a side note, line 12 is necessary for IE so that the JSON string gets created in a way that can be de-serialized by .NETs JavascriptSerializer as you’ll see soon.

So how does the application know to convert what I passed in javascript to my EntitySearchOutput class? That’s where an IModelBinder implementation comes into play.

public class JsonModelBinder

:IModelBinder where T:class

{

#region IModelBinder Members

public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

{

string jsonString = controllerContext.RequestContext.HttpContext.Request.Params[0];

JavaScriptSerializer serializer = new JavaScriptSerializer();

var result = serializer.DeserializeObject(jsonString);

return serializer.ConvertToType
(result);

}

#endregion

}

As you can see, this JsonModelBinder class does not say anything about EntitySearchOutput. As a matter of fact, it is a generic class which means, yes, it can be used for any class provided it is Javascript serializable. So you can do this with deep complex arrays. The one method you must implement is called “BindModel” which gives you a reference to the HttpContext. The json String exists in the HttpContext.Request parameter. Simple use the JavaScriptSerializer framework class and deserialize to the generic type T and return the results.

The final piece of this to tie in the model binder comes in the Global.asax.cs

protected void Application_Start()

{

RegisterRoutes(RouteTable.Routes);

SetupIoCContainer(); 

SetupModelBinders(); 

}

private static void SetupModelBinders()

{

ModelBinders.Binders.Add(typeof(EntitySearchOutput), new JsonModelBinder<EntitySearchOutput>>());

}

The “SetupModelBinders” method makes a call that tells the MVC Framework to always using the JsonModelBinder class to create an EntitySearchOutput object when it is specified as a parameter of a controller action.

Now the controller action will work as expected:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(EntitySearchOutput entitySearchOutput)

{

var allSearchResults = _entityAdministrationService.SearchEntities(entitySearchOutput.SearchValue);

var searchResultsForPage = allSearchResults.Skip((entitySearchOutput.PageNumber
- 1) * entitySearchOutput.ItemsPerPage).Take(entitySearchOutput.ItemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = entitySearchOutput.ItemsPerPage,

PageNumber = entitySearchOutput.PageNumber,

TotalResults = allSearchResults.Count()

});

}

The final part of this method returns back JSON to our javascript AJAX call, it JSON serializes an “EntitySearchResultsInput” class defined here:

public class EntitySearchResultsInput

{

public IEnumerable<Entity>>
Entities { get; set;
}

public int ItemsPerPage
{ get; set;
}

public int PageNumber
{ get; set;
}

public int TotalResults
{ get; set;
}

}

So that the following “jsonResult” object is populated on line 17 below:

var searchValue = GetSearchValue();

var currentPageNumber = GetCurrentPageNumber();

var itemsPerPage = 20;

var searchData = {

'SearchValue': searchValue,

'PageNumber': currentPageNumber,

'ItemsPerPage': itemsPerPage

};

var searchDataJSON = $.toJSON(searchData);

searchDataJSON = searchDataJSON.replace(/null/g, '');

$.post(

'../ApplicationManagement/SearchEntities',

{ EntitySearchOutput: searchDataJSON },

function(jsonResult) {

DisplaySearchResults(jsonResult);

}, "json");

You can access properties on “jsonResult” simply by typing in: jsonResult.TotalResults or jsonResult.Entities[0].Name

So that’s an example of one implementation of IModelBinder. You might find other things you want to do with other types of ModelBinders. I actually created another one for a specific scenario I had with arrays of integers. Here is that ModelBinder. I’ll leave it to you to see how you might use it.

public class CommaSeperatedStringToIntegerEnumModelBinder : IModelBinder

{

#region IModelBinder Members

public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

{

string commaSeperatedString = controllerContext.RequestContext.HttpContext.Request.Params["Ids"];

string[] intStringArray = commaSeperatedString.Split(',');

IEnumerable<int><>
intArray = intStringArray.ToList().ConvertAllint>>(delegate(string str)
{ return int.Parse(str);
});

return intArray;

}

#endregion

}

Useful Usage of Microsoft Unity Application Block with ASP.Net MVC

Dave Arlin — Fri, 25 Dec 2009 20:11:14 GMT

Testing is Always Number One

If you read any book on why using an IoC (Inversion of Control) approach to your website using tools like Microsoft’s Unity Application Block and a Mocking Framework like Rhino Mocks, the number one reason is going to be writing solid unit tests, usually using a practice like TDD. While I have no reason to doubt that that should be the number one reason, I like to always try and find more “live and in the moment” scenarios for using these tools.

Here’s a very common testing scenario and implementation for testing that the Google Analytics javascript is only appearing in my site if I am in a Production environment. This makes also makes use of MvcContrib.

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.Mvc; using Microsoft.VisualStudio.TestTools.UnitTesting; using MyWebSite.Web; using MyWebSite.Web.Controllers; using MyWebSite.Services; using Rhino.Mocks; using MvcContrib.TestHelper;

public
class HomeControllerTest { IAppConfig _appConfig; IEmailService _emailService; HomeController _homeController;
[TestInitialize] public
void Init() { _appConfig = MockRepository<.GenerateStubIAppConfig>>();
_emailService = MockRepository<.GenerateStubIEmailService>>();
_homeController = new HomeController(_appConfig,
_emailService); TestControllerBuilder builder
= new TestControllerBuilder();
builder.InitializeController(_homeController); } [TestMethod] public
void Analytics_NotProduction() { // Arrange _appConfig.Stub(a
=> a.Environment).Return("Staging"); //
Act EmptyResult result = _homeController.Analytics() as EmptyResult; //
Assert Assert.IsNotNull(result); } [TestMethod] public
void Analytics_Production() { // Arrange _appConfig.Stub(a
=> a.Environment).Return("Production"); //
Act ViewResult result = _homeController.Analytics() as ViewResult; //
Assert Assert.IsNotNull(result); } }

So here, my HomeController class’ constructor needs an instance of both IEmailService and IAppConfig. Rhino Mocks creates a mock of both of those interfaces and additionally sets the “Environment” property of the mocked IAppConfig instance to either “Staging” or “Production” depending on my test.

In the “Analytics_NotProduction” test, my test passes if an “EmptyResult” instance is returned by my HomeController’s Analytics method meaning that no View is generated with any markup or javascript of any kind. The “Analytics_Production” test passes if the Analytics method returns an actual ViewResult which presumably generates the javascript I need for Google Analytics.

Again, this is just your typical unit test scenario. This is great, you should do this. I should do this more than I do right now with my projects. That’s another story. Here’s another quick and easy (and also immediately useful) scenario I’ve come up with for using IoC.

Shared Hosting Limitations with a Staging and Production Environment

So recently, I’ve begun working on my wife’s business website, Jamie Lynn Designs. This website is currently hosted using Softsys Hosting’s Shared Hosting. /* End shameful social marketting plug */

On this website, random quotes are displayed from my wife’s happy customers. Every time you load up a page, another random quote displays. These quotes are stored in a SQL Database.

Snippet from HomeController.cs

 private IAppConfig _appConfig; private IClientQuoteService _clientQuoteService; private IContactSubmissionService _contactSubmissionService; public HomeController(IAppConfig appConfig, IContactSubmissionService contactSubmissionService, 


IClientQuoteService clientQuoteService) { _appConfig
= appConfig; _contactSubmissionService = contactSubmissionService; _clientQuoteService
= clientQuoteService; }

public ActionResult RandomQuote()
{ ClientQuote clientQuote = _clientQuoteService.GetRandomClientQuote(); return View(clientQuote);
}

As you see, in the “RandomQuote” method, there is a call to the IClientQuoteService’s “GetRandomClientQuote” method. Using Unity, a concrete implementation of this interface called “ClientQuoteService” is used.

Snippet from ClientQuoteService.cs

public class ClientQuoteService:IClientQuoteService { IRepository _repository; public ClientQuoteService(IRepository repository)
{ _repository = repository; } #region IClientQuoteService
Members public ClientQuote GetRandomClientQuote()
{ int <clientQuoteCount
= _repository.GetAllClientQuote>>().Count(); int clientQuoteIndex
= new Random().Next(clientQuoteCount); return <_repository.GetAllClientQuote>>().Skip(clientQuoteIndex).First();
} #endregion }

This website currently lives in 3 different environments. My local (development) environment, a Staging Environment also hosted by Softsys Hosting, and the Production Environment. Since I’m limited to a certain number of databases with my shared hosting plan, I didn’t want to go and create a Staging database for the website. I was trying to think of some ways to “physically” handle this problem.

First, I thought about using the Production database for Staging and just creating “Staging” tables that mimicked production. So if I had a “ClientQuote” table in Production, I could have a “Staging_ClientQuote” table for Staging. Doing that would be wrong on so many levels. The most annoying being database migrations and creating different entity classes for all my database tied entities.

So instead, I stepped back and looked at what was really going on in my application to generate these quotes. The only thing my HomeController needed in it’s RandomQuote method was an instance of “ClientQuote”. What I really needed to do was provide an alternative way to get this quote in an environment that doesn’t use a database. I needed ANOTHER concrete class to be used in my staging environment. Enter StagingClientQuoteService.

Snippet from StagingClientQuoteService.cs

public class StagingClientQuoteService : IClientQuoteService { #region IClientQuoteService
Members public ClientQuote GetRandomClientQuote()
{ return new ClientQuote {
City = "Chicago", Id = 1, Quote = "Jamie
Lynn Designs is really amazing! What else can I say?", State = "IL",
SubmittedBy = "Dave" }; } #endregion }

So here, I now have a class that just creates the same ClientQuote over and over each time it is called and returns it. I could’ve gotten more complex and created some more “database free” random quotes and returned those instead.

Using the extension Unity.Configuration block, I’m able to easily swap between my “real” ClientQuoteService and StagingClientQuoteService. Below I’m omitting some of the other Unity Mappings to just show what I did for the IClientQuoteService interface.

Snippet from PRODUCTION web.config

<unity<> containers<> container<> types> < type type="JamieLynnDesigns.Core.Services.IClientQuoteService,JamieLynnDesigns.Core" mapTo="JamieLynnDesigns.Core.Services.ClientQuoteService,JamieLynnDesigns.Core"> type> types> container> containers> unity>

Snippet from STAGING web.config

<unity<> containers<> container<> types> <type type="JamieLynnDesigns.Core.Services.IClientQuoteService,JamieLynnDesigns.Core" mapTo="JamieLynnDesigns.Core.Services.Fake.StagingClientQuoteService,JamieLynnDesigns.Core"> type> types> container> containers> unity>

And that’s it! There are many other scenarios where this kind of thing comes in useful. The only thing I am watching out for is creating too many of my own “fake” classes, so my projects don’t come to large with “non production” code. But as long as there’s a good logical separation, such as a folder named “Staging Mocks” or something of the sort in your project, you should be okay.