Reader Level:
ARTICLE

Manipulation of appearance using templates in ASP.NET MVC Application

Posted by Prashant Chaudhary Articles | ASP.NET MVC November 24, 2011
In this article you will learn the use and implementation of Templates in ASP.NET MVC Application
  • 0
  • 0
  • 6418

Before starting the implementation of Templates we must know the meaning and use of Templates. Templates in case of ASP.NET MVC Application is a mixture of elements and controls that are used in any application to form the layout of a particular area.

Basically Templates are used for modification in the appearance. 

Steps for the Implementation of Templates in ASP.NET MVC Application are as follows:

Step 1

  • First step begins with the creation of a new ASP.NET MVC Web Application by opening Visual Studio 2010:
  • Then click on File from the menu strip:
  • Then chose New Project option:

    Untitled-1n.gif

  • Then chose Web from installed template:

    Untitled-2n.gif
     
  • At last click on ASP.NET MVC Web Application and get the welcome webpage:

        Untitled-3.gif

Step 2

Now start the code to form a simple Model for say MCNEMPLOYEE:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcApplication4.Models
{
      public class EmployeeModel
      
{
   public string FirstName { get; set; }
   public string LastName { get; set; }
   public DateTime? DateOfBirth { get; set; }
      }
}

Step 3

Now after coding the Model now code the Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication4.Controllers
{
     [
HandleError]
     public string EmployeeController : Controller
     {
           [
HttpGet]
           public ActionResult indexer()
           {
                 return Veiw ();
           }
     }
}

     1.png

To generate View of the Sample project Employee follow the steps and  image given below:

  • Now first give name to the View
  • Click in the CheckBox "Create a strongly-typed view"
  • And then select the Employee model as data class
  • At last select "Create" as View content

       5n.gif

This View will Generate the Code automatically and that will be:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcApplication4.Models.EmployeeModel>" %> 
<asp:content id="Content3" contentplaceholderid="TitleContent" runat="server"> 
Index 
</asp:content> 
<asp:content id="Content4" contentplaceholderid="MainContent" runat="server"> 
<span id="Index"><h2>Index</h2></span> 
<% using (Html.BeginForm()) {%> 
<%
= Html.ValidationSummary(true) %> 
<fieldset> 
<legend>Fields</legend> 
<div class="editor-label"> 
<%= Html.LabelFor(model => model.FirstName) %> 
</
div> 
<div class="editor-field"> 
<%= Html.TextBoxFor(model => model.FirstName) %> 
<%
= Html.ValidationMessageFor(model => model.FirstName) %> 
</
div> 
<div class="editor-label"> 
<%= Html.LabelFor(model => model.LastName) %> 
</div> 
<div class="editor-field"> 
<%= Html.TextBoxFor(model => model.LastName) %> 
<%
= Html.ValidationMessageFor(model => model.LastName) %> 
</
div> 
<div class="editor-label"> 
<%= Html.LabelFor(model => model.DateOfBirth) %> 
</
div> 
<div class="editor-field"> 
<%= Html.TextBoxFor(model => model.DateOfBirth) %> 
<%
= Html.ValidationMessageFor(model => model.DateOfBirth) %> 
</
div> 
<input value="Create" type="submit"> 
</fieldset> 
<% } %> 
<div> 
<%= Html.ActionLink("Back to List", "Index") %> 
</
div> 
</asp:content>

After generation of form fill the details in BeginForm that will the output

     10.png

Step 4

After creating the View next step is to add your own Template that can be done by following the steps and image given below:

  • First give name to the Template
  • Click in CheckBox "Create a partial view"
  • Click in CheckBox "Create a strongly-typed view"
  • Type in "string" as the view data class

       -7.gif

Now code the Template as the sample code given below:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<div
class="display-label"><strong><%=Html.LabelFor(model => model)%></strong></div>
<div
class="display-field"><%=Html.Encode(Model)%></div>

Similarly add the template to  use DateTime  for the View name and View data class.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DateTime?>"%> 
<div class="display-label"><strong><%=Html.LabelFor(model => model)%></strong></div>  
<div class="display-field"><%=Html.Encode(Model.HasValue ? Model.Value.ToLongDateString() : string.Empty)%></div>

Step 5

Now to perform the function you required by using Template change the View of Employee by this code as follow:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcTempDemo1.Models.EmployeeModel>">  <asp:content id="Content1" contentplaceholderid="TitleContent" runat="server">
Details 
</asp:content> 
<asp:content id="Content2" contentplaceholderid="MainContent" runat="server"
<span id="Details_2"><h2>Details</h2></span> 
<fieldset> 
<legend>Fields</legend> 
<%=Html.DisplayFor(model => model.FirstName)%> 
<%=Html.DisplayFor(model => model.LastName)%> 
<%=Html.DisplayFor(model => model.DateOfBirth)%> 
</fieldset> 
<%= Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %>
<%= Html.ActionLink("Back to List", "Index") %> 
</asp:content> 

       11.png

COMMENT USING

Trending up