浅析Asp.net MVC 中Ajax的使用(2)

@* --------------------------------------------------------- 需要手工为Form添加些属性标签，用于锚点 模仿MVC框架的构建自己的“非介入式Javascript”模式 -------------------------------------------------------*@ <form method="post" action="https://www.jb51.net/@Url.Action("Index")" data-otf-ajax="true" data-otf-ajax-updatetarget="#restaurantList"> <input type="search" /> <input type="submit" value="按名称搜索" /> </form>

生成的form为：

<form data-otf-ajax-updatetarget="#restaurantList" data-otf-ajax="true" action="/Reviews" method="post" novalidate="novalidate">

第二步：添加处理表单的Action:

　　　　这里与1.1的第二步一样。

第三步：添加Js处理表单：

$(function () { var ajaxFormSubmit = function() { var $form = $(this); var ajaxOption = { type: $form.attr("method"), url: $form.attr("action"), data: $form.serialize() }; $.ajax(ajaxOption).done(function(data) { var updateTarget = $form.attr("data-otf-ajax-updatetarget"); var $updateTarget = $(updateTarget); if ($updateTarget.length > 0) { var $returnHtml = $(data); $updateTarget.empty().append(data); $returnHtml.effect("highlight"); } }); return false; }; $("form[data-otf-ajax='true']").submit(ajaxFormSubmit); });

注意：

　　所谓的“非介入式Javascript”模式，是指假如没有添加这一步，表单照样能被处理，只是没用到Ajax而已。

您可能感兴趣的文章: