MVC

MVC is used for developing web applications just like ASP.NET WebForms.The main difference between ASP.NET MVC and ASP.NET WebForms is MVC is used for developing loosely coupled applications.

MVC applications have many advantages over WebForms applications such as

• Loose coupling of the application components
• Separation of concerns
• MVC application are easier to unit test
• MVC applications are easier to maintain and extend

Though MVC offers advantages such as the ones mentioned above,but it suffers from one draw back.Since MVC doesn’t have the concept of built in controls ,so developers are responsible for implementing all the HTML.This can be a tedious process ,especially when you are repeating the same HTML in different views.

For many built in HTML controls MVC includes built in helper methods.You can learn about these from HTML Helper methods

If we have a requirement for some custom HTML which is not provided by these inbuilt helper methods then we can create our own custom html helper methods.

To create HTML helper method we need to follow the below steps.

1.Declare a static class

2. Declare a static method in the static class.This is our extension method and the first parameter usually is HtmlHelper.

In the following example we have declared a helper method.This html helper will add a custom css class and set the title attribute which is passed in as a parameter.

namespace TestApp.CustomHelpers
{
public static class CustomHelpers
{

public static IHtmlString MyImageHelper(this HtmlHelper helper, string title)
{
TagBuilder tb = new TagBuilder("input");
tb.Attributes.Add("class","AppClass" );
tb.Attributes.Add("title",title );

return new MvcHtmlString(tb.ToString(TagRenderMode.SelfClosing));
}
}
}

This is a very simple example to help understand how to create custom html helpers in MVC and custom html helper methods can be used for more complex scenarios.

Follow on:

ASP.NET MVC 5.1 which is an update to the version 5.0 of MVC includes some new useful
features.One such feature is Enum support in Views.

In the previous versions of MVC we have to use some some workarounds when displaying Enum values in the Views.For displaying enum values in the dropdown in previous versions please refer the following Populate dropdown with Enum in MVC

In MVC 5.1 we can directly display the enum values in the views using the EnumDropDownListFor helper method.
We use this method as

@Html.EnumDropDownListFor(model=> model.EnumProperty)

model.EnumProperty above refers  to a property of Enum type.

EnumDropDownListFor is a strongly typed helper method so we need to pass a lambda expression to this method.In the lambda expression we need to specify the enum which we want to display in the dropdown.

In the following example we are defining Employee class.Employee contains a property of ProgrammingLanguages which is an enum type.

public class Employee
{
public string Name { get; set; }
public int EmployeeId { get; set; }
public string Department { get; set; }
public ProgrammingLanguages Language { get; set; }
}

ProgrammingLanguages enum is defined as:

public enum ProgrammingLanguages
{
[Display(Name = "C#")]
CSharp,
[Display(Name = "VB.NET")]
VB,
[Display(Name = "Java")]
Java,
[Display(Name = "SQL")]
SQL
}

In the ProgrammingLanguages enum we have specified the Display attribute for the enum values.The dropdown rendered will automatically display the value we specified in the Name property of Display attribute.This saves us workaround for displaying different value as the text as in the previous versions.

Now we can create and initialize Employee object in the action method as:

public ActionResult Index()
{
Employee emp = new Employee();
emp.Name = "Mike";
emp.EmployeeId = 01;
emp.Department = "Application Development";
emp.Language = Programminglanguages.Java;
return View(emp);
}

The important thing to note is how we have specified the Language property above.Now when the dropdown is rendered the property assigned to the Language property, which is Programminglanguages.Java , will be automatically selected in the dropdown.

We specify the markup for the Employee in the view as

@model Models.Employee

<table>
<tr>
<td>
@Html.LabelFor(x => x.Name)
</td>
<td>
@Html.DisplayFor(x => x.Name)
</td>
</tr>
<tr>
<td>
@Html.LabelFor(x => x.EmployeeId)

</td>
<td>
@Html.DisplayFor(x => x.EmployeeId)
</td>
</tr>

<tr>
<td>
@Html.LabelFor(x => x.Department)

</td>
<td>
@Html.DisplayFor(x => x.Department)
</td>
</tr>

<tr>
<td>
@Html.LabelFor(x => x.Language)

</td>
<td>
@Html.EnumDropDownListFor(x => x.Language)
</td>
</tr>
</table>

When the dropdown is rendered by default “Java” will be selected since we have specified the following for the Language property:

emp.Language = Programminglanguages.Java;

 

