Start With First MVC5 Application (Beta)
Here we will start working on the first mvc application that created in previous tutorial. If you are new then I recommended that first go through previous tutorial Creating First Application in MVC5.
Here will add model, view and controller and we will display the view i.e ui page on browser. Here we will rendered strongly type view means each control on ui page is associate with a property of model class, so the you better understand the complete flow of model view and controller.
Create Controller
First go to controllers folder and add a controller. Here I added a controller that is DemoController. By default, Index action method is already added. Return type of Index method is ActionResult that is base class of all types. return view() statement, in method rendering the a view that name is same as method name i.e. index. Click on next link to learn how to add a new controller how to add a new controller in the application.
Controller - DemoController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace FirstMvcApp.Controllers
{
public class DemoController : Controller
{
// GET: Demo
public ActionResult Index()
{
return View();
}
}
Create View
After creating DemoController, it's time for creating a view page. You have just right click on action method name, the select the Add View... from the options. Click on next link to learn How to add view.
After adding a view, your view will look like below codes. Here Layout = null; indicating that page is not associate with any master page. In mvc master page is called as layout page. The Index view is exactly same as html page but extension is .cshtml. Here we are creating view of razor engine. There are also other view engine are available like aspx. Now your view is ready and you can add controls like textbox, dropdownlist, checkbox, radio button etc.
View - Index.cshtml
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
</div>
</body>
</html>
Now just run the application then your index page will render on browser. You can access a view page through a controller, that's why first type controller name then after view name in url (localhost:49334/Demo/Index). Make sure that, don't type controller suffix, like DemoController/Index, ignore controller suffix. You can see in below example that, how url routing works for rendering a view in mvc. As of now page is displaying empty because our view page is empty.
View output
Now we will write some html codes for displaying a form in view page. I added below codes for rendering a form. Here I used bootstrap plugin for better look and feel.
View - Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<body>
<form>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="txtName" placeholder="Name">
</div>
<div class="form-group">
<label>Email Id</label>
<input type="email" class="form-control" id="txtEmailId" placeholder
="Email
Id">
</div>
<div class="form-group">
<label>Mobile</label>
<input type="number" class="form-control" id="txtMobile" placeholder="Mobile">
</div>
<button type="submit" class
="btn
btn-primary">
Save</button>
</form>
</body>
Now run the application. This time your view will rendered a form that look like below:
View output
Create Model
After creating controller and view, now finally time for creating a model. Go to model folder and add a class. I created a model that name is DemoModel. Inside DemoModel I added three properties: Name, EmailId and Mobile. DemoModel is look likes below codes. Just click on next link to learn How to add a Model.
DemoModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace FirstMvcApp.Models
{
public class DemoModel
{
public string Name { get; set
;
}
public string EmailId { get; set
;
}
public string Mobile { get; set
;
}
}
Create Strongly Type View
We learnt that how to create model view and controller in mvc application. Now we are going to learn that how to create strongly typed view. Strongly typed view means you view page associate with one model class and each control on the page strongly binded with one property of that model class. This is the main concept on mvc that view is strongly bind with model. Below codes are representing strongly typed view.
First step to create strongly typed view is the specifying model name on the top of the page by using @model keyword. Here we are using razor syntax for creating html controls. You have to specify a html form by using html helper's Html.BeginForm() method. Inside form you can define the controls. Here we are using Html.TextBoxFor for generating a textbox and specified lamda syntax m=>m.Name that means generate a textbox for Name property of model class DemoModel.
<!DOCTYPE html>
@model< span class="Apple-converted-space"> FirstMvcApp.Models.< span style="font-size: 9.5pt; font-family: Consolas; color: rgb(43, 145, 175); background: white;">DemoModel< o:p>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div>
@using (Html.BeginForm())
{
<div class="form-group">
<label>Name</label>
@Html.TextBoxFor(m => m.Name, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Email Id</label>
@Html.TextBoxFor(m => m.EmailId, new { @class = "form-control" })
</div>
<div class="form-group">
<label>Mobile</label>
@Html.TextBoxFor(m => m.Mobile, new { @class = "form-control" })
</div>
<button type="submit" class
="btn
btn-primary">
Save</button>
}
</div>
</body>