23:Asp.Net MVC4 Display And Editor 模板技术快速应用Demo

A.创建Basic类型的项目.

B.在Model目录下,创建3个文件:

Role.cs:

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace MvcEditorTemplatesTest.Models{public enum Role{Admin, User, Guest}}

Teacher.cs:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace MvcEditorTemplatesTest.Models{public class Teacher{public string TeacherId{get{return "8888";}}public string FirstName { get; set; }public string LastName { get; set; }public Role Role{get{return Role.Guest;}set{;}}}}

Student.cs:

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace MvcEditorTemplatesTest.Models{public class Student{public int StudentId{get{return 88;}set{;}}public string Remark{get{return "航大学生.";}set{;}}public Role Role {get{return Role.User;}set{;}}}}

C.创建HomeControlller.cs:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcEditorTemplatesTest.Models;namespace MvcEditorTemplatesTest.Controllers{public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){return View(new Teacher());}public ActionResult Student(){return View(new Student());}public ActionResult StudentDetails(){return View(new Student());}public ActionResult TeacherDetails(){return View(new Teacher());}}}

D.创建View:

在Shared下面创建文件夹:EditorTemplates,然后在其中再创建两个文件:

Role.cshtml:

@model MvcEditorTemplatesTest.Models.Role<div id="MyDDL">@Html.DropDownListFor(m => m, new SelectList(Enum.GetNames(Model.GetType()), "Guest"))</div>

String.cshtml:

@model System.String@Html.TextBox("", "比文字来自String编辑模板", new { style = "background:blue;width:220px" })

在Shared下面创建文件夹:DisplayTemplates,然后在其中再创建两个文件:

Role.cshtml:

@model MvcEditorTemplatesTest.Models.Role<div id="MyDDL">@Enum.GetName(Model.GetType(),Model)</div>String.cshtml:@model System.String@Html.LabelFor(m=>m,Model,new { style = "background:red;width:220px" })在Home下面创建4个文件:

Index.cshtml:

@model MvcEditorTemplatesTest.Models.Teacher@{ViewBag.Title = "Index";}<h2>Index</h2>@using (Html.BeginForm()) {@Html.ValidationSummary(true)<fieldset><legend>Teacher</legend><div class="editor-label">@Html.LabelFor(model => model.TeacherId)</div><div class="editor-field">@Html.EditorFor(model => model.TeacherId)@Html.ValidationMessageFor(model => model.TeacherId)</div><div class="editor-label">@Html.LabelFor(model => model.FirstName)</div><div class="editor-field">@Html.EditorFor(model => model.FirstName)@Html.ValidationMessageFor(model => model.FirstName)</div><div class="editor-label">@Html.LabelFor(model => model.LastName)</div><div class="editor-field">@Html.EditorFor(model => model.LastName)@Html.ValidationMessageFor(model => model.LastName)</div><div class="editor-label">@Html.LabelFor(model => model.Role,"以下界面来自Role模板")</div><div class="editor-field">@Html.EditorFor(model => model.Role)@Html.ValidationMessageFor(model => model.Role)</div><p><input type="submit" value="Create" /></p></fieldset>} <p>@Html.ActionLink("Go to get Teacher Details", "TeacherDetails")</p><p>@Html.ActionLink("Go to Create Student","Student")</p>@section Scripts {@Scripts.Render("~/bundles/jqueryval")}

Student.cshtml:

@model MvcEditorTemplatesTest.Models.Student@{ViewBag.Title = "Student";}<h2>Student</h2>@using (Html.BeginForm()) {@Html.ValidationSummary(true)<fieldset><legend>Student</legend><div class="editor-label">@Html.LabelFor(model => model.StudentId)</div><div class="editor-field">@Html.EditorFor(model => model.StudentId)@Html.ValidationMessageFor(model => model.StudentId)</div><div class="editor-label">@Html.LabelFor(model => model.Remark)</div><div class="editor-field">@Html.EditorFor(model => model.Remark)@Html.ValidationMessageFor(model => model.Remark)</div><div class="editor-label">@Html.LabelFor(model => model.Role,"以下界面来自Role模板")</div><div class="editor-field">@Html.EditorFor(model => model.Role)@Html.ValidationMessageFor(model => model.Role)</div><p><input type="submit" value="Create" /></p></fieldset>}<p>@Html.ActionLink("Go to get Student Details", "StudentDetails")</p><p>@Html.ActionLink("Go to Create Teacher","Index")</p>@section Scripts {@Scripts.Render("~/bundles/jqueryval")}StudentDetails.cshtml:@model MvcEditorTemplatesTest.Models.Student@{ViewBag.Title = "StudentDetails";}<h2>StudentDetails</h2><fieldset><legend>Student</legend><div class="display-label">@Html.LabelFor(model => model.StudentId)</div><div class="display-field">@Html.DisplayTextFor(model => model.StudentId)</div><div class="display-label">@Html.DisplayNameFor(model => model.Remark)</div><div class="display-field">@Html.DisplayFor(model => model.Remark)</div><div class="display-label">@Html.DisplayNameFor(model => model.Role)</div><div class="display-field">@Html.DisplayFor(model => model.Role)</div></fieldset>TeacherDetails.cshtml:@model MvcEditorTemplatesTest.Models.Teacher@{ViewBag.Title = "TeacherDetails";}<h2>TeacherDetails</h2><fieldset><legend>Teacher</legend><div class="display-label">@Html.DisplayNameFor(model => model.TeacherId)</div><div class="display-field">@Html.DisplayFor(model => model.TeacherId)</div><div class="display-label">@Html.DisplayNameFor(model => model.FirstName)</div><div class="display-field">@Html.DisplayFor(model => model.FirstName)</div><div class="display-label">@Html.DisplayNameFor(model => model.LastName)</div><div class="display-field">@Html.DisplayFor(model => model.LastName)</div><div class="display-label">@Html.DisplayNameFor(model => model.Role)</div><div class="display-field">@Html.DisplayFor(model => model.Role)</div></fieldset>

F.在Site.css文件中的末尾增加:

#MyDDL{width: 150px;height: 26px;background-color: #FF00FF;}

，可你仍然感谢天地和人世所带来的这些变化和发生。