ASP.NET MVC Resource

ASP.NET MVC HandleError Attribute, Custom Error Pages and Logging Exceptions

2010-09-16T04:13:00.000-07:00

I'm sure I don't need to tell you how bad serving a Yellow Screen of Death to your users is. Nonetheless, it seems to be pretty common practice across the web. One of the first things I do when setting up a new ASP.NET project is set up custom error pages and ensure all exceptions are logged (who wants to find out about their errors from their clients?). Since things work slightly differently in ASP.NET MVC I thought I'd dig in and find the best way to do the same thing.

The HandleError Attribute
The HandleError attribute (which appears on the default controllers in an MVC project) tells the framework that if an unhandled exception occurs in your controller that rather than showing the default Yellow Screen of Death it should instead serve up a view called Error. The controller-specific View folder will be checked first (eg. Views/Home/Error.aspx) and if it's not found, the Shared folder (Views/Home/Error.aspx) will be used.

But How Do I Log Exceptions?
You might've spotted the problem with HandleError. It just outputs a view, and doesn't let you run any code. This might be fine if you don't want users to see errors but don't really care for fixing them. Hopefully you think this isn't acceptable and you want to investigate all exceptions!

The OnException Method
The System.Web.Mvc.Controller class contains a method called OnException which is called whenever an exception occuts within an action. This does not rely on the HandleError attribute being set. If you're being a good coder and have your own base Controller class you can override this method in one place to handle/log all errors for your site. You might choose to send emails and/or detect duplicate exceptions and discard them. For now, I'm just going to write them all to a text file in my App_Data folder.

protected override void OnException(ExceptionContext filterContext)
{
WriteLog(Settings.LogErrorFile, filterContext.Exception.ToString());
}

///

/// Logs a message to the given log file
///

///
The filename to log to///
The message to logstatic void WriteLog(string logFile, string text)
{
//TODO: Format nicer
StringBuilder message = new StringBuilder();
message.AppendLine(DateTime.Now.ToString());
message.AppendLine(text);
message.AppendLine("===========================");
System.IO.File.AppendAllText(logFile, message.ToString());
}

This works great, but it still shows our user an unhandled exception message, even if we use the HandleError attribute. This makes the HandleError attribute look rather useless, so I've removed it. We can easily show the friendly error ourselves with the following code:

filterContext.ExceptionHandled = true;
this.View("Error").ExecuteResult(this.ControllerContext);

It's important to set ExceptionHandled to true, otherwise you'll still see the default unhandled exception message. The OnException method returns void so we must Execute the view and pass in the ControllerContext ourselves.

How Do I see my own Errors During Development?
It's a little inconvenient to open log files or keep commenting out your error handling code while developing to see exceptions and stack traces. You might remember ASP.NET has a nice web.config setting that configures custom errors. This property is exposed via MVC, so we can set up our config to show friendly errors to remote users only:

<customErrors mode="RemoteOnly" />

Then all we need to do in our OnException method is check this value and serve up the custom error view only if it returns true.

protected override void OnException(ExceptionContext filterContext)
{
WriteLog(Settings.LogErrorFile, filterContext.Exception.ToString());

// Output a nice error page
if (filterContext.HttpContext.IsCustomErrorEnabled)
{
filterContext.ExceptionHandled = true;
this.View("Error").ExecuteResult(this.ControllerContext);
}
}

It's worth noting that IsCustomErrorEnabled will resolve the RemoteOnly option for you, you don't need to check where the user is coming from. Now out site serves up friendly errors to users and logs all exceptions without us losing the ability to see stack traces during development.

ASP.NET MVC Best Practices

2009-10-26T09:55:00.001-07:00

ASP.NET MVC Best Practices

http://weblogs.asp.net/rashid/archive/2009/04/01/asp-net-mvc-best-practices-part-1.aspx

http://weblogs.asp.net/rashid/archive/2009/04/03/asp-net-mvc-best-practices-part-2.aspx

ASP.NET MVC Example Application over Northwind with the Entity Framework

2009-10-22T11:00:00.000-07:00

ASP.NET MVC Example Application over Northwind with the Entity Framework

http://blogs.msdn.com/brada/archive/2008/01/29/asp-net-mvc-example-application-over-northwind-with-the-entity-framework.aspx

Model View Controller (MVC) Architecture in ASP.NET

2009-10-07T08:52:00.000-07:00

This article will enhance your vision on the usage of Robustness Analysis in conjunction with Model View Controller, using UML with application in ASP.NET.

http://www.codeproject.com/aspnet/ModelViewController.asp

MVC AJAX Form with Ajax.BeginForm() and jQuery Thickbox ...

