在ASP.MVC中使用Ajax

      Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件,让我们跟底层的HTML有了更多的亲近。可以更自由、更灵活的去控制HTML的结构、样式和行为。Asp.net MVC可以更便捷的使用Ajax,本文针对开发过程中的技术进行了简单的总结并制作了一个小练习进行巩固。

1.准备工作

使用VS创建MVC应用程序,可以使用空模板,添加Home控制器以及对应的视图

使用NuGet进行包管理,添加Jquert、easyui等引用

2.开始制作Demo

UI:

html和JS代码如下:

  1 @{
  2     ViewBag.Title = "Index";
  3 }
  4 
  5 <html>
  6 <head>
  7     <title>
  8     </title>
  9     <script src="~/Script/jquery.min.js"></script>
 10     <link href="~/Script/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
 11     <script src="~/Script/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
 12     <script src="~/Script/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
 13     <script>
 14         $(function () {
 15             //使用$.ajax请求
 16             $("#btn").click(function () {
 17                 var getText = $("#txt").val();
 18                 $.ajax({
 19                     url: 'GetGradeByName',
 20                     type: 'post',
 21                     data: { "name": getText },
 22                     success: function (data) {
 23                         if (data) {
 24                             alert(MSG(data))
 25                         }
 26                         else {
 27                             alert("没找到")
 28                         }
 29                     }
 30                 })
 31             })
 32 
 33             //使用$.post请求
 34             $("#btn2").click(function () {
 35                 var getText = $("#txt").val();
 36                 $.post("/Home/GetGradeByName", { "name": getText }, function (data) {
 37                     if (data) {
 38                         alert(MSG(data))
 39                     }
 40                     else {
 41                         alert("没找到")
 42                     }
 43                 })
 44             })
 45 
 46             //使用$.get请求
 47             $("#btn1").click(function () {
 48                 var getText = $("#txt").val();
 49                 $.get("/Home/GetGradeByName?name=" + getText, function (data) {
 50                     if (data) {
 51                         alert(MSG(data))
 52                     }
 53                     else {
 54                         alert("当前学生不存在")
 55                     }
 56                 })
 57             })
 58 
 59             $("#a1").click(function () {
 60 
 61                 $.ajax({
 62                     url: 'JsonObject',
 63                     success: function (data) {
 64                         alert("json字符串是" + data.list);
 65                         var jsonObj = $.parseJSON(data.list);
 66                         alert("长度是" + jsonObj.length);
 67 
 68                         $("#tb").datagrid({
 69                             columns: [[
 70                                   { field: 'stuName', width: 290 },
 71                                 { field: 'stuGrad', width: 290 }
 72                               
 73                             ]],
 74                             pagination: true
 75                         })
 76                         $('#tb').datagrid('loadData', { total: jsonObj.length, rows: jsonObj });
 77 
 78                     }
 79                 })
 80             })
 81 
 82         })
 83         function MSG(s) {
 84             return "恭喜!您的成绩是:" + s;
 85         }
 86     </script>
 87 </head>
 88 <body>
 89     <h1 style=" color:red">ASP.MVC关于Ajax小练习</h1>
 90     @Html.Label("学生姓名:")
 91     @Html.TextBox("txt")
 92     <input id="btn" type="button" value=" $.ajax查询" />
 93     <input id="btn1" type="button" value="$.get查询" />
 94     <input id="btn2" type="button" value="$.post查询" />
 95     <br>
 96     @Html.Label("提示:可以输入 小增、小舒、小郑、小陈", new { style = " color:#ccc" })
 97     <br>
 98     <a id="a1" href="javascript:void(0)">$.ajax返回json字符串</a>
 99     <table id="tb" style="width:50%"></table>
100 </body>
101 </html>

