AspNet MVC4 教学-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 > @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 > @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;
}