ASP.NET MVC:Ajax-服务器端

更多
2019年08月06日 14点46分 作者:叶飞 修改

历史和现状

名称由来:Asynchronous Javascript And XML:

  • Asynchronous :异步
  • JavaScript:通过Javascript技术实现和应用
  • XML:XMLHttpRequest对象,在IE5中首次引入,是Ajax的核心

可以说,没有Ajax,就没有JavaScript的今天!

  1. 微软引入:
  2. 惊艳全场:Google提示和Google地图
  3. 蓬勃发展:
    • JQuery极大的简化了Ajax的应用
    • 目前的“前后端分离”运动,正试图使用Ajax作为前后台传输的唯一方式其阻碍:
      1. JavaScript语言本身的缺陷
      2. SEO需要

题外:Ajax甚至是ASP.NET WebForm衰落的一个重要原因(富服务器端 vs 富客户端)

主要特点:

  • 仍然是一个HTTP请求,所以遵守HTTP协议
  • 无页面刷新的交互,提升了用户体验
  • 可以只获取“部分页面”甚至是简单数据,降低了流量消耗


MVC内置Ajax


[Remote]:远程验证

需要using System.Web.Mvc;

  1. 首先在需要验证的属性上添加[Remote]特性,指定action/controller等
            [Remote("IsNameDuplicated", "Register", ErrorMessage = "* 用户名重复", HttpMethod = "GET")]
            public string UserName { get; set; }
  2. 然后按照上述action和controller,添加一个Action:
            //必须返回一个JsonResult
            public JsonResult IsNameDuplicated(string UserName)//UserName就是需要验证的属性名称
            {
                return Json(UserName != "zyfei",  //true:通过验证
                    JsonRequestBehavior.AllowGet);
            }
  3. 生成的HTML代码里面就会包含相关信息:
    <input data-val="true" data-val-remote="* 用户名重复" data-val-remote-additionalfields="*.UserName" data-val-remote-type="GET" 
    data-val-remote-url="/Register/IsNameDuplicated" id="UserName" name="UserName" type="text" value="">
  4. 当用户输入用户名后,焦点移出输入框,Ajax请求会自动发起:


Ajax Form

首先需要引入jquery.unobtrusive-ajax.js

<script type="text/javascript" src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
使用Ajax.BeginForm
@using (Ajax.BeginForm("Post", "Problem", 
    new { id = ViewContext.RouteData.Values["id"] }, 
    new AjaxOptions
    {
        Confirm = "确认提交",   //提交之前确认
        AllowCache = false,
        HttpMethod = "POST",
        UpdateTargetId = "comments",    //返回数据在id=comments的DOM元素中更新
        InsertionMode = InsertionMode.InsertAfter,  //更新方式
        LoadingElementDuration = 3,
        LoadingElementId = "wait",
        OnBegin = "alert('开始Ajax提交了')",
        OnSuccess = "alert('提交成功')",
        OnFailure = "alert('提交失败')",
        OnComplete = "alert('提交完成,无论成功还是失败')",
    }))
{
    @Html.TextAreaFor(m => m.NewPost)
    <button type="submit">提交</button>
}



作业

使用Jquery的post()实现求助的应答


作业点评

  • setAttribute 绑定事件
  • 命名:paole/chulai/div/score1……
  • 尽可能短尽可能快的提交
  • 乱写注释不如不写注释
  • 不要给setTimeout()传字符串参数
  • z-index仅对设置了position的元素起作用




源栈培训 ASP.NET Ajax
赞: 7 踩: 2

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

ASP.NET


RazorPage

微软推荐的、最新的、基于Razor页面和.NET core的新一代Web项目开发技术,包括Razor Tag Helper、Model绑定和Validation、Session/Cookie、内置依赖注入等……

MVC

过去两年间最流行的、基于.NET Framework和MVC模式的ASP.NET MVC框架,主要用于讲解安全、性能、架构和各种实战功能演示……

其他Web项目

包括WebForm和WebApi

全部
关键字



帮助

反馈