[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面-阿里云开发者社区

开发者社区> 杰克.陈> 正文

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

简介: 原文:[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面 随着最终用户对用户体验需求的不断提高,实际上我们很多情况下已经在按照桌面应用的标准来设计Web应用,甚至很多Web页面本身就体现为一个单一的页面。
+关注继续查看
原文:[ASP.NET MVC] 利用动态注入HTML的方式来设计复杂页面

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

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

一、实例演示

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

img_014288529ea20f9a1867550407825492.png
img_e0c4e6db12679cff21a41fa2e268c95c.png
img_4ce5d88d35eba23cf2c7b80d90c9404a.png

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

二、作为容器的View

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

   1: public class Contact
   2: {
   3:     [Required]
   4:     public string Id { get; set; }
   5:     [Required]
   6:     public string FirstName { get; set; }
   7:     [Required]
   8:     public string LastName { get; set; }
   9:     [Required]
  10:     [DataType(DataType.EmailAddress)]
  11:     public string EmailAddress { get; set; }
  12:     [Required]
  13:     [DataType(DataType.PhoneNumber)]
  14:     public string PhoneNo { get; set; }
  15: }

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

   1: public class HomeController : Controller
   2: {
   3:     private static List<Contact> contacts = new List<Contact>
   4:     {
   5:         new Contact{Id = "001", FirstName = "San", LastName = "Zhang", EmailAddress = "zhangsan@gmail.com", PhoneNo="123"},
   6:         new Contact{Id = "002", FirstName = "Si", LastName = "Li", EmailAddress = "zhangsan@gmail.com", PhoneNo="456"}
   7:     };
   8:  
   9:     public ActionResult Index()
  10:     {
  11:         return View();
  12:     }    
  13:      //其他Action方法
  14: }

如下所示的是Index.cshtml的定义,在这里使用了Twitter的Bootstrap,所示我们引用了相应的CSS和JS。这个主体部分包含三个<div>,分别对应着上述的三个部分。

   1: <html>
   2:     <head>
   3:         <title>Contacts</title>
   4:         <link href="@Url.Content("~/Assets/css/bootstrap.css")" rel="stylesheet" type="text/css" />
   5:         <link href="@Url.Content("~/Assets/css/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
   6:     </head>
   7:     <body>
   8:         <div class="form-search">
   9:            @Html.Partial("QueryFormPartial")
  10:          </div>
  11:         <div id="contactList"></div>
  12:         <div class="modal fade" id="contactDialog"></div>
  13:  
  14:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery-1.7.1.min.js")"></script>
  15:         <script type="text/javascript" src="@Url.Content("~/Assets/js/bootstrap.min.js")"></script>
  16:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.unobtrusive-ajax.min.js")"></script>
  17:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.min.js")"></script>
  18:         <script type="text/javascript" src="@Url.Content("~/Assets/js/jquery.validate.unobtrusive.min.js")"></script>
  19:     </body>
  20: </html>

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

   1: @{
   2:     Layout = null; 
   3: }
   4: using (Ajax.BeginForm("Find", new AjaxOptions { OnSuccess = "renderCustomerList" }))
   5: { 
   6:    <fieldset>
   7:        <legend>Maintain Contacts</legend>
   8:        <label class="control-label" for="firstName">First Name. :</label>
   9:        <input type="text" name="firstName" class="input-medium search-query" />
  10:        <label class="control-label" for="lastName">Last Name :</label>
  11:        <input type="text" name="lastName" class="input-medium search-query" />
  12:        <input type="submit" value="Retrieve" class="btn btn-primary" />
  13:    </fieldset>
  14: }

三、显示联系人列表

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

   1: public class HomeController : Controller
   2: {
   3:     //其他成员
   4:     public ActionResult Find(string firstName = "", string lastName = "")
   5:     { 
   6:         var result = from contact in contacts
   7:                         where (string.IsNullOrEmpty(firstName) || contact.FirstName.ToLower().Contains(firstName.ToLower()))
   8:                             &&(string.IsNullOrEmpty(lastName) || contact.LastName.ToLower().Contains(lastName.ToLower()))
   9:                         orderby contact.Id
  10:                         select contact;
  11:         return View("ContactListPartial",result.ToArray());
  12:     }
  13: }

如下所示的ContactListPartial.cshtml的定义,这是一个Model类型为IEnumerable<Contact>的强类型View,它以表格的形式将联系人列表呈现出来。

   1: @model IEnumerable<Contact>
   2: @{
   3:     Layout = null;    
   4: }
   5: <table class="table table-striped table-bordered">
   6:     <thead>    
   7:         <tr>
   8:             <th>ID</th>
   9:             <th>First Name</th>
  10:             <th>Last Name</th>
  11:             <th>Email Address</th>
  12:             <th>Phone No.</th>
  13:         </tr>        
  14:     </thead>
  15:     <tbody>
  16:         @foreach (var contact in Model)
  17:         { 
  18:             <tr>
  19:                 <td>@Ajax.ActionLink(contact.Id, "Update", new { contactId = contact.Id }, new AjaxOptions { OnSuccess = "showDialog" , HttpMethod="GET"})</td>
  20:                 <td>@contact.FirstName</td>
  21:                 <td>@contact.LastName</td>
  22:                 <td>@contact.EmailAddress</td>
  23:                 <td>@contact.PhoneNo</td>               
  24:             </tr>
  25:         }
  26:     </tbody>
  27: </table>

从QueryFormPartial.cshtml的定义可以看到,表单成功提交之后会调用一个名为renderCustomerList的JavaScript函数(@using (Ajax.BeginForm("Find", new AjaxOptions { OnSuccess = "renderCustomerList" }))),它以如下的方式定义在Index.cshtml中。从定义了看出,它将获取的数据(实际上ContactListPartial这个View最终的HTML)作为contactList这个<div>的HTML。

   1: <html>
   2:     <head>
   3:         <script type="text/javascript">
   1:  
   2:             function renderCustomerList(data) {
   3:                 $("#contactList").html(data);
   4:             }
   5:         
</script>
   4:     </head>
   5: </html>

四、弹出“修改联系人”对话框

从ContactListPartial.cshtml的定义可以看到联系人ID以一个链接的方式呈现出来,点击该链接会以Ajax的方式访问Action方法Update,当前联系人ID会作为请求的参数(<td>@Ajax.ActionLink(contact.Id, "Update", new { contactId = contact.Id }, new AjaxOptions { OnSuccess = "showDialog" , HttpMethod="GET"})</td>)。如下所示的是Action方法Update的定义,它根据指定的ID获取对应的联系人,并将其呈现在一个名为ContactPartial 的View中。

   1: public class HomeController : Controller
   2: {
   3:      //其他成员
   4:     [HttpGet]
   5:     public ActionResult Update(string contactId)
   6:     {
   7:         Contact contact = contacts.First(c => c.Id == contactId);
   8:         return View("ContactPartial", contact);
   9:     }
  10: }

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

   1: @model Contact
   2: @{
   3:     Layout = null;
   4: }
   5: @using(Ajax.BeginForm("Update", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "reLoad" }, new { @class = "form-horizontal" }))
   6: {
   7:     <div class="modal-header">     
   8:     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
   9:     <h3>Contact Information</h3>
  10:     </div>
  11:     <div class="modal-body">
  12:         <div class="control-group">
  13:             @Html.HiddenFor(model=>model.Id)
  14:             @Html.LabelFor(model=>model.FirstName,new{@class="control-label"})
  15:             <div class="controls">
  16:                 @Html.EditorFor(model => model.FirstName)
  17:                 @Html.ValidationMessageFor(model => model.FirstName)
  18:             </div>
  19:         </div>
  20:         <div class="control-group">
  21:             @Html.LabelFor(model=>model.LastName,new{@class="control-label"})
  22:             <div class="controls">
  23:                 @Html.EditorFor(model => model.LastName)
  24:                 @Html.ValidationMessageFor(model => model.LastName)
  25:             </div>
  26:         </div>
  27:         <div class="control-group">
  28:             @Html.LabelFor(model => model.EmailAddress, new { @class = "control-label" })
  29:             <div class="controls">
  30:                 @Html.EditorFor(model => model.EmailAddress)                
  31:                 @Html.ValidationMessageFor(model => model.EmailAddress)
  32:             </div>
  33:         </div>
  34:         <div class="control-group">
  35:             @Html.LabelFor(model => model.PhoneNo, new { @class = "control-label" })
  36:             <div class="controls">
  37:                 @Html.EditorFor(model => model.PhoneNo)                
  38:                 @Html.ValidationMessageFor(model => model.PhoneNo)
  39:             </div>
  40:         </div>
  41:     </div>
  42:     <div class="modal-footer">
  43:     <a href="#" class="btn" data-dismiss="modal">Close</a>
  44:     <input type="submit" class="btn btn-primary" value="Save" />
  45:     </div>
  46: }

联系人编译窗口的弹出最终通过调用JavaScript函数showDialog实现(<td>@Ajax.ActionLink(contact.Id, "Update", new { contactId = contact.Id }, new AjaxOptions { OnSuccess = "showDialog" , HttpMethod="GET"})</td>),具体定义如下所示。它将获取到的数据(实际上是ContactPartial这个View最终的HTML)作为第三个<div>的HTML,并按照Bootstrap的方式以模态对话框的形式将其呈现出来。至于中间的两行代码,在于解决动态添加表单无法实施验证的问题。

   1: <html>
   2:     <head>
   3:         <script type="text/javascript">
   1:            
   2:             function showDialog(data) {
   3:                 $("#contactDialog").html(data);
   4:                 $("#contactDialog form")
   5:                     .removeData("validator")
   6:                     .removeData("unobtrusiveValidation");
   7:                 $.validator.unobtrusive.parse($("#contactDialog form"));
   8:                 $("#contactDialog").modal();
   9:             }            
  10:         
</script>
   4:     </head>
   5: </html>

五、联系人信息的最终修改

通过ContactPartial.cshtml的定义可以看出编辑联系人表单最终以POST的方式提交到HomeController的Action方法Update(@using(Ajax.BeginForm("Update", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "reLoad" }, new { @class = "form-horizontal" }))),该Action方法具有如下的定义。它在完成修改之后,返回字符串“OK”表明联系人修改成功。

   1: public class HomeController : Controller
   2: {
   3:     //其他成员
   4:     [HttpPost]
   5:     public string  Update(Contact contact)
   6:     {
   7:         contacts.Remove(contacts.First(c=>c.Id == contact.Id));
   8:         contacts.Add(contact);
   9:         return "OK";
  10:     }
  11: }

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

   1: <html>
   2:     <head>
   3:         <script type="text/javascript">
   1:  
   2:             function reLoad(data) {
   3:                 if (data == "OK") {
   4:                     $("#contactDialog").modal("hide");
   5:                     $(".form-search form").submit();
   6:                 }
   7:             }
   8:         
