11 Dec

First MVC 3 Web Application

Share Button

This tutorial will be helpful to anyone trying to create a MVC application for the first time, learn model binding, model validation, rendering view and creating controllers.
Step 1
Select MVC 3 web application as shown below.

image

There are three templates in MVC 3 application.
Empty
The Empty template has minimum references and resources required to run an Asp.net MVC application.  Models, Controllers, App_Data are completely empty folders.
Intranet
Intranet application is practically empty web application with home controller and support for Windows authentication.
Internet
The Internet Application extends Basic Template with two controllers ( Account controller and Home controller)  with all the logic and functionality implemented in actions and views.

Razor View Engine ASPX View Engine
Advanced view engine introduced with MVC3 Default view engine for the Asp.net MVC that is included with Asp.net MVC from the beginning.
Razor uses @ symbol

@Html.ActionLink(“SignUp”, “SignUp”)

Webform uses <% and %>

<%: Html.ActionLink(“SignUp”, “SignUp”) %>

Razor Engine doesn’t support design mode in visual studio Web Form engine support design mode in visual studio

Step 2 – Choose Empty Template and Razor View engine.

clip_image002

Step 3 – Add a model class with name student.cs.

clip_image004

Step 4– We are going to implement here data annotation validation using System.ComponentModel.DataAnnotations namespace.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel.DataAnnotations;

 

namespace StudentApplication.Models

{

    public class Student

    {

        [Required(ErrorMessage = “ID field is required.”)]

        public string ID { get; set; }

        [Required(ErrorMessage = “Name field is required.”)]

        public string Name { get; set; }

        [Required(ErrorMessage = “Email field is required.”)]

        public string Email { get; set; }

        [Required(ErrorMessage = “Contact number field is required.”)]

        public string Contact { get; set; }

    }

}

Step – 5

After creating Student model, add a controller for data entry application. ASP.Net MVC controller is responsible for processing incoming request and rendering a particular view.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using StudentApplication.Models;

 

namespace StudentApplication.Controllers

{

    public class HomeController : Controller

    {

       

 

        [HttpGet]

        public ActionResult DataEntryForm()

        {

            return View();

        }

        [HttpPost]

        public ActionResult DataEntryForm(Student student)

        {

            if (ModelState.IsValid)

            {

                return View(“Result”, student);

            }

            else

            {

                return View();

            }

        }

    }

}

Right click on the ActionResult and create a DataEntryController

clip_image001

Step 6  – Go to views->Home->DataEntryForm.cshtml and write the below code for input form.

@model StudentApplication.Models.Student

 

@{

    ViewBag.Title = “DataEntryForm”;

}

<div>

<fieldset>

<legend>Student Form

</legend>

@using (Html.BeginForm())

{

    <div>

                <div class=”editor-label “>

                    @Html.LabelFor(stu => stu.ID)

                </div>

                <div class=”editor-field”>

                    @Html.TextBoxFor(stu => stu.ID)

                    @Html.ValidationMessageFor(stu => stu.ID)

                </div>

            </div>

          

            <div>

                <div class=”editor-label “>

                    @Html.LabelFor(stu => stu.Name)

                </div>

                <div class=”editor-field”>

                    @Html.TextBoxFor(stu => stu.Name)

                    @Html.ValidationMessageFor(stu => stu.Name)

                </div>

            </div>

            <div>

                <div class=”editor-label “>

                    @Html.LabelFor(stu => stu.Email)

                </div>

                <div class=”editor-field”>

                    @Html.TextBoxFor(stu => stu.Email)

                    @Html.ValidationMessageFor(stu => stu.Email)

                </div>

            </div>

           

            <div>

                <div class=”editor-label “>

                    @Html.LabelFor(stu => stu.Contact)

                </div>

                <div class=”editor-field”>

                    @Html.TextBoxFor(stu => stu.Contact)

                    @Html.ValidationMessageFor(stu => stu.Contact)

                </div>

            </div>

            <p><input type = “submit” value=”Submit Details” /></p>

}

</fieldset>

</div>

Step 7- Create another view for Result display.

clip_image001[10]

Step 8- Write below code for the display of output fields.

@model StudentApplication.Models.Student

@{

    ViewBag.Title = “Result”;

}

<h2>Result</h2>

<h2>Data Display</h2>

<fieldset>

    <legend>Student</legend>

    <div class=”display-label”>Name</div>

    <div class=”display-field”>

        @Html.DisplayFor(model => model.Name)

    </div>

    <div class=”display-label”>Email</div>

    <div class=”display-field”>

        @Html.DisplayFor(model => model.Email)

    </div>   

    <div class=”display-label”>Contact</div>

    <div class=”display-field”>

        @Html.DisplayFor(model => model.Contact)

    </div>

</fieldset>

<p>

    @Html.ActionLink(“Edit”, “Edit”, new { id=Model.ID }) |

    @Html.ActionLink(“Back to List”, “Index”)

</p>

Step 9 – After creating these two views, go to Global.asax file and change the router setting.

public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute(“{resource}.axd/{*pathInfo}”);

            routes.MapRoute(

                “Default”, // Route name

                “{controller}/{action}/{id}”, // URL with parameters

                new { controller = “Home”, action = “DataEntryForm”, id = UrlParameter.Optional } // Parameter defaults

            );

        }

Share Button