Ajax[转自杰夫reyZhao]不妨来做个尝试:UpdatePanel for ASP.NET MVC

  可是要求强调的是,那只是是个原型。也许说那只是一种完成上尝试,在无数细节方面并从未作太多追求。假使要成为一个两全的AJAX化解方案,还索要作大量的革新。例如:

  这么些扶助方法的成效是生成一些触发AJAX更新的竹签及脚本,当用户点击RenderBeginAjaxForm与RenderEndForm方法生成的tag之间的交付按钮时,网页将会向劳动器端发出三个AJAX请求,而服务器端的Action并最终会经过RenderPartial方法输出三个Partial
Template生成的HTML。服务器端最后输出的HTML将会被替换或添加到页面包车型客车某些成分内。那就形成了三个AJAX效果。那个消除方案从一些方面看上去很酷,越发是浮动的代码能够添加到有个别元素中,而不单单是就好像UpdatePanel的轮换,例如Nikhil在他的例子中就应用了这一个特点完结了2个加上效果。然而只要选用以前建议的口径来度量的话,就像这一个消除方案并不13分杰出。

  很肯定,MvcAjaxPanel的办事原理与UpdatePanel有颇多相似之处,也达成了自然程度上的晶莹。而且与Nikhil的化解方案比较,2个相当重庆大学的优势正是足以贰遍立异页面中的八个区域——其实那也等于UpdatePanel的特性之一。而且那种对Controller透明的做法又有3个天生的特色,那正是能够轻松地在不帮助AJAX的浏览器中使用守旧的形式切换页面。

public class
TaskListController : AjaxController {
    …
    public void CompleteTask(int taskID) {
        if (String.IsNullOrEmpty(Request.Form[“deleteTask”]) == false) {
            InvokeAction(“DeleteTask”);
            return;
        }
 
        Task task =
_taskDB.GetTask(taskID);
        if (task != null) {
            _taskDB.CompleteTask(task);
        }
 
        if (IsAjaxRequest) {
            if (task != null) {
                RenderPartial(“TaskView”,
task);
            }
        }
        else {
            RedirectToAction(“List”);
        }
    }
    …
}

  Nikhil Kothari业已提议了他在ASP.NET
MVC框架下的AJAX化解方案
。借使你还不理解她的做法,那么自个儿先在此间展开一些囊括。Nikhil扩充了Controller使之援助一种Ajax操作,于是大家在代码中就足以写如下代码:

 

  在收获了form的submit事件今后,客户端将会收集该form中的全体input、select等值,组成3个伸手的body,并且以HTTP
POST的法门发出三个AJAX请求。余下的事情和在此以前就从未怎么分别了。

  小编将以此控件命名为MvcAjaxPanel。MvcAjaxPanel与UpdatePanel最大的分别在于后者接收的是PostBack,而前者接收的只是普通的HTTP请求。Post“Back”意味着Post过后归来了原来的Page,而ASP.NET
MVC的请求往往会被指引至分化的页面。由此怎么样跨页面进行内容更新是MvcAjaxPanel首要化解的标题。最后笔者选择了为各样MvcAjaxPanel钦赐3个UpdateAreaID的做法。

<mvc:MvcAjaxPanel runat=”server” ID=”mvcAjaxPanel” UpdateAreaID=”Header”>
    …
</mvc:MvcAjaxPanel>

先来发一通牢骚。

附件:源代码及应用示例

  也有评价认为,Controller中的逻辑不应该依照二个伸手AJAX与否而展开不一致处理(Nikhil的化解方案使用RenderPartial来替代RenderView为AJAX操作实行输出),因而这些消除方案破坏了MVC的职分。笔者不这么觉得,但是本人期待能一呵而就那点,因为成功那一点即意味着相对的晶莹。相对透明则代表Controller将3个应用程序是还是不是AJAX的决定权完全交由了客户端,这一点非凡特出,因为AJAX完全是3个显示层的概念。ASP.NET
AJAX中的UpdatePanel在那上头的显现可圈可点(尽管还远不够完美),由此笔者最后决定也为ASP.NET
MVC开发一款类似UpdatePanel的零件。值得庆幸的是,ASP.NET
MVC暗中同意使用WebForm页面作为视图模板,在那一个强大的模子之下,创设出那样二个AJAX化解方案(的本质)就如并不12分困难。

  最终再说一件有趣的政工:在自我完结了这些原型之后的某一天,忽然发现到那几个控件就像是不光能够为ASP.NET