</script>
   4:     </head>
   5: </html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Java组合模式(Composite)
把部分和整体的关系用树形结构来表示,从而使客户端可以使用统一的方式处理部分对象和整体对象.
3 0
学妹抱怨Spring入门太难了,我用一篇文章彻底征服了她(2)
学妹抱怨Spring入门太难了,我用一篇文章彻底征服了她
5 0
作为程序员的他,大学四年一直自学,全靠这些实用工具和学习网站!
作为程序员的他,大学四年一直自学,全靠这些实用工具和学习网站!
4 0
牛逼,这2招,彻底让你和 null say 拜拜
牛逼,这2招,彻底让你和 null say 拜拜
6 0
推荐10个堪称神器的学习网站
推荐10个堪称神器的学习网站
6 0
学妹抱怨Spring入门太难了,我用一篇文章彻底征服了她(1)
学妹抱怨Spring入门太难了,我用一篇文章彻底征服了她
6 0
关于 Kubernetes中Volume的一些笔记
男女情事,谁先动心谁吃亏,越吃亏越难忘,到最后,到底是喜欢对方呢,还是喜欢自己,都搞不清楚了,答案偏偏在对方身上,所以才说,由爱故生忧。--------《剑来》
4 0
这些软件太强了,Mac必装!尤其程序员!
这些软件太强了,Mac必装!尤其程序员!
4 0
「阿里云可观测系列公开课」正式发布,多维度助力企业强化可观测能力
阿里云云原生应用平台打造 12 月可观测月,并上线为期 4 期的「阿里云可观测系列公开课」。每周邀请 1 位产品及技术专家,从多个维度全面解读可观测场景实践与解决方案,帮助企业全面强化自身可观测能力。
6 0
历经 7 年双 11 实战,阿里巴巴是如何定义云原生混部调度优先级及服务质量的?
本文将聚焦在 K8s 层的容器优先级和服务质量模型上,希望给业界提供一些可借鉴的思路。
6 0
+关注
杰克.陈
一个安静的程序猿~
9798
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载