Tuesday, 21 January 2014

Models in MVC 4

In this article i am going to explain models in mvc.we want to retrieve an employee information from Employee table and display it as shown below.




 To encapsulate employee information I need to have an employee model class. let’s add employee model class to mvc project. Go to Models folder right click on it and change class name  as Employee and click on add. Write below code in Employee Model Class

public class Employee
    {
        public int EmpId { get; set; }
        public string Name { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
    }


Let’s add another controller name it as Employee, actually we retrieve the employee information from the Database, but for now I am going to hard coded the employee information with in the controller.
I need to find the Employee class with in the controller but I didn’t find, so add MvcDemoApps.Models
 Here Mvcdemoapps is application name.



We need to add a view which can present the employee information to the end user. Right click on Controller action method and select add view. check the create a strongly-typed view, select Model class Employee with in dropdownlist but there is no Employee class for that build the application now it appears in Dropdownlist select Employee Model class and click on Add.

Lets change code in the Details View
@model MvcDemoApps.Models.Employee

@{
    ViewBag.Title = "Employee Details";
}

<h2>Employee Details</h2>
<table>
<tr>
<td><b>Employee Id</b></td>
<td>@Model.EmpId</td>
</tr>
<tr>
<td><b>Employee Name</b></td>
<td>@Model.Name</td>
</tr>
<tr>
<td><b>Gender</b></td>
<td>@Model.City</td>
</tr>
<tr>
<td><b>City</b></td>
<td>@Model.City</td>
</tr>
</table>

Now run the application (give controller name and action method name in the controller).
You will get following error


Because we didn’t pass employee object to  view. Let’s pass employee object to view
  public ActionResult Details()
        {
            Employee objemployee = new Employee()
            {
                EmpId=200,
                Name="SriRama",
                Gender="Male",
                City="Hyderabad"
            };
            return View(objemployee);
        }
Now run the application and we get the following output.
 tags:Models in Mvc,:Models in Mvc 4,:Models in Mvc 3,:Models in asp.netMvc,:Models,:Models in Mvc



ViewData and ViewBag in MVC 4


 Both ViewData and ViewBag are used to pass the data from controller to view. ViewData is a dictionary of objects that are stored and retrieved using strings as keys.
ViewData[“counties”]=”list of countries”;  ViewBag.countries=”list of countries”;
ViewBag uses the  dynamic feature that was introduced into C# 4.It allows an object to have properties dynamically added to it.

Both ViewData and ViewBag does not provide compile time error checking. For example  ,if you mis-spell keys or property names, you wouldn’t get compile time error. You get to know about the error at runtime only. Internally ViewBag properties are stored as name/value pairs in the ViewData dictionary
To pass the data from controller to a view, It’s always good practice to use strongly typed view models over ViewBag and ViewData. Strongly typed View Models provide compile time error checking.

tags:viewdata in mvc 4,viewbag in mvc4 ,viewdata and viewbag ,viewbag ,viewdata in mvc,viewbag in mvc

Views in MVC 4 Application

In This article I am going to explain views in mvc application.I want to display list of countries as shown in figure.


  Now go to visual studio create one empty mvc cotroller or we can use home controller and look at the index action method return type is ActionResult but we want to display the list of countries means we have to return the list of strings.
public List<string> Index()
        {
            return new List<string>()
            {
                "India",
                "France",
                "USA",
                "Canada",
                "England"
            };
        }

Run the application, give the controller name in url and we expect the output as list of countries but we will get name of the type (System.Collections.Generic.List`1[System.String])



To fix this we can actually add a view .The purpose of view is to format the data in page we want and present it to the end user. First we need to add a view to the project, right click any where on the index function and select add view.





The name of view and the name of the controller action method matching here, select razor as view engine and leave the rest of defaults we discuss strongly typed view in coming articles. Before going to click on add just watch the views folder ,it has no files now add a view watch the views folder it has index.cshtml file.
To return a view first we have to change return type of index action method. I will change return type as ActionResult, view inherits from ActionResult. We have to pass the list of counties from controller to view,to achieve this we need to store these list of counties in ViewBag or ViewData. ViewBag and  ViewData is a mechanism to pass data from controller to view.

Here Counties (viewbag.countries) is dynamic property, you can give any meaningful name instead of countries.
Now go to view i.e Index.cshtml ,In this view we need to retrieve the list of countries from the viewbag object and display them to the user. Let’s change the code in the Index.cshtml

In above code we use @ symbol to switch between html and c# code. Now run the application and see the following output

tags:views in mvc  ,views in asp.net mvc ,views in mvc 4,
views in mvc 4