How to Create ASP.NET MVC Complete application with Model View and Controller Components

Hi Friend, Here We will create MVC application with the help of Model ,view and controller components.This components are helpful to create asp.net mvc application easily and secure.Here i will show you working of each components with an example. In this tutorial,we will learn "how to pass data from model to controller and vice versa ,as well as how to pass data from controller to view in ASP.NET MVC Framework". Now i am going to to explain this whole concepts on visual studio 2010 with MVC 2 framework. Every MVC Framework(eg. mvc 2 ,mvc 3 ,mvc 4,mvc 5 and mvc 6) can be used to create this simple application.
There are some steps to implement this whole concepts on your visual studio as given below:-

Step 1 :- First open your visual studio --> File --> Project -->Select Web --> Select ASP.NET MVC 2 Empty application --> OK,as shown below:-

Step 2 :- Now open Solution Explorer --> Right click on Model folder -->Add -->New -->Item --> Select Class (Student.cs) -->Add ,as shown below:-

Step 3 :- Now create property for student class members as given below:-


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Student_MVC_Application.Models
{
    public class Student
    {
        public int sid
        {
            get;
            set;
        }

        public string Name
        {
            get;
            set;
        }

        public int Age
        {
            get;
            set;
        }
        public double Fee
        {
            get;
            set;
        }
    }
}

Step 4 :- Now Open Solution Explorer -->Right click on Controller Folder --> Add -->Controller (Mystudent.cs) --> Add ,as shown below:-

Step 5 :- Now Add Model Class Namespace on above of your controller class as given below:-
Using Student_MVC_Application.Models;
Note :- This namespace is present in student class (model layer). For this see step 3.
Step 6 :- Now open class ( MystudentController .cs ) --> Create the object of student class --> and define the student's members here --> and pass the student class object in View function as an argument as shown below:-


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Student_MVC_Application.Models;
namespace Student_MVC_Application.Controllers
{
    public class MystudentController : Controller
    {
        //
        // GET: /Mystudent/

        public ActionResult Index()
        {
            Student obj_st = new Student();
            obj_st.sid = 10012;
            obj_st.Name = "Abhishek Patel";
            obj_st.Age = 25;
            obj_st.Fee =4200.80;
            return View(obj_st);
        }

    }
}

Step 7 :- Now Right click on ActionResult -->Add View --> Check Create strongly -typed view Box --> Select View data class from dropdown list ,as shown below:-

Note:- If you want to attached master page with your application then tick on Select master page box as shown above image.
Step 8 :- Now write the codes in index.aspx page as given below:-


<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Student_MVC_Application.Models.Student>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <style type="text/css">
        .style1 {
            color: #FF0000;
        }
    </style>
</head>
<body>
    <div>
        <span class="style1"><strong>Welcome to MY.NET Tutorials</strong></span> <br />
    The student ID is :<b><%=Model.sid %> </b><br />
    The student Name is :<b><%=Model.Name %> </b><br />
    The student Age is :<b><%=Model.Age %> </b><br />
    The student Fee is :<b><%=Model.Fee %></b> <br />
    </div>
</body>
</html>

Step 9 :- Now Run the application (Press F5) --> You will see following error message as shown below:-

Note:- This error comes because we didn't invoke any Actions.
Step 10 :- Now Put any Action (Mystudent) in browser URL -->press Enter Button -->You will see following output as shown below:-

Step 11 :- If you want to open web page directly without typing Url parameter in browser --> open your solution Explorer window --> Open Global.asax file --> write your controller name and action name as shown in below image.

Note :-

You will see same output as shown in step 10.
I will explain URL Routing concepts in coming post.This is the main part of MVC Application.

For More...

Download Attached file
Download

How to Create ASP.NET MVC Complete application with Model View and Controller Components

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

0 comments:

Post a Comment

How to Create ASP.NET MVC Complete application with Model View and Controller Components

Subscribe through email and get Free updates in inbox

Please like and share this post with your friends...

You May Also Like...

0 comments:

Post a Comment