MVC Tutorial for Beginner

Asp.net mvc is the web based framework. Before starting this mvc tuotrial you must have knowledge of asp.net , C#, linq and entityframework. I have categoriezed this mvc tutorial in different module. If you are new to mvc or you dont have any knowledge of mvc then this mvc tutorial will help you to start from basics. I also covered some advance topics like scaffolding , ajax,area , web api etc.

What is MVC and Controller

MVC stands for ModelViewController . It is another way to create web based application. As compare to Asp.net form based application it is quite light weighted.
MVC framework separates the application into three major components which is as follows:-
MODAL: - In MVC Framework we put all business logic of application into the modal.

Mvc Controller

Implementation of View using JavaScript

In MVC “V” stands for View. View is basically a User Interface(UI) in MVC.
In this article I am just giving an introduction of view.
In MVC we can create view in two manner which is either in .aspx form or in Razor which is in .cshtml or .vbhtml.

Mvc View

Form Tag with GET and Post Method

In MVC we use GET and POST Method to Each Request and Reply. If we do not set any method for MVC Application then it uses GET Method by Default.
For Example:-
Create a simple MVC Application. Create Home controller and create index view. Simply print Some String in this view and Execute this code.

mvc get and post

Action Element

Action is the element of Form Tag and it is used to redirect page when we submit the button.
Syntax of Action:-
Action=”Controller\View”

action in form tag

Routing in MVC

Routing is the way to create user friendly and descriptive url. In mvc when you add project we are able to see RouteConfig.cs file in our app_start folder.

routing in mvc

Form Collection in MVC

In this article I will explain how to fetch data from controls which are on View to Controller. There are many ways to fetch these values and Form Collection is the one of them.

mvc form collection

Fetching Data using Request

n this article I will explain how to fetch data from controls which are on View to Controller using Request. In my last article I explain the same example using FormCollection. Request objects work with both GET and POST Method.

request object in mvc

Get Version of MVC

If we need to gets the version of the MVC application using code or if we want to print the Version of MVC then we can show it using code.

how to get version in mvc

Tutorial for MVC Intermediate

Razor View Engine

View engine plays a very important role as they are used to render HTML Page. We use Razor to create view in MVC. Razor View Engine is the combination of both HTML and Programming language. When we use C# programming language then its extension is .cshtml and when we use vb language then its extension is .vbhtml.

razor view engine

Variable declaration in Razor

As I discussed in my last article that Razor is the combination of HTML and C#, so we can use almost all programming feature in Razor. In this article I am showing how we can work with variables. In Razor we start programming code using @.

how to declare variable in mvc

If-Else statement and looping in Razor

In my last article I discussed how we can use programming statement in Razor. In my last article we declared some variable and perform some calculation on it. In this tutorial I am going to discuss how we can use if-else statement and looping.

if else and loop in razor

ViewData in MVC

ViewData is used to access data from controller to view. ViewData stores data as key-value format. ViewData type is ViewDataDictionary.

viewdata in mvc

ViewBag in MVC

In my last article I explain how to send data from view to controller using ViewData. In this article we will discuss how we can send data using ViewBag. ViewBag used dynamic property which introduced in C# 4.0.

viewbag in mvc

HTML Helper Classes

HTML Helper(Begin,Label,Submit Button)

In MVC, many helper methods are added to create HTML control perfectly. As in Web Application we use control class to create control in asp.net, here we use HTML helper classes. But these methods are very light weight as they not maintain any viewstate and return as string.

htmlhelper class in mvc

HTML Helper(RadioButton, Password, TextArea)

In previous article I discussed about the HTML Helper class and we created some control using this class. In this article I am continuing this topic and will discuss about the others controls and continue with the previous example which I used in my last article.

htmlhelper radiobutton and password

ActionLink in HTML Helper Classes

ActionLink is used to generate hyper-link in MVC using HTML Helper Class.
For Example:- @Html.ActionLink("Login","Welcome")

actionlink in mvc

DropDownList in HTML Helper Classes

It is little bit tricky to create dropdown list in MVC using HTML Helper class. As we know that in general dropdown list we show data in Text and Value format. Similarly here we have to create a class which contains the property for Text and Value.

