1. Learning MVC-Part 2
Creating MVC Application&
Perform CRUD operationsusing LINQ to SQL
Introduction:
In firstpart of the tutorial series we got a glimpse of MVC. In this partwe’ll focus on practical implementation of MVC
Pattern. I don’tneed to explain about theory of MVC as we have already covered this in previous partof the article.
Our Roadmap:
We stick our agenda as follows,
Part1: Introduction to MVC architecture and Separation of Concerns.
Part 2: Creating MVC Application from scratch and connecting it with databaseusing LINQ to SQL.
Part 3: Connecting the MVC Application with the help of EntityFramework DB-Firstapproach.
Part 4: Connecting the MVC Application with the help of EntityFramework Code-Firstapproach.
Part 5: Implementing Repository Pattern in MVC Application with EntityFramework.
Part 6: Implementing a generic Repository Pattern and Unit Of Work pattern in MVCApplication with EntityFramework.
Topics to be covered:
1. Creating MVC projectfromscratch.
2. Adding Controllers, Views and Models.
3. Creating sample databaseand use LINQ to SQL for communication.
4. PerformCRUD operations in MVC application using LINQ to SQL.
5. Understand ViewData, ViewBag and TempData.
6. Model Validation by System.Component.DataAnnotation.

2. 1. Creating MVC project:
Step1: Open VisualStudio 2010/2013,I amusing 2010.Goto File=>New=>Projectand select ASP.Net MVC3 Web Application, as
shown below,

3. Name the application as LearningMVC.
Step2: A projecttemplate selection window will be opened, select Empty in that.Select View Engine as Razor and press OK.

4. Step3: Now our solution is ready with an empty MVC application,

5. We can clearly see that the solution contains some extra folders in comparison to traditional Asp.Net web application.
We got Models, Views and Controllers folder and a Shared folder in Views folder. The folders as name denotes are used to hold the
respective MVCplayers model-view-controllers, theshared folder in Views contains the _Layout.cshtml, that can be used as the master
page for the views which we create.
We see the global.asaxfile that contains a default routing table, that defines the route to be followed when request comes, it says that
when request comes to Home controller, the Indexaction of that Home Controller has to be called,

6. Actions are the methods defined in Controllers, that can be called defining a route, the Action methods can also contain parameters, in
above mentioned figure, it says that Home controller has an Action Indexwhich contains an optional parameter id.
When we run our application, we get something as shown below,

7. Itsayethat the resourcewhich weare looking for can not be found.Therequestby default follows the default route as mentioned in
global.asax, i.e. go to controller Home and invokemethod Index.Sincewe don’thave any of these yet, the browser shows this error.
Never mind, lets make the browser happy.
2. Adding Controllers ,View and Models:
Step1: Create a My Controller by right clicking on Controllers folder and add a controller named My, add the controller with empty
read/write actions, it will give us a class with few default generated actions.

8. Note that there are two Actions for every Action name, one is for Get i.e. when view loads for firsttime, and second one is for POST,
when View is submitted with some data.
Change global.asaxRegisterRoutes method as,

9. public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "My", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);
}
Note: we havechanged the name of controller as per our added controller.
Step2: We can see that we have Actions but they return a View, so we need to create Views for them.But before this we’ll create a
Model named User for our Views.Rightclick on Model folder add a class named User,

10. Add following properties to User class,

11. Now our model is created and we can create Views bound to this particular model.
Step3: Go to controller, right click on empty Actions of the controller and from the context menu select AddView on the top.By default
the View name is same as of Actions name.
e.g. For Details,

12. Select Viewname as Details,Model class as User, and Scaffold Template as Details.This template specifies the role of the View, that this
view will show the details of the User(entity).Click add.
Likewiseperformthis operation for all the Actions, and create Views.
Note that Views are automatically added, to Views folder under My folder(auto created as per Controller’s name).This is to maintain a
particular structurefor MVC, so that we don’thave to take overhead to maintain it.

16. Now we have controller as well as Views, so if we run the application we get,

17. i.e. IndexAction of our My controller is Fired that returned IndexView.
3. Creating sample database and use LINQ to SQL for communication.
Our MVC application is ready but, rather than displaying dummy data, I would go for running the application talking to a
data base so that wecan cover wider aspect of the application.
Step1: Create a database, script is given in the attachment, justexecute it over Sql Server 2005/2008.
Step2: Add new Itemto the solution, and select LINQ to SQL class, call it MyDB.dbml

18. Our Solution looks like,

19. Step3:Open Server explorer of Visual Studio, Open a connection, by providing Server name and existing databasename in Server
Explorer Open Connection window,

21. Click OK.Our solution looks like,
Step4: Drag the User table to dbml designer window,wegetthe table in class diagram formatin designer window,

22. When we open MyDB.designer.cs, weget MyDBDataContext class.This class holds databseUser table information in the formof Class and
Properties.For every column of the table, properties are created in the class, and we can usethese properties to get/set values from/in
database.
4. Perform CRUD operations in MVC application using LINQ to SQL.

