[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面

发布时间：2020-12-16 09:07:15 所属栏目：asp.Net 来源：网络整理

导读：随着最终用户对用户体验需求的不断提高，实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用，甚至很多Web页面本身就体现为一个单一的页面。对于这种复杂的页面，我们在设计的时候不可以真的将所有涉及的元素通通至于某个单独的View中，将复杂页面

随着最终用户对用户体验需求的不断提高，实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用，甚至很多Web页面本身就体现为一个单一的页面。对于这种复杂的页面，我们在设计的时候不可以真的将所有涉及的元素通通至于某个单独的View中，将复杂页面相对独立的内容“分而治之”才是设计之道。我们可以借鉴Smart Clent应用的设计方式：将一个Windows Form作为应用的容器（Smart Client Shell），在操作过程中动态地激活相应的用户控件（Smart Part）并加载到容器中。对于一个复杂页面来说，我们也只需要将其设计成一个容器，至于运行过程中动态显示的内容则可以通过Ajax调用获取相应的HTML来填充。[源代码从这里下载]

目录
一、实例演示
二、作为容器的View
三、显示联系人列表
四、弹出“修改联系人”对话框
五、联系人信息的最终修改

一、实例演示

我们先来演示一个简单的例子，假设我们要设计一个“联系人”管理的页面。该页面初始状态如左图所示，它仅仅具有一个用于输入查询条件（First Name和Last Name）进行联系人查询的表单。当用户输入相应的查询条件之后点击“Retrieve”按钮，相应的联系人列表显示以表格的形式显示出来（中图）。当我们点击作为ID的链接后，会以“模态对话框”的形式显示当前联系人的编辑“窗口”（右图）。

这个“单页面应用”是通过ASP.NET MVC开发的，接下来我们来逐步介绍如果将同一页面中的这三块不同的内容提取出来进行“分而治之”。

二、作为容器的View

如下所示的是表示联系人的Contact类型的定义，没有什么特别之处：

   1: public class Contact

   3:     [Required]

   5:     [Required]

   7:     [Required]

   9:     [Required]

  11:     string EmailAddress { get; set; }

  13:     [DataType(DataType.PhoneNumber)]

  15: }

联系人管理对应的HomeController定义如下。简单起见，我们通过一个静态字段来表示维护的联系人列表。我们仅仅列出了默认的Action方法Index，它会直接将作为“容器页面”的View呈现出来。

   3:     private static List<Contact> contacts = new List<Contact>

   5:         new Contact{Id = "001",FirstName = "San",LastName = "Zhang",EmailAddress = "zhangsan@gmail.com",PhoneNo="123"},

   7:     };

   9:     public ActionResult Index()

  11:         return View();

  13:      //其他Action方法

   1: <html>

   3:         <title>Contacts</title>

   5:         <link href="@Url.Content("~/Assets/css/bootstrap-responsive.css"text/css" />

   7:     <body>

   9:            @Html.Partial("QueryFormPartial")

  11:         <div id="contactList"></div>

  13:?

  15:         <script type="@Url.Content("~/Assets/js/bootstrap.min.js")"></script>

  20: </html>

表示“查询表单”的部分定义在如下所示的Partial View（QueryFormPartial.cshtml），直接通过调用HtmlHelper的Partial方法呈现在当前View中。

2: Layout = null;

   4: using (Ajax.BeginForm("Find",new AjaxOptions { OnSuccess = "renderCustomerList" }))

   6:    <fieldset>

   8:        label class="control-label" for="firstName">First Name. :label   9:        input type="text" name="firstName" ="input-medium search-query" />

  13:      14: }

三、显示联系人列表

QueryFormPartial.cshtml定义了一个以Ajax方式提交的表单，目标Action为具有如下定义的Find，它根据指定的First Name和Last Name筛选匹配的联系人列表，并将其呈现在一个名为ContactListPartial的View中。

public ActionResult Find(string firstName = "",string lastName = "")

   6:         var result = from contact in contacts

   8:                             &&(string.IsNullOrEmpty(lastName) || contact.LastName.ToLower().Contains(lastName.ToLower()))

  10:                         select contact;

  12:     }

   1: @model IEnumerableContact   2: @{

   4: }

   7:         tr   8:             th>ID   9:             >First Name  10:             >Last Name  11:             >Email Address  12:             >Phone No.  13:         >

  17:         {

  24:               25:         }

html   2:     head   3:         script ="text/javascript">   2:             function renderCustomerList(data) {
   4:             }
   3:         4:     [HttpGet]


       6:     {


       8:         "ContactPartial",contact);


      10: }

如下所示的ContactPartial.cshtml的定义，这是一个Model类型为Contact的强类型View，它将联系人信息呈现在一个表单中。

3: Layout = null;

   6: {

button ="button" ="close" data-dismiss="modal" aria-hidden="true">&times;buttonh3>Contact Information  10:     div="modal-body"  12:         ="control-group"  13:             @Html.HiddenFor(model=>model.Id)

  15:             ="controls"  16:                 @Html.EditorFor(model => model.FirstName)

  19:           20:           21:             @Html.LabelFor(model=>model.LastName,new{@class="control-label"})

  24:                 @Html.ValidationMessageFor(model => model.LastName)

  29:               30:                 @Html.EditorFor(model => model.EmailAddress)

  32:               33:           34:           35:             @Html.LabelFor(model => model.PhoneNo,new { @class = "control-label" })

  38:                 @Html.ValidationMessageFor(model => model.PhoneNo)

1:

"#contactDialog").html(data);

   5:                     .removeData("validator")

   7:                 $.validator.unobtrusive.parse($("#contactDialog form"));

   9:             }

   4:     [HttpPost]

   7:         contacts.Remove(contacts.First(c=>c.Id == contact.Id));

   9:         return "OK";

  11: }

联系人修改表单提交后关闭当前窗口并加载新的数据通过具有如下定义JavaScript函数Reload实现（@using(Ajax.BeginForm("Update",new AjaxOptions { HttpMethod = "Post",OnSuccess = "reLoad" },new { @class = "form-horizontal" }))），该函数依然定义在Index.cshtml中。

3: if (data == "OK") {

   5:                     $(".form-search form").submit();

   7:             }