HomeController代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace Ajax.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

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

        /// <summary>
        /// 说明:根据学生姓名获取成绩
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>      
        public string GetGradeByName(string name)
        {
            StudentGrade studentGrade = new StudentGrade();
            IList<StudentGrade> getList = studentGrade.getAllGrades();
            string s="";
            foreach (StudentGrade model in getList)
            {
                if (model.stuName == name)
                {
                    s = model.stuGrad;
                }
            }
            string sss = s;
            return s;
        }

        /// <summary>
        /// 返回学生列表的Jason字符串
        /// </summary>
        /// <returns></returns>
        public ActionResult JsonObject()
        {
            StudentGrade studentGrade = new StudentGrade();
            IList<StudentGrade> getList = studentGrade.getAllGrades();
            JsonResult jsonResult = new JsonResult();
            jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string st =HttpUtility.HtmlDecode( serializer.Serialize(getList));
            jsonResult.Data = new
            {
                list = st
            };
            return jsonResult;
        }
    }

    /// <summary>
    /// 学生成绩帮助类
    /// </summary>
    public class StudentGrade
    {
        public StudentGrade() { }        
       
        public IList<StudentGrade> getAllGrades()
        {
            IList<StudentGrade> list = new List<StudentGrade>()
           {
               new StudentGrade(){
                 stuGrad="85",
                 stuName="小增"
               },
                  new StudentGrade(){
                 stuGrad="100",
                 stuName="小郑"
               },
               new StudentGrade(){
               stuName="小舒",
               stuGrad="90"
               },
                 new StudentGrade(){
                 stuGrad="60",
                 stuName="小陈"
               }
           };
            return list;

        }
        public string stuName { get; set; }

        public string stuGrad { get; set; }
    }
}

$.ajax的参数简单的说明如下:

http://blog.sina.com.cn/s/blog_4f925fc30100la36.html

3.演示

 (1) 通过实体帮助类构造泛型 学生 对应 成绩列表进行显示(模拟数据库操作)

 (2) 用户可以输入学生姓名进行成绩查询

 (3) 输出查询结果,如果学生不存在则提示

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

Java企业微信开发_05_消息推送之被动回复消息

微信加解密包 下载地址:http://qydev.weixin.qq.com/java.zip      ,此包中封装好了AES加解密方法,直接调用方法即可。

38320
来自专栏流媒体

MediaCodec进行AAC编解码(文件格式转换)

AAC,全称Advanced Audio Coding,是一种专为声音数据设计的文件压缩格式。与MP3不同,它采用了全新的算法进行编码,更加高效,具有更高的“性...

28150
来自专栏积累沉淀

Java设计模式(十九)----备忘录模式

备忘录模式 一、 概念 二、 结构 三、 分类 1.”白箱”备忘录模式的实现 2.“黑箱”备忘录模式的实现 3.“多重”检查点 4....

20190
来自专栏落影的专栏

使用AudioToolbox播放AAC

前言 使用VideoToolbox硬编码H.264 使用VideoToolbox硬解码H.264 使用AudioToolbox编码AAC 在上一篇中,介绍...

44340
来自专栏技术博客

MVC Html.RenderPartial和Html.partial

①Html.Partial是HtmlHelper的扩展方法,而Html.RenderPartial是HtmlHelper自带方法,两者功能相近。但

19140
来自专栏Golang语言社区

50. RESTful API的简单实现 | 厚土Go学习笔记

RESTfull API是现在很流行的 API 设计风格。众所周知的 HTTP 1.1规范正是基于 REST 架构风格的指导原理来设计的。需要注意的是,REST...

29540
来自专栏我的博客

左右滚动,带控制按钮

今天需要一个左右滚动图的js,从网上着了半天,修改调试了半天才弄好,于是就收藏了。不过以后真得看看js了 关键代码有注释:(红色部分是我加的注释) <table...

43460
来自专栏everhad

设计模式:Builder

简介 建造者模式(Builder),将一个复杂对象的表示和它的构建分离,这样同样的构造过程可以创建出不同的对象状态。 类图 下面的Product是要创建的对象的...

18390
来自专栏web编程技术分享

【Java框架型项目从入门到装逼】第二节 - Spring框架 AOP的丧心病狂解说,你喜欢露娜的月下无限连吗?据说露娜要重做,玩个屁,劳资退游吃鸡去了,谢谢。

29650
来自专栏c#开发者

MSMQ突破4M限制的方法

    在默认情况下msmq 3.0(windows xp ,windows 2003)最大单个消息(Message size)大小4M;(包括正文和全部指定属...

38040

扫码关注云+社区

领取腾讯云代金券