23. We now have a database, a context class to talk to data base and a MVC application to performCRUD operations in databaseusing the
context class.
Step1 Read:
i) Go to IndexAction, makean instance of context class, Wecan get all the table and column names in that context’s instance.
ii) Make a query to display all the records on Indexview.
iii) Populate the User Model that we created earlier, and pass it to the Indexview(IndexView will be of List type Itemtemplate)

25. When we run the application, weget empty list, i.e. we don’t haverecords in database,

26. Step2 Create:
i)Firstwritecode for creating a user, for the firsttime for Get Action of create, always an empty view will be returned.

27. ii)When we postsome data on click of submitof Create, then we need to make a data entry in table for creating a new user.
iii)When formposted, it fires PostAction of Create with the already bound User model properties to view fields, we’ll retrieve these
model properties and make an instance of context class populate context User and submitto data base.

28. iv)Redirect action to Index, and now a record will be shown on the IndexView.We successfully created a user .

29. v) In database:

30. Step3 Update:
Step4 Delete:

31. Now we are smartenough to performupdate and delete by ourself, this I leave for reader’s understanding capabilities, below are the
screens for Update and Delete.
Edit Code:
Get:

32. Post:
Get Action View of Edit:

33. Edited few fields:

34. Update reflected in database:

35. Code to show details of a particular user :

36. Details Screen:

37. Note : Details Action do not have POSTone, as nothing to post to controller.
Likewisefor Delete:
Screen:

38. Back to List after Delete:
In databaseafter delete:

39. Yes, all the CRUD operations done.Now we know MVC.

40. There are few basic scenarios that I want to discuss beforefinishing with the First Part, like passing data fromController to Views,
between Controllers etc and about Model validation.
5. Understand ViewData, ViewBag and TempData.
I wanted to take this topic as there is much confusion regarding these three players.
MVC provides us ViewData, VieBag and TempData for passing data fromcontroller, view and in next requests as well. ViewData and
ViewBag are similar to someextent but TempData performs additional roles. Lets get key points on these three players:
ViewBag & ViewData:
I have written sampletest code in the sameapplication which we are following from the beginning,
- Populate ViewData and ViewBag on Indexaction of My Controller,

41. - Code in View to fetch ViewData/ViewBag,

42. - When run the application, we get on screen,

43. Following are roles and similarities between ViewData and ViewBag:
 Maintains data when movefrom controller to view.
 Passes data from controller to respectiveview.
 Their value becomes null when any redirection occurs , becausetheir role is to providea way to communicate between
controllers and views. It’s a communication mechanismwithin the server call.
Differences between ViewData and ViewBag (taken from a blog):
 ViewData is a dictionary of objects that is derived fromViewDataDictionary class and accessibleusing strings as keys.
 ViewBag is a dynamic property that takes advantageof the new dynamic features in C# 4.0.
 ViewData requires typecasting for complex data type and check for null values to avoid error.
 ViewBag doesn’trequire typecasting for complex data type.
TempData:
TempData is a dictionary derived fromTempDataDictionary class and stored in shortlives session.It is a string key and object value.
Itkeep the information for the time of an HTTP Request. This mean only fromone page to another. Helps to maintain data when we
move fromone controller to other controller or from one action to other action. In other words when weredirect, “Tempdata” helps
to maintain data between those redirects. Itinternally uses session variables. Temp data useduring the currentand subsequent

44. request only means it is use when we are surethat next request will be redirecting to next view. Itrequires typecasting for complex
data type and check for null values to avoid error. Generally it is used to store only one time messages like error messages, validation
messages.
I added a TempData in Edit Action as,
[HttpPost]
public ActionResult Edit(int? id, User userDetails)
{
TempData["TempData Name"] = "Akhil";
…..
And when View redirected to Index Action,

45. i.e. I get the TempData value across Actions.
6.Model Validation:
We can have many methods for implementing validation in our Web Application Client Side, Server Side etc…
But MVC provides us a feature with which we can annotate our Model for validation by writing justone/two line of code.
Go to the Model class User.cs, add [Required(ErrorMessage = "FirstName is required")] on the top of FirstName property as,
public int UserId { get; set; }
[Required(ErrorMessage = "FirstName is required")]
public string FirstName { get; set; }
public string LastName { get; set; }
………..

46. Now when we run the application, and try to Edit/Create user without specifying FirstName, weget,
Surprised!, Yes model validates itself with these annotations, there are many more validators like required field one that I used.
Do not forgetto include using System.ComponentModel.DataAnnotations; Namespace, when using Model Validation.This is the namespacethat
holds classes used for validation.
Conclusion:
Now we know whatMVC is ,how to Implement it,its advantages,CRUD operations in MVC.Upcoming parts of the
tutorial will be focussing on more advanced topics like EntityFramework, Repository Pattern,UnitOf Work Pattern.CodeFirstApproach.
Happy Coding .