Ajax与MVC结合

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，是一种在不刷新页面的前提下实现前端和后端交互的技术。

在前面的JavaScript和Jquery课程中也有介绍过Ajax技术的应用。

一、Ajax辅助方法

AJax辅助方法：

  • 可以用于创建表单和指向控制器操作方法的链接，但不同的是，它们与服务器采用的是Ajax（异步交互）方式.
  • 当使用Ajax辅助方法时，无须编写任何脚本代码即可实现程序的异步性。
  • 使用Ajax辅助方法必须先引入jQuery.unobtrusive-ajax.js，此文件默认包含在ASP.NET MVC应用程序模板中。

Ajax.ActionLink方法:

  • 可以创建一个具有异步行为的超链接。
  • ActionLink方法的第一个参数是超链接的文本，第二个参数是操作方法的名称。
  • ActionLink方法可以通过设置AjaxOptions对象的属性值来调整Ajax请求的行为

AjaxOptions属性和作用：

属性 作用
Confirm 获取或设置提交请求之前，显示于确认窗口中的消息。
HttpMethod 获取或设置 HTTP 请求方法（“GET”或“POST”）。
InsertionMode 获取或设置指定如何将响应结果插入到目标 DOM 元素的模式。
LoadingElementId 获取或设置加载时要显示的 HTML 元素的 id 属性值。
OnBegin 获取或设置更新页面之前调用的 JavaScript 函数的名称。
OnComplete 获取或设置数据响应之后，更新页面之前，调用的 JavaScript 函数。
OnFailure 获取或设置页面更新失败时调用的 JavaScript 函数。
OnSuccess 获取或设置页面更新成功之后调用的 JavaScript 函数。
UpdateTargetId 获取或设置要使用服务器响应来更新的 DOM 元素的 ID。
Url 获取或设置要向其发送请求的 URL。

案例一：

使用Ajax.ActionLink实现超级链接，并且点击超级链接之后异步显示动态Action内容

超级链接所在Action：

public ActionResult Demo01()
{
	return View();
}

超级链接所在的View：



    
    Demo01
    
    


    

        @*在访问控制器方法的时候如果需要传递参数，可以在AjaxOptions中重新设置访问url*@
        @Ajax.ActionLink("显示名单", "Demo01PartialView", new AjaxOptions { UpdateTargetId = "div1", InsertionMode = InsertionMode.Replace, HttpMethod = "Get" })

动态内容的Action：

public ActionResult Demo01PartialView()
{
    ViewBag.Items = new string[] { "Jimmy", "Susan", "Tomas", "Helen", "Jessica" };
    return View();
}

动态内容的View（没有html,head,body等html结构代码）：


    
    
        @foreach (var item in ViewBag.Items)
            {
            
  • @item
    • 
        }

案例二：

使用Ajax.ActionLink实现超级链接，并且点击超级链接之后异步显示当前日期

超级链接所在Action：

public ActionResult Demo02()
{
	return View();
}

超级链接所在的View：



    
    Demo02
    
    


    

        @Ajax.ActionLink("获取当前日期", "Demo02GetDate", new AjaxOptions { UpdateTargetId = "div1", InsertionMode=InsertionMode.Replace, HttpMethod="Post" })

动态内容的Action：

public ActionResult Demo02GetDate()
{
    string time = DateTime.Now.ToString("yyyy年MM月dd日");
    return Content(time, "text/html");
}

（2）Ajax.BeginForm

案例一：

使用Ajax.BeginForm实现用户登录表单

登录相关Action：

public ActionResult Demo03()
{
    return View();
}
[HttpPost]
public ActionResult Demo03(string txtAccount,string txtPwd)
{
    string acc = txtAccount;
    string pwd = txtPwd;
    if (acc.Equals("") || pwd.Equals(""))
    {
        return Content("用户名或密码不能为空", "text/html");
    }
    if (acc.Equals("admin") && pwd.Equals("admin"))
    {
        return Content("", "text/html");
    }
    else
    {
        return Content("用户名或密码错误", "text/html");
    }
}