MVC使用,也能够用于普通的WebForms应用程序。那真是二个让人竟然的发现。

  为此笔者提供了部分JavaScript代码,截获二个链接原本的靶子地点并将其转会为1个AJAX请求。小编在此地经过示范中的代码来显示那种应用办法(那些示例源于Brad
Abrams
提供的ASP.NET
MVC示例
,可是作者割舍了Northwind数据库与Entity
Framework,取而代之的是XML数据以及自定义的简要Model。此外,作者也将其移植到ASP.NET
MVC框架的0416 Build中):

  • 不可破坏MVC中的协议(同盟,职分等等)
  • 对开发人员尽大概地透明

<div id=”taskItem<%= Task.ID %>” class=”taskPanel”>
<% Ajax.Initialize(); %>
<%
this.RenderBeginAjaxForm(
      Url.Action(“CompleteTask”),
      new {
          Update = “taskItem” + Task.ID,
          UpdateType = “replace”,
          Completed = “endUpdateTask”});
%>

  与AjaxController类似,Nikhil也为ViewPage和ViewControl提供了一部分恢弘方法,由此近日在View(List.aspx)中我们就能收看如下的代码:

  大家得以采纳方面包车型客车办法回应一般链接,那么又该怎么样将三个客户端from的交由行为也改成AJAX操作呢?以下依然是出现说法中的代码:

  那段代码来自分类列表页。与AJAX创新此前的代码相比较,唯一的不一样正是12分钦命了元素的onclick事件(加粗部分)。在onclick事件实施中,这几个链接暗中同意的跳转行为将被撤消,取而代之的是3个AJAX请求,请求的靶子就是ProductsController中名为List的Action。

  大家能还是不可能在ASP.NET
MVC中拯救UpdatePanel呢?大概是足以的呢,但那更像是多个“不容许一举而竟全功的义务”。笔者不是风传中的阿汤哥,因而再一次为ASP.NET
MVC量身定制1个AJAX消除方案就像越发有效。即便大家不会苛求贰个新闯祸物从诞生开端就趋向完美,但固然只是3个原型,它也必须严酷遵守的部分标准化:

  • 提供部分客户端的hook供前台开发人士使用(如提交前、接受后、也许处理三个付给还没有再次回到,客户端就倡导另二个呼吁的意况等等)。
  • 更强劲的意义,更好的费用体验(如客户端触发机制)
  • 十分处理
  • 支撑脚本
  • 支撑跳转(Redirection)

  与UpdatePanel比较,MvcAjaxPanel的客户端截获形式可谓“纯手工业”,然则本身并不认为那会促成什么难点。ASP.NET
MVC强调的正是职责分开,而那种分离并不只展现在代码上,也呈现在开发职员的职分上。在支付ASP.NET
MVC应用程序时,负责View的是前端开发工程师,对他们来说JavaScript与AJAX可谓是再熟稔可是的技巧。在合时的地点手动编写一些JavaScript调用反而会让她们赢得最好的自由性。例如在事先的代码示例中,调用mvcAjax.get或mvcAjax.submit方法时完全能够在前后自由地投入额外操作仍然条件判断。那就不会像使用UpdatePanel时,纵然须要接纳JavaScript提交三个AJAX更新,还要求依靠不登大雅之堂的trick

  其余,作为面向ASP.NET
MVC特有的AJAX消除方案,也有一些外加的题材需求考虑。最非凡的题目之一就是在采纳ASP.NET
MVC时很少使用模板控件,而更加多的应用页面中的循环,那么哪些让MvcAjaxPanel在循环内容生效?作者也时有爆发过一些想方设法,可是要是要实在分明下来最后的完结格局,很多东西还索要进一步考虑。假设你对于那么些AJAX消除方案有何样建议或别的任何想法,也请及早告诉本身。

  当页面向服务器端发出三个AJAX请求时将会顺手页面中的UpdateAreaID音信,而服务器端的Action并不会意识到那或多或少,因而依然根据平常逻辑钦点多少个视图模版并出口HTML。可是,假诺视图模板中的MvcAjaxPanel发现那么些请求实际上是三个顺应约定的AJAX请求(请留意,只有View组件意识到那是个请求的习性),则会利用新的法子来替换标准的输出。那时候模板就会依照客户端传递过来的UpdateAreaID,寻找页面上享有同样属性值的MvcAjaxPanel,有选用性地出口内容。在客户端就会有相应的JavaScript代码接收服务器端的数目,并且更新页面中的相应区域。

  原因很简单,因为不够透明。

<form method=”post”
    action=”<%= Url.Action(“Update”, new { id =
this.Product.ProductID }) %>”
    onsubmit**=”mvcAjax.submit(this,
event);”**>
 
    <table>
        <tr>
            <td>Name:</td>
            <td><%= Html.TextBox(“Name”, this.Product.Name) %></td>
        </tr>
        …
    </table>
 
    <input type=”submit”
value=”Save” />
</form>

