Ajax在MVC中的应用——一个简单的.NET MVC 实例(续)

      我们做任何系统都少不了前后台数据的交互，在PHP中，我们基本不会遇到前后台数据交互的问题，纯PHP就可以实现了。但是在.net里面我们通常要借助Ajax技术。通过这段时间的学习，这里也将jquey的Ajax技术应用到MVC框架中，与大家分享。同时时间有限，不能将各个场景都一一例举。

1 jQuery中的Ajax复习

“工欲善其事，必先利其器。”这里简单介绍一下jQuery中的Ajax中常用的方法。

1.1 $.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现。

其结构为：

该方法只有一个参数，但在这个对象里包含了$.ajax()所需的请求设置和回调函数等信息。

参数以key/value形式存在，所有参数都是可选的，常用参数如下表：

 

1.2  $.get()方法

$.get()方法使用GET方式来进行异步请求

它的结构：

$.get()方法参数解释如下：

1.3  $.post()方法

它与$.get()方法的结构和使用方法都相同，不过它们之间仍然有差别，这里不解释（需要的朋友请查阅相关资料进一步了解）

1.4 $.getJSON

方法定义：jQuery.getJSON( url, data, callback )

通过get请求得到json数据

·url用于提供json数据的地址页

·data(可选)用于传送到服务器的键值对

·callback(可选)回调函数，json数据请求成功后的处理函数

 

复习了jquery的Ajax之后我们就可以开始了。

2 实例

2.1 $.ajax()方法

照例，我们先在建立一个控制器命名为HomeController

同时视图的Home目录下新建一个名为Index的视图，

结构如下：

视图设计：

View Code

       <tr>
            <td>
                <input id="Access" type="button" value="Access" />
            </td>
            <td>
                <div id="browser">
                </div>
            </td>
        </tr>

脚本：

View Code

 $("#Access").click(function () {
                $.ajax({
                    type: 'GET',
                    url: '/Home/Get_Page',
                    success: function (data) {
                        $("#browser").text(data);
                    }
                });
            });

控制器中Action：

View Code

     //返回数据
        public void Get_Page()
        {
            List<string> booklist = new List<string>();
            booklist.Add("C#");
            booklist.Add("J#");
            booklist.Add("jQuery");
            booklist.Add("JavaScript");
            booklist.Add("PHP");
            foreach(string str in booklist)
            {
                Response.Write(str+"<br>");
            }
        }

效果：

 

2.2 $.post()

视图设计:

       <tr>
            <td>
                <input id="btn" type="submit" value="发送数据" />
            </td>
            <td>
                <div id="result">
                </div>
            </td>
        </tr>

脚本：

View Code

        $("#btn").click(function () {
                $.post('/Home/Page_To',
                 { text: 'Lucky Hu', number: 24 },
                 function (data) {
                     alert('Your data have been saved!');
                     $("#result").text(data); //用div接收返回的数
                 });
            });

控制器中Action:

View Code

 //接收数据
        public void Page_To()
        {
            string name = Request["text"];//
            string age = Request["number"];
            Response.Write("返回结果是:姓名:"+name+",年龄:"+age);//返回到前台数据
        }

效果：

2.3 $.getJSON()

视图设计：

View Code

<input id="studentInFo" type="button" value="获取学生信息" />
    <table id="Student">
        <thead>
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    年龄
                </td>
                <td>
                    性别
                </td>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

脚本：

View Code

  //异步请求JSON格式数据
            $("#studentInFo").click(function () {
                $.getJSON("/Home/Get_Json",
                 function (data) {
                     /*遍历*/
                     $.each(data,
                     function (index, p) {
                         var html = "<tr><td>" + p.Name + "</td>" + "<td>" + p.Age + "</td>" + "<td>" + p.Sex + "</td>" + "</tr>";
                         $("#Student tbody").append(html);
                         //alert(html);
                     })
                 });
            })

控制器中Action:

View Code

 //构造Json格式数据
        //异步请求JSON 数据
        public JsonResult Get_Json()
        {
            List<Student> slist = new List<Student>();

            DataTable dt = CreateData();
            for (int i = 0; i < dt.Rows.Count;i++ )
            {
                Student s = new Student();
                
                s.Name = dt.Rows[i]["name"].ToString();
                s.Age = int.Parse(dt.Rows[i]["age"].ToString());
                s.Sex = dt.Rows[i]["sex"].ToString();

                if (s != null)
                {
                    slist.Add(s);
                }
            }

            //JsonRequestBehavior.AllowGet 表示允许以GET方式访问,
            //最后在页面中用getJSON()方法获取 
            return Json(slist,JsonRequestBehavior.AllowGet);
        }

        //构造测试数据
        public DataTable CreateData()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("name",typeof(string));
            dt.Columns.Add("age", typeof(int));
            dt.Columns.Add("sex", typeof(string));

            for (int i = 0; i < 10;i++ )
            {
                dt.Rows.Add(new object[] {"lucky"+i,"2"+i,"男"});
                dt.AcceptChanges();
            }
            return dt;
        }

这里为了更加真实的展现这场景，添加了一个model实体，命名为Student

 

效果：

 

3 总结

      jquery的Ajax在.NET数据交互中的应用很广泛，这里只是很常见的一些用法，实际中应用更加灵活多变。
平日由于需求的局限，自己的应用并没有达到一定深度，我想随着新项目，新需求的出现，将还会有更加深入的理解和应用。