So as we have seen now we can easily populate the dropdown using EnumDropDownListFor helper method in MVC 5.1 method unlike the previous versions where we had to use some workarounds.Also we can easily set the selected value in the dropdown as above.

Follow on:

A commonly required functionality is populating dropdown with values fetched from the database.Many times data is contained in a database table from where it needs to be fetched and displayed in a dropdown in the UI.Here we will see how to populate dropdown from database in MVC application.

Unlike other html controls a dropdown has both name and id values to uniquely identifying an item in the collection.Please refer the following for more about DropdownList in MVC 

Following are the steps to populate the dropdown with values from the database.

1. Declare a class which represents the items in the dropdown.In the following example we are declaring a Category class.

public class Category
{
public string Name { get; set; }
public int Id { get; set; }
}

2. Define  a data access method to fetch the values from the database table .We will populate the dropdown with these values.

In the Data access method

• Create connection and command objects
• Iterate through the rows returned from the database table.
• Add the items corresponding to the rows to a generic list collection.Here we are adding the fetched values to the Category list collection.

private List<Category> GetCategories()
{
string connection = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString;
var categories = new List<Category>();
var con=new SqlConnection(connection);
con.Open();
var command = new SqlCommand("SELECT * FROM Category", con);

SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
categories.Add(new Category { Name =Convert.ToString(reader["Name"]), Id = Convert.ToInt32(reader["Id"]) });

}
con.Close();
}

3.In the Action method

• Call the data access method declared above   This data access method  fetches the records from the database and returns a collection.This collection contains the records from the database table which we want to bind to the DropDownList.
• Filter the returned values if required     If we want to display only a subset of the returned values we can filter the collection.One common way is to use LINQ query operators for filtering the data.
• Create SelectListItem collection   As we can directly bind a List of SelectListItems to the DropDownList so we need to create a SelectListItem list.This list represents the items returned by the data access method.Here we are creating a List from the Category collection.
• Assign the SelectListItem collection to a ViewBag property  We can use this ViewBag property in the view to bind the collection.

public ActionResult Details()
{

ViewBag.Categories=GetCategories().Where(x=>x.Id<10).Select(x=>new SelectListItem{Text=x.Name,Value=x.Id.ToString()});

return View();

}

4. Render the dropdown in the view by calling the DropDownList helper method and passing the ViewBag property which we had assigned in the Details action method:

@Html.DropDownList("Categories")

So by following the above four steps we can easily populate dropdown from database in MVC view.

Follow on:

In the previous article we looked at how to populate dropdownlist in MVC

Enum type in C# is used to declare set of named constants.Named constants are required in any application.For example we can have different priorities such as trivial,critical and non critical.Another example of named constants are the different colors.

To represent these constant values Enum type is used.We declare enum as:

public enum Colors
{
RED,
BLUE,
GREEN,
}

Since dropdownlist in mvc also represents a list of values so Enum type is well suited for populating dropdown.

For populating dropdown using enum an important enum method is used , GetValues.

The GetValues method returns an array containing the values in the specified enum type.

for example we can call the GetValues method and pass the above enum type as an argument

Colors[] values = (Colors[])Enum.GetValues(typeof(Colors));

The values contained by the above values array will be the different enum values.
values[0] RED
values[1] BLUE
values[2] GREEN

The type of the values contained by the above values array will be Enum

In the array returned by the above method we can get the name of the enum values using the toString() method.So if we call toString() on the different values in the array then we will get
values[0] “RED”
values[1] “BLUE”
values[2] “GREEN”

So to populate the dropdown using the enum we need to do the following steps
1.Declare an enum type which represents the values we want to populate in the dropdown

public enum Colors
{
RED,
BLUE,
GREEN,
}

2.Call Enum.GetValues(typeof(EnumType)), EnumType is the type of Enum we declared in the above step

Colors[] values = (Colors[])Enum.GetValues(typeof(Colors));

3. Iterate through the above array and populate SelectList

To Populate dropdown with enum in mvc we can use a simple Linq query.We create SelectListItems with the array returned by the GetValues method.

var colors = from item in values
select new SelectListItem()
{
Text = item.ToString(),
Value = ((int)item).ToString(),
};

4. Set the ViewData or ViewBag value equal to above array

ViewBag.colors = colors;

5. Call @Html.DropDownList(“key”) and pass the key set in in ViewBag ,in the action method.

@Html.DropDownList("colors")

If we follow the above steps the dropdown rendered will be populated with the Enum values.

Follow on: