（.NET进阶九）分布式图/JSON/Ajax异步/AjaxHelper

最新推荐文章于 2021-08-05 14:38:43 发布

原创最新推荐文章于 2021-08-05 14:38:43 发布 · 331 阅读

1 ·

CC 4.0 BY-SA版权

学习笔记专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了ASP.NET MVC框架下分布视图的应用、Ajax技术的整合与使用技巧，包括AjaxHelper的简化开发流程及无刷新删除操作的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、分布视图的使用

简介
1. 将页面中公共部分封装的视图技术，实现内容重用（和母版视图不同）
2. 可以出现在其他视图的“任何位置”，相当于ASP.NET WEBForm中的用户控件
使用步骤
1. 编写分布式图：和普通视图实现方式类似
2. 在视图中使用分布视图：使用专用的HtmlHelper方法

//创建的分部视图,名称为LoginedUser
@model Model.SysAdmin
@if(Model != null)
{
    <label>@Model.AdminName</label>
}


//控制器中新增控制方法
public ActionResult GetCurrentUser()
{
    SysAdmin objAdmin = (SysAdmin)Session["CurrentAdmin"];
    return PartialView("LoginedUser",objAdmin);//视图名称,实体对象
}

//使用分布视图
<label>当前用户：@Html.Action("GetCurrentUser","SysAdmin ")</label>//动作方法,控制器名称
或
<label>当前用户：@Html.Partial("LoginedUser",(SysAdmin)Session["CurrentAdmin"])</label>//视图名称,用户信息

二、ASP.NET MVC中的Ajax

//返回纯文本
[HttpPost]
public ActionResult DeleteStudent(int? studId)
{
    int result = new StudentManage().DelateStudent(id);
    if(result == 1)
    {
        return Content("1");//表示成功
    }
    else
    {
        return Content("0")//表示失败
    }
 
}

//返回HTML代码
ublic ActionResult DeleteStudent(int? studId)
{
    int result = new StudentManage().DelateStudent(id);
    if(result == 1)
    {
        return this.Content("<script>window.location="'+Url.Action("Success","Student")+'"</script>");//返回构造的HTML
    }
    
     return PartialView("StudentList");//返回局部视图
    
}

返回JSON数据格式
- 使用场合
  - 客户端需要复杂结构的数据，比如集合，这时可以使用JSON格式和XML格式
  - 对于ASP.NET MVC来讲，可以轻松的借助控制器方法输出JSON格式的数据
- 认识JSON格式数据
  - JSON(JavaScript Object Notation)是一种轻量级的数据交互格式
  - JSON采用完全独立于语言的文本格式,是理想的数据交换语言,易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)
```
{
    "student":[
                {"Name":"张三","Stuid":"1001","Age":"20"},
                {"Name":"李四","Stuid":"1002","Age":"22"},
                {"Name":"王五","Stuid":"1003","Age":"21"}
              ]
}
```
- JSON语法
  - 数据在"名称/值"对中
  - 数据由"逗号"分割
  - "花括号"保存对象
  - "方括号"保存数组

实际操作

//动作方法
public ActionResult GetStuList(string className)
{
    List<Student> stuList = new StudentMange().GetStudentByClass(className);
    //JSON格式转换
    JavaScriptSerializer jss = new JavaScriptSerializer();
    string stringList = jss.Serializer(stuList);//将当前list对象集合转化为字符串(JSON)
    return Json(stringList,JsonRequestBehavir.AllowGet);//JSON字符串，请求行为
}

//视图中接收
1.引入脚本
<script> src="~/Scripts/jquery-1.7.1.min.js"</script>
<script>
    $(function(){
        $("#submitQuery").click(function(){
                $("#stuList").empty();//清空之前的查询结果
                var cName = $("#className").val();//获取班级名称
                $.post("/Student/GetStuList",{"className":cName},function(data,status){
                    //获取返回的对象集合并转化成jQuery能识别的JSON
                    var list = $.parseJSON(data);
                    for(var i=0;i<list.length;i++)
                    {
                        var li = "<li>"+list[i].SthdentId+"&nbsp;"
                                +list[i].stuName+"&nbsp;"
                                +"</li>";"
                        $("#stuList").append(li);//追加li
                    }
                });
            });
        });


</script>

总结

JSON方法定义

Protected internal virtual JsonResult Json(
        object data,//要序列号的对象
        string contentType,//内容类型
        Encoding contentEncoding,//内容编码
        JsonRequestBehavir behavior//JSON请求行为
)

参数:JSONRequestBehavir
- 枚举类型
- 包含AllowGet和DenyGet两种值,分别代表允许Get请求和不允许Get请求
- 提示:如果客户端是Get请求,则务必写参数

分类	特点	应用场景
纯文本	适合保存单个数据,数据传输量小,客户端处理较多	保存数据处理结果,比如0或1表识等
结构化数据(JSON等)	适合保存一行或多行数据,数据传输量较小,客户端处理较多	展示列表数据,客户端使用jQuery网格或树等插件来展示数据
HTML(分布式图等)	任意数据,数据传输量大,客户端处理较少	显示一定结构的任意内容,列表数据,表单等

三、AjaxHelper使用

概述

基于jQuery实现Ajax特点
1. 需要大量js内容
2. 一般都会通过$.ajax()和$.post()提交
AJaxHelper 简化Ajax开发
1. 和HtmlHelper对应,辅助输出具有Ajax功能的视图
2. 视图类型包含为Ajax的AjaxHelper类型对象

构造无刷新表单的方法

主要属性	说明
string UpdateTargetId	服务器响应来更新的DOM元素的ID
string Confirm	提交请求之前显示在确认窗口中的消息
string HttpMethod	HTTP请求方法(Get或post)
InsertionMode InsertionMode	将响应插入目标DOM元素的模式
int LoadingElementDuration	控制在显示或隐藏加载元素时的动画持续时间
string OnBegin	在更新页面之前调用的JavaScript函数
string OnSuccess	在成功更新页面之后调用的JavaScript函数

无刷新提交

//视图界面
1.添加jQuery和ajax引用
2.代码
@using(Ajax.BeginForm("Add",new AjaxOptions{UpdateTargetId = "AddStuMsg"}))
{
    .......



    <a id = "AddStuMsg">//显示结果
}


//动作方法
public ActionResult Add(Student objStudent)
{
    Student submitStudent = objStudent;
    
    return this.Content("返回成功!");
}

应用延伸

<Script type="text/javascript">
    function.addSuccess(data){
        $("#AddStuMsg").html(data).show().hide(5000);
    }


</Script>

@using(Ajax.BeginForm("Add",new AjaxOptions{OnSuccess="addSuccess",Confirm = "确认提交吗?"}))
{
    .......



    <a id = "AddStuMsg">//显示结果
}

判断请求类型

//动作方法
public ActionResult Add(Student objStudent)
{
    Student submitStudent = objStudent;
    if(Request.IsAjaxRequest())//判断是否为ajax请求
    {
        return this.Content("返回成功!");
    }
    else
    {
        return this.Content("<Script>alert('保存成功');window.location="'+Url.Action("Index","Student")+'"</Script>")
    }
}

四、无刷新删除对象

//视图界面
<div class="stuList" id="@id.StudentId">
...
    <div class="stuItem">
        <a href="#" name="@stu.StudengId" class="delstu">删除</a>
    </div>
</div>


<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    $(function(){
        $(".delstu").click(function(){
            if(!confirm("确认删除吗?")) return;
            var $stuId = $(this).attr("name");
            $.post("/Student/Del",{stuId:$stuId},function(data,status){
                $("#"+$stuId).remove();//同步删除列表
            });
        });
    });
    
</script>


//动作方法
public ActionResult Del(string stuId)
{
    int result = new StudengManage().DelteByStuId(stuId);
    if(result == 1)
    {
        return Content("删除成功!")
    }
    else
    {
        return Content("删除失败!")
    }

}