dropdown in mvc

Custom HTML Helper class in MVC

In my previous article I have discussed about the html helper class. html helper class doesn’t support all html tags. So if we want to add tags which behave like html helper then we need to create our own custom html helper class.

custom htmlhelper

Model in MVC

Model in Simple Way

In MVC ‘M’ stands for Model. In MVC model is used to create logic class for any MVC application. We can put all our project logic called business logic in model in MVC. In this example I am creating model in a simple way. In my next article I will discuss model with strongly view.

mvc model

Model with Strongly View

In my last article I discussed model in a simply way. In this example I am going to explain model using strongly view. For this example I am taking the previous example in which I have created the model class named EmployeeData.

strongly view in mvc

Insert Data using Ado.net in MVC

In this article I am going to explain, how we can insert data using DAO class in MVC. In this example I am using ADO.net, later on I will use Entity Framework. In this article I will use Request object to fetch data from view to controller. If you are not aware with Request object kindly first click here.

ado.net in mvc

Pass Data from View to Controller using Model in MVC

In my last article series I explained how we can pass data from view to controller using Request, FormCollection etc. In this article I am explaining how you can access data from view to controller using Model.

data passing using model

UpdateModel in MVC

In my last article I explained that how we can fetch data from view to controller using model and I fetched the data from view to controller using model and save this data into database. I am using the same example in this article.

updatemodel in mvc

Concept of Null-able type in Model in MVC

In my last article I discussed how we can fetch data from view to controller using UpdateModel in MVC. In last example we use UpdateModel method where we pass model object i.e. your techaltum class. I am taking the same example in this article. We have seen that when we click on button our data posted in model and using this model we insert this data into database.

nullable type in mvc

Scaffolding using LINQ in MVC

Scaffolding LIST option using LINQ in MVC

Scaffolding is the option in MVC which provide the facility to generate automatic code page for certain functionality like List, insert, update, delete etc. It is the major tool which provides quick way to generate code. In this example I am using LINQ to generate back-end part. In my next article series I will show the same example using Entity Framework.

scaffolding list using linq

Scaffolding Create option using LINQ in MVC

In my last article I described how to create List using Scaffolding. In this article I will discuss how to use Scaffolding Create option. If you have seen the output of LIST example code then you can see that there is link on the page for Create New.

scaffolding create using linq

Scaffolding Edit option using LINQ in MVC

In my last two articles I discussed how to use the LIST and create functionality using Scaffolding. In this article I am going to explain how to perform edit option using scaffolding. We got following screen after performing the LIST option of scaffolding

scaffolding edit using linq

Scaffolding Details option using LINQ in MVC

In my previous article series I explained how to use scaffolding list, create and edit option. In this article I am going to explain the edit option using scaffolding. As we know that it is not possible for us to show all column on the screen. So we simply give link of detail and on the click of detail we show the records.

scaffolding details using linq

Scaffolding Delete option using LINQ in MVC

In my last article series I explained scaffolding LIST, Create, Edit and Detail option. In this article I am going to explain Delete option.

As you see when we execute this code we will get following window where we get delete option.

scaffolding delete using linq

Scaffolding using Entity Framework in MVC

Scaffolding LIST option using Entity Framework in MVC

In my last article series I explained how to work with scaffolding using LINQ. In this article series I will explain how to work with scaffolding using Entity Framework.

Note: - if you are new to scaffolding then click here and if you are new to Entity Framework then click here.

In this article I am going to explain how to show data using scaffolding LIST option with Entity Framework.

scaffolding list using enity framework

Scaffolding Create option using Entity Framework in MVC

In my last article I have explained how to use LIST option of scaffolding using Entity Framework. After completing the LIST option we got following output:-

scaffolding create using entity framework

Scaffolding Edit option using Entity Framework in MVC

In my previous article I discussed how we can select and insert data using EF by using LIST and Create option.

In following image we can see that there is Edit link

scaffolding edit using entity framework

Scaffolding Details option using Entity Framework in MVC

In my last article series I have explained how we can perform select, update and insert using scaffolding with entity framework. In this article I am going to explain the Scaffolding Detail option.

In the following screen you will the Detail link:-

