Create master page or layout page:
Example1 :
(i) Open a new Empty MVC application.
(ii) Add one controller named as “ranjit”.
(iii) Add three Actions in “ranjit” controller named as:- index, first, second.
(iv) Add layout page by right click on the “Views” folder and select the menu “AddMVC4
Layout Page” change the named as “masterpage.cshtml”.
(v) Edit the code in layout page as:
<body>
<div style="height:150px; background-color:yellow">
<h1>I M master page</h1>
</div>
<div>
@Html.ActionLink("Index Page","index","ranjit")
@Html.ActionLink("First Page","first","ranjit")
@Html.ActionLink("Second Page","second","ranjit")
</div>
<div>
@RenderBody()
</div>
</body>
(vi) Add three view page as (index.cshtml, first.cshtml, second.cshtml).
(vii) Write the code in view page as :
Index.cshtml
@{
Layout = "~/views/masterpage.cshtml";
}
<div style="height:300px; background-color:red">
<h1>I M index page</h1>
</div>
First.cshtml
@{
Layout = "~/views/masterpage.cshtml";
}
<div style="height:300px; background-color:green">
<h1>I M first page</h1>
</div>
Second.cshtml
@{
Layout = "~/views/masterpage.cshtml";
}
<div style="height:300px; background-color:blue">
<h1>I M second page</h1>
</div>
(viii) Press F5 key.
About “_ViewStart.cshtml” file : This file can be used to define common view code that we want
to execute at the start of each View’s rendering. This file automatically execute when this file create within the
“Views” folder. The role of this file avoid to repeat some code that must be the same between views. The
common code between all views are write the code for layout page. For Example:--
@{
Layout = "~/views/masterpage.cshtml";
}
If we write the above code in “_ViewStart.cshtml” page then we can omit this code in all views page.
Example2 :
(i) Open a new Empty MVC application.
(ii) Add one controller named as “ranjit”.
(iii) Add three Actions in “ranjit” controller named as:- index, first, second.
(iv) Add layout page by right click on the “Views” folder and select the menu “AddMVC4
Layout Page” change the named as “masterpage.cshtml”.
(v) Edit the code in layout page as:
<body>
<div style="height:150px; background-color:yellow">
<h1>I M master page</h1>
</div>
<div>
@Html.ActionLink("Index Page","index","ranjit")
@Html.ActionLink("First Page","first","ranjit")
@Html.ActionLink("Second Page","second","ranjit")
</div>
<div>
@RenderBody()
</div>
</body>
(vi) Add three view page as (index.cshtml, first.cshtml, second.cshtml).
(vii) Write the code in view page as :
Index.cshtml
<div style="height:300px; background-color:red">
<h1>I M index page</h1>
</div>
First.cshtml
<div style="height:300px; background-color:green">
<h1>I M first page</h1>
</div>
Second.cshtml
<div style="height:300px; background-color:blue">
<h1>I M second page</h1>
</div>
(viii) Right click on the “Views” folder then select the menu “AddView” then write the file
name “_ViewStart” then click on the “Add” button. Then we find a “_ViewStart.cshtml”
Page.
(ix) Write the code in “_ViewStart.cshtml” page as:--
@{
Layout = "~/views/masterpage.cshtml";
}
(X) Press F5 key.
Example of RenderSection(), RenderPage() and RenderBody() method:
(i) Open a new Empty MVC application.
(ii) Add one controller named as “ranjit”.
(iii) Add three Actions in “ranjit” controller named as:- index, first, second.
(iv) Right click on the “views” folder and then select the menu “addview” named as :-
“menupage.cshtml”.
(v) Write the code in “menupage.cshtml” as:
@Html.ActionLink("Home","index","ranjit")
@Html.ActionLink("About Us","first","ranjit")
@Html.ActionLink("Contact Us","second","ranjit")
(vi) Add layout page by right click on the “Views” folder and select the menu “AddMVC4
Layout Page” change the named as “masterpage.cshtml”.
(vii) Edit the code in layout page as:
<body>
<div style="height:150px; background-color:black; color:white;
font-size:60px; font-weight:bold; text-align:center;
text-shadow:5px 5px 5px red">
Logic Computer Center
</div>
<div style="height:40px; background-color:silver">
@RenderPage("~/views/menupage.cshtml")
</div>
<div style="width:20%; float:left">
@RenderSection("sec1",false)
@RenderSection("sec3",false)
@RenderSection("sec5",false)
</div>
<div style="width:60%; float:left">
@RenderBody()
</div>
<div style="width:20%; float:left">
@RenderSection("sec2",false)
@RenderSection("sec4",false)
@RenderSection("sec6",false)
</div>
</body>
(viii) Add three view page as (index.cshtml, first.cshtml, second.cshtml).
(ix) Write the code in all view pages as :
Index.cshtml
<div style="height:200px; background-color:red">
<h1>i m index page</h1>
</div>
@section sec1
{
<div style="background-color:yellow; height:300px">
<h1>i m section "sec1" of index page</h1>
</div>
}
@section sec2
{
<div style="background-color:blue; height:300px">
<h1>i m section "sec2" of index page</h1>
</div>
}
First.cshtml
<div style="height:200px; background-color:maroon">
<h1>i m first page</h1>
</div>
@section sec3
{
<div style="background-color:green; height:300px">
<h1>i m section "sec3" of first page</h1>
</div>
}
@section sec4
{
<div style="background-color:gold; height:300px">
<h1>i m section "sec4" of first page</h1>
</div>
}
Second.cshtml
<div style="height:200px; background-color:darkkhaki">
<h1>i m second page</h1>
</div>
@section sec5
{
<div style="background-color:brown; height:300px">
<h1>i m section "sec5" of second page</h1>
</div>
}
@section sec6
{
<div style="background-color:cyan; height:300px">
<h1>i m section "sec6" of second page</h1>
</div>
}
(x) Write the code in “_ViewStart.cshtml” page as:--
@{
Layout = "~/views/masterpage.cshtml";
}
(Xi) Press F5 key.
Example of Checkbox control
Example1(Using FormCollection):
(i) Open a new MVC internet application.
(ii) Add one controller named as “ranjit”.
(iii) Write the code in “index.cshtml” view page as :-
@using (Html.BeginForm("first", "ranjit"))
{
@Html.CheckBox("chk1")
<input type="submit" value="Submit" />
}
(iv) Write the code in “ranjit” controller page as :-
public ActionResult Index()
{
return View();
}
public ActionResult first(FormCollection fc)
{
bool c1 = (fc["chk1"] == "false") ? false : true;
ViewBag.value1 = c1;
return View();
}
(v) Write the code in “first.cshtml” view page as :-
<h1> @ViewBag.value1 </h1>
(vi) Execute the above program.
Example2 (Using Parameter Approach):
(i) Open a new MVC internet application.
(ii) Add one controller named as “ranjit”.
(iii) Write the code in “index.cshtml” view page as :-
@using (Html.BeginForm("first", "ranjit"))
{
@Html.CheckBox("chk1")
<input type="submit" value="Submit" />
}
(iv) Write the code in “ranjit” controller page as :-
public ActionResult Index()
{
return View();
}
public ActionResult first(String chk1)
{
bool c1 = bool.Parse(chk1);
ViewBag.value1 = c1;
return View();
}
(v) Write the code in “first.cshtml” view page as :-
<h1> @ViewBag.value1 </h1>
(vi) Execute the above program.
Example of CheckBoxFor() method (using Model class):
(i) Open a new MVC internet application.
(ii) Add one controller named as “ranjit”.
(iii) Add one model class named as “Class1”.
(iv) Write the code in “Class1.cs” file as :
public class Class1
{
public bool Matric { get; set; }
public bool Inter { get; set; }
public bool Grad { get; set; }
}
(v) Write the code in “index.cshtml” view page as :-
@model MvcApplication15.Models.Class1
@using (Html.BeginForm("first", "ranjit"))
{
@Html.CheckBoxFor(m=>m.Matric)@:Matric <br />
@Html.CheckBoxFor(m=>m.Inter)@:Inter<br />
@Html.CheckBoxFor(m=>m.Grad)@:Graduation<br />
<input type="submit" value="Submit" />
}
(vi) Write the code in “ranjit” controller page as :-
public ActionResult Index()
{
return View();
}
public ActionResult first(Class1 c1)
{
bool m = c1.Matric;
bool i = c1.Inter;
bool g = c1.Grad;
ViewBag.value1 = m;
ViewBag.value2 = i;
ViewBag.value3 = g;
return View();
}
(vii) Write the code in “first.cshtml” view page as :-
<h1> @ViewBag.value1 </h1>
<h1> @ViewBag.value2 </h1>
<h1> @ViewBag.value3 </h1>
(viii) Execute the above program.
Add Events on the Controls :
(i) Example of “onkeyup” event on textbox control :
Write the code in index.cshtml view page as:
@Html.TextBox("t1","",new{id="txt1",onkeyup="fun1()"})<br /><br />
@Html.TextBox("t2","ranjit",new{id="txt2"})<br /><br />
<script type="text/javascript">
function fun1()
{
document.getElementById("txt2").value =
document.getElementById("txt1").value;
}
</script>
(ii) Example1 of “onchange” Event on DropDownList control :
Write the code in index.cshtml view page as:
@{
List<String> col=new List<string>();
col.Add("Patna");
col.Add("Ara");
col.Add("Gaya");
col.Add("Siwan");
}
@Html.DropDownList("cmb1", new SelectList(col, "Gaya"), new {id="cmb1",onchange="fun1()"})
<script type="text/javascript">
function fun1()
{
var c = document.getElementById("cmb1");
var i=c.selectedIndex;
alert("Selected Index no.= "+i);
alert("Selected Item = "+c.options[i].text);
}
</script>
(iii) Example2 of “onchange” Event on DropDownList control :
Write the code on index.cshtml view page as:
@{
List<String> col=new List<string>();
col.Add("Ara");
col.Add("Patna");
col.Add("Gaya");
col.Add("Siwan");
col.Add("Chapra");
}
@using (Html.BeginForm("first","ranjit"))
{
@Html.TextBox("txt1","",new{style="font-size:20px; font-weight:bold;
background-color:red"})<br /><br />
@Html.TextBox("txt2","ranjit")<br /><br />
@Html.DropDownList("cmb1", new SelectList(col), "Siwan", new
{onchange="this.form.submit()"});
}
Write the code in ranjit controller as:
public ActionResult Index()
{
return View();
}
public ActionResult first(String txt2=””,String txt1=””,String cmb1=””)
{
String msg = "<h1>First Vlaue is : " + txt1 + "</h1>";
msg += "<h1>Second Value is :" + txt2 + "</h1>";
msg += "<h1>Third Value is :" + cmb1 + "</h1>";
return Content(msg);
}