<div id=”taskList”>
    <% foreach (Task task in Tasks) { %>
        <div>
          <% this.RenderPartial(“TaskView”, task);
%>
        </div>
    <% } %>
</div>

  服务器端的完结原理并不复杂,可是作为消除方案的另1个生死攸关部分,如何在客户端触发一个AJAX提交也是1个值得沉思的话题。UpdatePanel的办法可谓“全自动”:页面加载时将会把服务器端的Trigger音讯输出至客户端,然后在客户端截获form的交付事件,并透过UniqueID或DOM结构等措施来判定这次提交是不是该转会为AJAX格局。不过在3个ASP.NET
MVC页面中大概不会并发爆发PostBack的成分,相反会有雅量的家常链接,它们才是AJAX更新的重中之重截获指标。

    <input type=”hidden”
name=”taskID” value=”<%= Task.ID %>” />
    <input type=”submit”
class=”completeButton” name=”completeTask” value=”Done!”
/>
    <input type=”submit”
class=”deleteButton” name=”deleteTask” value=”Delete” />
    <span><%= Html.Encode(Task.Name) %></span>
 
<% this.RenderEndForm();
%>
<% Ajax.RenderScripts();
%>
</div>

  那么些AJAX消除方案原型的行使方法和行事规律已经描述完了,要是您对其具体贯彻感兴趣,可能想亲自品尝一下,能够下载小说最终的附属类小部件。附属类小部件中的解决方案包蕴多少个品类,MvcAjax为提供MvcAjaxPanel的档次,而MvcWebApp是1个常见的ASP.NET
MVC示例程序,而MvcAjaxWebApp自然就是添加AJAX效果之后的结果了。在演示中,笔者还在Master
Page中定义的菜单(即页面左边的菜系)里突显了一块当前光阴,这是为着反映MvcAjaxPanel的“3次提交,多处更新”的特征。

原稿地址:http://www.cnblogs.com/JeffreyZhao/archive/2008/04/27/try-to-build-an-updatepanel-for-asp-dot-net-mvc.html

Tag标签: ASP.NET
MVC
,UpdatePanel,MvcAjaxPanel,AJAX

  其实那是一篇迟宣布近二个月的稿子。事实上在ASP.NET MVC Preview
2公布从前小编就曾经将那篇小说的装有内容准备达成了。当时想,就等Preview
2公布吧,而真即使Preview
2公布之后却又懒得进行移植——移植了后头却又懒得写文章。这洛阳第壹拖拉机厂正是近一个月,毫无长进。恐怕工作等其余事情实在多了些,然而扪心自问,也并不曾忙到痛快淋漓。时间往往都以在点点滴滴间浪费的。唉,恐怕是自视太高,越来越不乐意写一些一般性的介绍性作品,导致可写的东西浙大学大收缩。不过话说回来,其实打算写的,甚至一再说过要写得东西也并不少,为何就不怕从未动笔呢?其实依然叁个“懒”字——当年的吃苦勤苦劲儿到哪个地方去了呢?

  也正因为这么,Nikhil建议的消除方案尤其不易,它能够和前台开发职员的自定义逻辑进行灵活地组合。其余,通过翻阅ASP.NET
MVC框架0416 Build的代码,作者发今后新本子的ASP.NET
MVC中犹如将会放到那种AJAX消除方案了——可是这也真正符合微软的一向做法,不是吧?:)

  言归正传。先解释一下标题,什么是“UpdatePanel for ASP.NET
MVC”呢?ASP.NET AJAX中的UpdatePanel相信我们都持有驾驭。可惜的是,ASP.NET
MVC框架的降生“毁灭”了汪洋依据PostBack的控件,首当其冲地恐怕便是UpdatePanel了。假使没有PostBack,UpdatePanel就错过了总体职能,甚至不如部分绑定控件,至少它们还能够够用于彰显。为UpdatePanel长吁短叹之后,我们禁不住又开首牵记UpdatePanel的优势:“透明”。在UpdatePanel的帮游痛症,落成AJAX操作对于开发职员大约统统透明。大家要做的只有是将必要AJAX更新的内容用UpdatePanel包装起来,一切都以那么优雅。

  在View和Controller中都设有对于RenderPartiel方法的调用,它们的职能便是向客户端输出一个“Partial
Template”生成的HTML代码。而在ASP.NET MVC的暗许配置中,Partial
Template即为User Control。而在TaskView这一个Partial
Template中得以看出有的帮忙方法:

<%  foreach (var
category in this.ProductCategories)
    { %>
        <li>
            <%= Html.ActionLink<ProductsController>(
                    c => c.List(category, 1),
                    category,
                    new { onclick = “mvcAjax.get(this, event)”
}
)%>
        </li><%
    } %>

相关文章