登录页面View：



    
    Demo03
    
    
    


    @*@using (Ajax.BeginForm("Demo03Login", "Home", new AjaxOptions
    {     
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "post",
        UpdateTargetId = "ErrInfo"
    }))*@
    @using (Ajax.BeginForm(new AjaxOptions
    {
        //InsertionMode = InsertionMode.Replace,
        HttpMethod = "post",
        UpdateTargetId = "ErrInfo"      
    }))
    {
        

            

                

                    用户登录
                

                

                    用户名：
                    
                

                

                    密码：
                    
                

                

                    
                    
                        
                        
                    
                

            

        

    }

登录成功之后的Action和VIew：

public ActionResult Demo03WelCome()
{
	return View();
}



    
    Demo03WelCome


    
 
        
欢迎来到*****系统

案例二：

使用Ajax.BeginForm实现员工查询功能

数据表（将数据表生成EF框架内容）：

create table Dept
(
	DeptId int primary key identity(1,1),
	DeptName varchar(50) not null
)

create table Employee
(
	EmpId int primary key identity(1,1),
	DeptId int not null,
	EmpName varchar(50) not null,
	EmpPhone varchar(50) not null,
	EmpArea varchar(50) not null,
	EmpSalary decimal(18,2) not null
)

insert into Dept(DeptName) values('开发部')
insert into Dept(DeptName) values('测试部')
insert into Dept(DeptName) values('实施部')

insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'刘德华','13887855552','武汉',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'张学友','13556528634','深圳',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'刘亦菲','13448494546','广州',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'周杰伦','13888666855','北京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'许巍','13868654219','上海',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'孙燕姿','13895133572','成都',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'朴树','13458788896','武汉',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'周润发','13554588745','南京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'李连杰','13998759654','上海',6500)

select * from Dept
select * from Employee

Action：

public ActionResult Demo04()
{
    return View();
}
[HttpPost]
public ActionResult Demo04PartialView()
{
    DBTESTEntities db = new DBTESTEntities();
    var listEmp = from emp in db.Employee select emp;
    if (!string.IsNullOrEmpty(Request["txtName"]))
    {
        string empName = Request["txtName"].ToString();
        listEmp = listEmp.Where(p => p.EmpName.Contains(empName));
    }
    ViewBag.listEmp = listEmp;
    return View();
}

View：



    
    Demo04
    
    
    


    

        @using (Ajax.BeginForm("Demo04PartialView", "Home", new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "post",
            OnFailure = "searchFail",
            LoadingElementId = "ajaxLoading",
            UpdateTargetId = "ajaxResult"
        }))
        {
            
            
            
        }
    

    

        
    






    @foreach (var item in ViewBag.listEmp)
            {
        
    }


    

        员工编号
        员工姓名
        员工电话
        所在地区
        员工工资
    

            @item.EmpId
            @item.EmpName
            @item.EmpPhone
            @item.EmpArea
            @item.EmpSalary.ToString("F2")

二、Jquery Ajax和MVC结合

以下很多案例中需要数据库支持，数据表资料如下：

create table Dept
(
	DeptId int primary key identity(1,1),
	DeptName varchar(50) not null
)

create table Employee
(
	EmpId int primary key identity(1,1),
	DeptId int not null,
	EmpName varchar(50) not null,
	EmpPhone varchar(50) not null,
	EmpArea varchar(50) not null,
	EmpSalary decimal(18,2) not null
)

insert into Dept(DeptName) values('开发部')
insert into Dept(DeptName) values('测试部')
insert into Dept(DeptName) values('实施部')

insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'刘德华','13887855552','武汉',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'张学友','13556528634','深圳',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'刘亦菲','13448494546','广州',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'周杰伦','13888666855','北京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'许巍','13868654219','上海',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'孙燕姿','13895133572','成都',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(1,'朴树','13458788896','武汉',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(2,'周润发','13554588745','南京',6500)
insert into Employee(DeptId,EmpName,EmpPhone,EmpArea,EmpSalary)
values(3,'李连杰','13998759654','上海',6500)

select * from Dept;
select * from Employee;

一下案例中部分功能可以用到Json处理类，如下：

public class MyJson
{
    #region 将对象转换为Json(支持实体、集合)
    public static string ToJsJson(object item)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        string output = serializer.Serialize(item);
        return output;
    }
    #endregion

    #region 将Json字符串转换为实体或集合
    public static T FromJsonTo(string jsonString)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        T jsonObject = serializer.Deserialize(jsonString);
        return jsonObject;
    }
    #endregion

    #region 将DataTable转换成Json字符串
    public static string DataTableToJson(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        //jsonBuilder.Append("{\"");
        //jsonBuilder.Append(dt.TableName.ToString());
        //jsonBuilder.Append("\":[");

        jsonBuilder.Append("[");
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            jsonBuilder.Append("{");
            for (int j = 0; j < dt.Columns.Count; j++)
            {
                jsonBuilder.Append("\"");
                jsonBuilder.Append(dt.Columns[j].ColumnName);
                jsonBuilder.Append("\":\"");
                jsonBuilder.Append(dt.Rows[i][j].ToString());
                jsonBuilder.Append("\",");
            }
            jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            jsonBuilder.Append("},");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        jsonBuilder.Append("]");

        //jsonBuilder.Append("]");
        //jsonBuilder.Append("}");
        return jsonBuilder.ToString();
    }
    #endregion

    #region 将DataRow转换成Json数据
    public static string DataRowToJson(DataTable dt)
    {
        StringBuilder jsonBuilder = new StringBuilder();
        jsonBuilder.Append("{");
        for (int j = 0; j < dt.Columns.Count; j++)
        {
            jsonBuilder.Append("\"");
            jsonBuilder.Append(dt.Columns[j].ColumnName);
            jsonBuilder.Append("\":\"");
            jsonBuilder.Append(dt.Rows[0][j].ToString());
            jsonBuilder.Append("\",");
        }
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        jsonBuilder.Append("},");
        jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
        return jsonBuilder.ToString();
    }
    #endregion
}

（1）检查用户名是否可用

Action：

public ActionResult Demo05()
{
    return View();
}
public ActionResult Demo05Check()
{
    //假设liubei,guanyu,zhangfei三个用户名已经被注册过
    string acc = Request["acc"].ToString();
    if (acc.Equals(""))
        return Content("用户名不能为空!", "text/html");
    if (acc.Equals("liubei") || acc.Equals("guanyu") || acc.Equals("zhangfei"))
    {
        return Content("用户名已经被注册!", "text/html");
    }
    else
    {
        return Content("恭喜,用户名可以使用!", "text/html");
    }
}

View：



    
    Demo05
    
    


    
 
        
用户名验证

        

            用户名:

（2）查询数据列表

Action：

public ActionResult Demo06()
{
    return View();
}
//使用JsonResult返回查询数据(不需要Json工具类)
public JsonResult Demo06Search()
{
    DBTESTEntities db = new DBTESTEntities();
    var listView = from emp in db.Employee
                    join dept in db.Dept on emp.DeptId equals dept.DeptId
                    select new
                    {
                        EmpId = emp.EmpId,
                        DeptId = emp.DeptId,
                        DeptName = dept.DeptName,
                        EmpName = emp.EmpName,
                        EmpPhone = emp.EmpPhone,
                        EmpArea = emp.EmpArea,
                        EmpSalary = emp.EmpSalary
                    };
    if (!string.IsNullOrEmpty(Request["txtName"]))
    {
        //linq to entity,不能在lambda里面进行int.parse,或者其它的显示隐式的转换
        string txtName = Request["txtName"].ToString();
        listView = listView.Where(p => p.EmpName.Contains(txtName));
    }
    return Json(listView, JsonRequestBehavior.AllowGet);
}

View：



    
    Demo06

（3）返回多个表数据

组合类：

public class DeptAndEmp
{
    public List ListDept { get; set; }
    public List ListEmp { get; set; }
}

Action：

public ActionResult Demo07()
{
    return View();
}

public ActionResult Demo07Search()
{
    DBTESTEntities db = new DBTESTEntities();
    var listDept = from dept in db.Dept select dept;
    var listEmp = from emp in db.Employee select emp;

    DeptAndEmp deptEmp = new DeptAndEmp();
    deptEmp.ListDept = listDept.ToList();
    deptEmp.ListEmp = listEmp.ToList();

    //方案一: 使用工具类返回数据
    //string jsonResult = MyJson.ToJsJson(deptEmp);
    //return Content(jsonResult);

    //方案二:使用Json.NET - Newtonsoft，第三方工具返回数据
    //string jsonResult = JsonConvert.SerializeObject(deptEmp);
    //return Content(jsonResult);

    //方案三:使用MVC中Json进行返回数据
    return Json(deptEmp, JsonRequestBehavior.AllowGet);
}

View：



    
    Demo07

（4）自定义Json格式

Action：

public ActionResult Demo08()
{
    return View();
}
public ActionResult Demo08Search()
{
    //完全自定义Json格式
    DBTESTEntities db = new DBTESTEntities();
    var listDept = from dept in db.Dept select dept;
    var listEmp = from emp in db.Employee select emp;
    JArray jArrDept = new JArray();
    foreach (var item in listDept)
    {
        JObject obj = new JObject();
        obj.Add("DeptId", item.DeptId);
        obj.Add("DeptName", item.DeptName);
        jArrDept.Add(obj);
    }
    JArray jArrEmp = new JArray();
    foreach (var item in listEmp)
    {
        JObject obj = new JObject();
        obj.Add("EmpId", item.EmpId);
        obj.Add("DeptId", item.DeptId);
        obj.Add("EmpName", item.EmpName);
        obj.Add("EmpPhone", item.EmpPhone);
        obj.Add("EmpArea", item.EmpArea);
        obj.Add("EmpSalary", item.EmpSalary);
        jArrEmp.Add(obj);
    }
    JObject jObj = new JObject();
    jObj.Add("Dept", jArrDept);
    jObj.Add("Emp", jArrEmp);
    string jsonResult = JsonConvert.SerializeObject(jObj);
    return Content(jsonResult);
	
    //部分自定义Json格式
    //DBTESTEntities db = new DBTESTEntities();
    //var listDept = from dept in db.Dept select dept;
    //var listEmp = from emp in db.Employee select emp;
    //JObject jObj = new JObject();
    ////jObj.Add("Dept", (JArray)JsonConvert.DeserializeObject(JsonConvert.SerializeObject(listDept)));
    ////jObj.Add("Emp", (JArray)JsonConvert.DeserializeObject(JsonConvert.SerializeObject(listEmp)));
    //jObj.Add("Dept", JArray.Parse(JsonConvert.SerializeObject(listDept)));
    //jObj.Add("Emp", JArray.Parse(JsonConvert.SerializeObject(listEmp)));
    //string jsonResult = JsonConvert.SerializeObject(jObj);
    //return Content(jsonResult);
}

View：



    
    Demo08
mvcAJAX

相关

.net mvc 获取acion 返回类型

SpringMVC的请求和响应ModelAndView,Model,ResponseBody

SpringMVC、SpringMVC XML配置（纯XML方式）

spring MVC注解深入研究

extjs ajax 同步 及 confirm 确认提示框问题

Asp.Net Mvc + ComBoost.Mvc快速开发

前端MVC Vue2学习总结（六）——axios与跨域HTTP请求、Lodash工具库

设计模式-结构型模式， mvc 模型视图控制器模式（8）

Spring MVC 学习总结（十一）——IDEA+Maven+多模块实现SSM框架集成

前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

Ajax

SpringMVC注解解析和项目配置

标签