ASP.NET MVC Best Practices

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

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

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 ...

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&amp;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.

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

<script
type="text/javascript">

$(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

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

1. <!--HTML helper method for TextBox with ID only -->  
2. <%= Html.TextBox("txtFirstName") %>  
3. <input id="txtFirstName" name="txtFirstName" type="text" value="" />  
4.   
5. <!--HTML helper method for TextBox with ID and Value -->  
6. <%= Html.TextBox("txtFirstName","Alice") %>  
7. <input id="txtFirstName" name="txtFirstName" type="text" value="Alice" />  
8.   
9. <!--HTML helper method for TextBox with ID and Value and custom attributes. use '@' if the attribute name is keyword in C# or VB -->  
10. <%= Html.TextBox("txtFirstName", "Alice", new { @class="error", client_selector="alphanumeric" })%>  
11. <input class="error" client_selector="alphanumeric" id="txtFirstName" name="txtFirstName" type="text" value="Alice" /> 
    

How to use drop down list

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

1. <!--HTML helper method for DropDownList field with ID and OptionLabel -->  
2.  <%= Html.DropDownList("ddlStates") %>  
3.  <%= 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

1.       <!--HTML helper method for DropDownList field with ID and SelectListItem ( Made "Maryland" to be the default selected value) -->  
2.            <%= Html.DropDownList("ddlStates",new List <SelectListItem>(){  
3. new SelectListItem(){ Text="Maryland", Value="MD", Selected=true },    
4. new SelectListItem(){Text="Kansas", Value="KS"},   
5. new SelectListItem(){Text="Texas", Value="TX"}}) %> 
6.  <select id="ddlStates" name="ddlStates"><option selected="selected" value="MD">Maryland</option>   
7. <option value="KS">Kansas</option>   
8. <option value="TX">Texas</option>   
9. </select>  
10.    <!--HTML helper method for DropDownList field with ID , SelectListItem and OptionLabel(Please select state). OptionLabel will be selected by default if not selected is given in the SelectListItem-->  
11. <%= Html.DropDownList("ddlStates", new List <SelectListItem>(){  
12. new SelectListItem(){ Text="Maryland", Value="MD"},    
13. new SelectListItem(){Text="Kansas", Value="KS"},   
14. new SelectListItem(){Text="Texas", Value="TX"}},"Please select state") %>  
15.   <select id="ddlStates" name="ddlStates"><option value="">Please select state</option>   
16. <option value="MD">Maryland</option>   
17. <option value="KS">Kansas</option>   
18. <option value="TX">Texas</option>   
19. </select>   
20.  <!--HTML helper method for DropDownList field with ID , SelectListItem , OptionLabel(Please select state) and custom attributes. use '@' if the attribute name is keyword in C# or VB. The default selection will be "Maryland".-->  
21. <%= Html.DropDownList("ddlStates", new List<SelectListItem>(){  
22. new SelectListItem(){ Text="Maryland", Value="MD", Selected=true },    
23. new SelectListItem(){Text="Kansas", Value="KS"},   
24. new SelectListItem(){Text="Texas", Value="TX"}}, "Please select state", new { @class="error", client_selector="alphanumeric"})%>  
25.   <select class="error" client_selector="alphanumeric" id="ddlStates" name="ddlStates"><option value="">Please select state</option>   
26. <option selected="selected" value="MD">Maryland</option>   
27. <option value="KS">Kansas</option>   
28. <option value="TX">Texas</option>   
29. </select> 
    

How to use checkbox

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.