WEB开发技术

第21章 URL和Ajax辅助器方法

一、创建基本的链接和URL

  视图最基本的任务之一是创建链接或URL,使用户能够随之进入应用程序的其他部分。

  辅助器生成的链接或URL的好处是:输出来自路由配置,当路由发生改变全自动反映在链接和URL中。

  渲染URL的HTML辅助器

描述 示例 输出
相对于应用程序的URL Url.Content(“~/Content/Site.css”) /Content/Site.css
链接到指定的动作控制器 Html.ActionLink(“My Link”, “Index”, “Home”) <a href=”/“>My Link</a>
动作URL Url.Action(“GetPeople”,”People”) /People/GetPeople
使用路由数据的URL

Url.RouteUrl(

new {controller = “People”, action = “GetPeople”})

/People/GetPeople
使用路由数据的链接

Html.RouteLink(“My Link”,

new{controller=”People”,action=”GetPeople”})

<a href=”/People/GetPeople“>My Link</a>
链接到指定的路由

Html.RouteLink(“My Link”,”FormRoute”,

new{controller=”People”,action=”GetPeople”})

<a href=”/app/forms/People/GetPeople“>My Link</a>

二、MVC的渐进式Ajax

  异步JavaScript与XML: (最重要作用)后台请求服务器数据,而不必重载Web页面的一种模型。

  MVC框架的渐进式Ajax特性基于JQuery的。

    注:在真正的Internet连接上运行的实际应用程序,同步表单可能会让使用Web应用程序的用户很崩溃,会占用服务器的大量带宽和处理能力。

    第一步:在web.config中启用渐进式Ajax特性

      <appSettings>
        <add key="webpages:Enabled" value="false" />
        <add key="UnobtrusiveJavascriptEnable" value="true"/>
      </appSettings>

   第二步:模板页中头部引用JQuery库(min版本)和 jquery.unobtrusive-ajax库(min版本)
      
<script src="~/Scripts/jquery-1.7.1.js"></script>
   <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
   第三步:修改初始请求方法,新增控制器中动作方法(用于ajax)和分部视图
      (通过一个子动作仅获取想要的数据,通过新的视图对相关标签内容进入填充)
      (1.将视图进行分离,分为框架视图和分部视图,通过新的动作方法只请求分部视图的内容)
      (2.通过Ajax对数据进入处理,请求新的动作方法获取数据)
      (3.确认更新的父级标签(命名),设置AjaxOptions参数,使用Ajax.BiginForm替换Html.BeginForm) 
 public ActionResult GetPeople(string selectedRole = "All")
        {
            return View((object)selectedRole);
        }
@using HelperMethods.Models
@model string
@{
    ViewBag.Title = "GetPeople";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tableBody"
    };
}

<h2>Get People</h2>
<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Role</th>
    </tr>
    </thead>
    <tbody id="tableBody">
        @Html.Action("GetPeopleData",new{selectedRole=Model})
    </tbody>
</table>

@using (Ajax.BeginForm("GetPeopleData",ajaxOpts))
{
    <div>
        @Html.DropDownList("selectedRole", new SelectList(
       new[] { "All"}.Concat(Enum.GetNames(typeof(Role)))))
        <button type="submit">查询</button>
    </div>
}
       public PartialViewResult GetPeopleData(string selectedRole = "All")
        {
            IEnumerable<Person> data = personData;
            if (selectedRole != "All")
            {
                Role selected = (Role) Enum.Parse(typeof (Role), selectedRole);
                data = personData.Where(p => p.Role == selected);
            }
            return PartialView(data);
        }
@using HelperMethods.Models
@model IEnumerable<Person>

@foreach (Person p in Model)
{
    <tr>
        <td>@p.Name</td>
        <td>@p.Role</td>
    </tr>
}

AjaxOptions属性

属性 描述
Confirm 在形成Ajax请求前,设置显示给用户的确认窗口信息
HttpMethod 设置用来形成请求的HTTP方法(Get 或 Post)
InsertionMode 指定从服务器接受的内容以何种方式插入到HTML。枚举:InsertAfter、InsertBefore、Replace(默认)
LoadingElementId 指定HTML元素的ID,这是执行Ajax请求期间要显示的HTML元素
LoadingElementDuration 指定动画的持续时间,用于显示由LoadingElementId指定的元素
UpdateTargetId 设置HTML元素的ID,从服务器接收的内容将插入到该元素中
Url 设置所请求的服务器端URL

  1.确保在禁用JS的情况下正常工作,使用AjaxOption.Url属性,以便指定异步请求的目标Url作为Ajax.BeginForm方法参数,而不是以动作名称作为其参数。

  2.在Ajax请求期间给用户提供反馈:设置LoadingElementId,LoadingElementDuration属性;添加(默认隐藏)反馈显示的区域。

            LoadingElementId=”loading”,LoadingElementDuration=1000,

            <div id=”loading” class=”load” style=”display:none”></div>

三、创建Ajax链接(可降级)    

<div>
 @foreach(string role in Enum.GetNames(typeof(Role))){
    <div class="ajaxLink">
        @Ajax.ActionLink(role,"GetPeople",
         new{selectRole=role},
         new AjaxOptions{
          UpdateTargetIde="tableBody",
          Url=Url.Action("GetPeopleData",new{selectRole=role})
       })
   </div>  
}
</div> 

四、使用Ajax回调

       通过调用JavaScript函数,在Ajax请求生命周期中的各个点上给予反馈。

AjaxOptions回调属性

属性 JQuery事件 描述
OnBigin beforeSend 在发送请求之前立即调用
OnComplete complete 请求成功时调用
OnFailure error 请求失败时调用
OnSuccess success 请求已完成时调用,不管请求是否成功或失败

五、通过Ajax回调处理Json数据,更新相关模板。

  1.对控制器添加Json支持

  注:只有返回的数据不是私有(特殊敏感)的,才使用JsonRequestBehavior.AllowGet。

  2.在浏览器中处理Json数据

  使用AjaxOption类中的OnSuccess回调属性,指定一个JS函数,用于处理获得的Json数据。

      优化Json数据:

  1.为Json编码准备数据对象(新建匿名对象赋值)

  2.在动作方法中检测Ajax请求,合并成一个动作方法通过判断,返回HTML或Json数据的请求。

源码:http://yunpan.cn/ccvvsjTacNvWc 访问密码 0d10
未经允许不得转载:WEB2.0开发设计 » 第21章 URL和Ajax辅助器方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们