2009-09-24T06:53:00.000-07:00

A relatively common scenario you might want in your application is the ability for a user to click a link that pops up a little dialog to submit some information. For example, let’s say you have this form where the user could click the “Contact this person” link:

After clicking this link, it pops up the following dialog where the user can type in their message:

This scenario can be implemented with MVC with very few lines of code. First off, we’ll be using the AJAX HTML Message pattern so that the AJAX messages that are going across the wire are simple HTML snippets. Also, we’ll use jQuery Thickbox for our dialog. The first thing we need to do it to implement our “Contact this person” link:
   1: <%=Html.ActionLink("Contact this person", "Index", "Contact", new { height = 200, width = 300 }, new { @class = "thickbox" }) %>
This is a pretty typical implementation of the jQuery thickbox. We’re specifying that we want an AJAX call to be made to our ContactController.Index() method. The HTML that this ActionLink renders will simply look like this:
   1: <a class="thickbox" href="/Contact?height=200&width=300">Contact this person</a>
The complete code for the ContractController looks like this:
   1: public class ContactController : Controller
   2: {
   3:      public ActionResult Index()
   4:      {
   5:          return View(new ContactMessage());
   6:      }
   7:
   8:      [ActionName("Index")]
   9:      [AcceptVerbs(HttpVerbs.Post)]
10:      public ActionResult SubmitMessage(ContactMessage message)
11:      {
12:          return this.View("Confirmation", message);
13:      }
14: }
It is important to note that both views returned by the ContactController’s action methods are both partial views (i.e., Index.ascx and Confirmation.ascx) with our HTML snippets in there. We know that in the Index.ascx we want to do an AJAX form submission/post rather than a full page form submission. There are a couple of ways to do this including using the jQuery Form plugin. However, in this case, the MVC framework already comes built-in with this functionality so we don’t have to rely on the jQuery Form plugin (unless we want to). Most of the time we find ourselves using the Html property of the View which is of type HtmlHelper. However, there is also an Ajax property of the view of type AjaxHelper. The AjaxHelper has a BeginForm method that will allow you to submit the form via AJAX. You’ll need to make sure you include the MicrosoftAjax.js and MicrosoftMvcAjax.js scripts in your page to use the Ajax helpers. The complete implementation for the Index.ascx can just look like this:
   1: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MvcAjaxForm.Models.ContactMessage>" %>
   2:
   3: <h2>Contact</h2>
   4:
   5: <% using (Ajax.BeginForm("Index", "Contact", new AjaxOptions { UpdateTargetId = "contactArea" } )) { %>
   6:      <div id="contactArea">
   7:          Email Address: <%=Html.TextBox("EmailAddress") %> <br /><br />
   8:          Message: <%=Html.TextArea("MessageText")%>
   9:          <input type="submit" />
10:      </div>
11: <% } %>
Notice the UpdateTargetId is specifying the “contactArea” div. This causes all HTML that is sent back on the form post (i.e., the confirmation message) to be displayed inside this div only.

Original Source:
http://geekswithblogs.net/michelotti/archive/2009/08/31/mvc-ajax-form-with-ajax.beginform-and-jquery-thickbox.aspx

ASP.NET MVC jQuery Autocomplete plug-in using JSON.

2009-09-22T12:18:00.001-07:00

ASP.NET MVC jQuery Autocomplete plug-in using JSON.

This post demonstrate how to use JQuery Autocomplete feature in ASP.NET MVC. In this demo we call the controller Action method to get the data in JSON format and bind it to the text box to accomplish the Autocomplete feature.

Before starting download the js and css file from jQuery Autocomplete plugin and add in the project and follow the steps mention below

Step 1. Add the following code for action method in controller

public
ActionResult StateLookup(string q, int limit)

{

var jsonData = new[]{

new {Code = "AL", Name = "Alabama"},

new {Code = "CA", Name= "Califonia"},

new {Code = "IN", Name = "Indiana"},

new {Code = "MD", Name = "Maryland"},

new {Code = "NJ", Name = "New Jersey"}

};

return Json(jsonData);

}

I have used hardcode JSON list for the state. You can construct the JSON data from database using LINQ.

Step 2. Add the following java script in the view

$(document).ready( function() {

$('#state').autocomplete('<%=Url.Action("StateLookup", "Home") %>', {

dataType: 'json',

parse: function(data) {

var rows = new Array();

for(var i=0; i<data.length; i++){

rows[i] = { data:data[i], value:data[i].Code, result:data[i].Code };

}

return rows;

formatItem: function(row, i, n) {

return row.Code + ' - ' + row.Name;

width: 300,

mustMatch: true,

});

</script>

Here, I specify that the rows in the drop down will have the state "Code - Name" format, and that the value that will be put in the textbox is the Code property of the selected item. This is done with the value property of the rows array.

Step 2. Add the HTML Text box

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

Complie the application and run it. To get this running, don't forget to include the required javascript files and the css to style the autocomplete drop down.

How to use textbox

2009-09-09T13:17:00.000-07:00

HTML Helper for TextBox will be rendered as input elements in HTML. Check the below code.

<%= Html.TextBox("txtFirstName") %>
<input id="txtFirstName" name="txtFirstName" type="text" value="" />
<%= Html.TextBox("txtFirstName","Alice") %>
<input id="txtFirstName" name="txtFirstName" type="text" value="Alice" />
<%= Html.TextBox("txtFirstName", "Alice", new { @class="error", client_selector="alphanumeric" })%>
<input class="error" client_selector="alphanumeric" id="txtFirstName" name="txtFirstName" type="text" value="Alice" />

How to use drop down list

2009-09-09T12:24:00.000-07:00

HTML Helper for DropDownList field will be rendered as select elements in HTML. Check the below code.

<%= Html.DropDownList("ddlStates") %>
<%= Html.DropDownList("ddlStates","Please select state") %>

Note : You cannot use these two helper method in HTML unless the datasource/data for binding is assigned/sent from the controller action method.
Exception : There is no ViewData item with the key 'ddlStates' of type 'IEnumerable<SelectListItem>'.
Code

<%= Html.DropDownList("ddlStates",new List <SelectListItem>(){
new SelectListItem(){ Text="Maryland", Value="MD", Selected=true },
new SelectListItem(){Text="Kansas", Value="KS"},
new SelectListItem(){Text="Texas", Value="TX"}}) %>
<select id="ddlStates" name="ddlStates"><option selected="selected" value="MD">Maryland</option>
<option value="KS">Kansas</option>
<option value="TX">Texas</option>
</select>
<%= Html.DropDownList("ddlStates", new List <SelectListItem>(){
new SelectListItem(){ Text="Maryland", Value="MD"},
new SelectListItem(){Text="Kansas", Value="KS"},
new SelectListItem(){Text="Texas", Value="TX"}},"Please select state") %>
<select id="ddlStates" name="ddlStates"><option value="">Please select state</option>
<option value="MD">Maryland</option>
<option value="KS">Kansas</option>
<option value="TX">Texas</option>
</select>
<%= Html.DropDownList("ddlStates", new List<SelectListItem>(){
new SelectListItem(){ Text="Maryland", Value="MD", Selected=true },
new SelectListItem(){Text="Kansas", Value="KS"},
new SelectListItem(){Text="Texas", Value="TX"}}, "Please select state", new { @class="error", client_selector="alphanumeric"})%>
<select class="error" client_selector="alphanumeric" id="ddlStates" name="ddlStates"><option value="">Please select state</option>
<option selected="selected" value="MD">Maryland</option>
<option value="KS">Kansas</option>
<option value="TX">Texas</option>
</select>

How to use checkbox

2009-09-08T13:17:00.000-07:00

Always use Html.CheckBox() overload methods for creating checkbox controls.

Notice that the check box helper (Html.CheckBox()) renders two input controls. First, it renders a check box control as you’d expect, and then it renders a hidden input control of the same name. This is to work around the fact that when check boxes are deselected, browsers don’t submit any value for them. Having the hidden input control means the MVC Framework will receive the hidden field’s value (i.e., false) when the check box is unchecked.
Checkbox doesn't have a label. So add the html label tag with for attribute with value as “name of checkbox”

Code:

<%= Html.CheckBox("chkAccept1")%>
<label for="chkAccept1">Accept Terms & Conditions</label>
<input checked="checked" id="chkAccept2" name="chkAccept2" type="checkbox" value="true" />
<%= Html.CheckBox("chkAccept2", true )%>
<label for="chkAccept2">Accept Terms & Conditions</label>
<input name="chkAccept2" type="hidden" value="false" />
<label for="chkAccept2">Accept Terms & Conditions</label>
<%= Html.CheckBox("chkAccept3", false, new { @class="error", @client_selector="alphanumeric" }) %>
<label for="chkAccept3">Accept Terms & Conditions</label>
<input class="error" client_selector="alphanumeric" id="chkAccept3" name="chkAccept3" type="checkbox" value="true" />
<input name="chkAccept3" type="hidden" value="false" /><label for="chkAccept3">Accept Terms & Conditions</label>

Source : Apress.Pro.ASP.NET.MVC.Framework.