scaffolding details using entity framework

Scaffolding Delete option using Entity Framework in MVC

In my last article I have explained how to select, insert, update and details option. In this article I am going to explain how to perform delete option using scaffolding with Entity Framework.

In the following image you can see the delete actionlink.

scaffolding delete using entity framework

Validation in MVC

Server Side Required Validation in MVC

In my last article series I explained some basic operation like Create, List, Edit, Detail and Delete using Scaffolding.

In my last article series I didn’t explain any validation on data. As we entered the blank form it will simply entered the data.

requiredl validation in mvc

Server Side Range and Compare Validation in MVC

In my last article I discussed about the server side Required validation with example. In this example I am continuing the last topic and will cover the Range validation and compare validation in mvc.

To implement the range validation we have to use the Range attribute on the property in my model. As I am continuing the last article example, so our model class is Student.

range and compare validation in mvc

Server Side Regular Expression Validation in MVC

In my last article series I explained the server side Required, Range and Compare validation. In this article I am going to explain the Regular Expression Validation.

Regular Expression validation is used to validate the pattern like email address, website etc.

reqular expression validation in mvc

String Length Validation in MVC

In my last article I explained the Required, Range, compare and Regular Expression validation. In this article I am going to explain the String Length validation.

When we need to specify the length of the string entered in the textbox then we can specify the StringLength Attribute.

mvc string length

Master Page in MVC

Implementation of Master Page in MVC

In asp.net we all are familiar with Master page. Master page is used to create a common layout for the web based application.

In Master page we use Content Place Holder where we want to place other pages content.

mvc master page

Implementation of ViewStart in MVC

In my last article series I explained that how we can generate a common page for all view which is almost similar to the concept of master page we used in asp.net.

In last article we simply created a view and add common content in it. We also add @RenderBody () method for the other content which works like content place holder in master page in asp.net.

viewstart in mvc

Partial View in MVC

Implementation of Partial View and calling from Parent view

Partial view is a view which can be rendered from another view which is called parent view or it can also be called as individual page. It behaves like user control which we used in asp.net. After creating a partial view, we can render this partial view in parent view as well as can also use it as individual view.

mvc partial view

Partial View calling as Individual View

In my previous example I explained how we can create partial view and how we can call partial view from parent view.

In this example I am using the same example but here I will call partial view as individual view as we call others view.

partial view calling

Ajax in MVC

DropDownList Binding using Ajax in MVC

Ajax stands from Asynchronous JavaScript XML. Using AJAX we can create partial request. To work with AJAX using JQuery first we need to add the script file. As we know JQuery is JavaScript library. So first we need to add the JQuery files.

dropdown list binding using ajax

CSS in MVC

CSS Implementation in MVC

If we see the all controls which we created using HTML Helper, they all are overloaded. There is overload method in which we pass HtmlAttribute of type object. In this object we pass the object in which we define the style of control.

css implementation in mvc

Security in MVC

Form Based Authentication in MVC

In web based application security is a major concern. In application we have so many forms which we want to be accessed by only authentic user.

In MVC as we know that we create action which calls view accordingly. So we have to authenticate the action that whether the authorize person is going to access the action or not.

form based authentication

AllowAnonymous Action Filter in MVC

In my last article I have explained how we can set form based authentication using Authorize action filter. In my last article I used Authorize action filter on action which I want to be get executed after authentication.

allow anonymous filter

Area in MVC

Area in MVC with Example

In MVC we all are familiar with the folder of Model, View and Controller which added at the time of MVC project Creation.

mvc area

How to Upload Image in MVC

As we know image uploading is very common task to do. In this article I am explaining how to upload image in mvc using Model. In my next article I will explain how to upload image without model.

how to upload image in mvc

How to Display Image in MVC

In my last article I explained how to upload image using model in mvc. Now I am going to explain how to display this image.

how to display image in mvc

Web API

Asp.net web API is a platform to create Restful Services which is based on HTTP Request. Web API can be reached to the multiple clients like web based, mobile based etc. Web API Request and Response can be in XML and JSON.

web api implementation in mvc

You can suggest topics which you want to add in this asp.net mvc tutorial. Our team will try to add them. Thanks