通过JQuery调用MVC的Controller方法来实现无刷新操作

　　和上次（第一次）写博文过了很久，期间有几次想写，也有几次感觉不错的心得体会，但是还是没找到静下来的时间。再有想法写博文的时候，已经毕业了。呵呵，闲话不说了。还是直奔主题吧。

　　公司准备开发一个通过远程访问的服务端项目，之前没有使用过MVC，所以想知道能够只使用M层和C层，然后通过Jquery来调用C层的方法。经理说让先做一个demo出来，就先实现对数据的CURD吧。说句实话，我对mvc也是不了解，只好边学边做。

　　先说一下我的思路，这个项目要分为服务端和客户端（汗颜啊）。就先从Server开始吧。新建一个数据库，就一张表，UserInfo,里面有UserID,UserName,UserGender,UserAge,UserEamil共五个字段。在里面先录入一些数据，作为测试用。

　　新建一个项目，命名为MvcServer,然后在Module中新建项目，选择ADO.NET Entity Data Module,命名为MvcServer。继续点击下一步，选择Generate From Database，下一步，选择刚才创建的数据，然后选中上面所有的checkbox，一路next，最后Finsh。这样，我们就完成对对数据实体的映射。

 下面我们在Module层创建一个名为UserReposity的用户操作库，将此放在Module层，可以方便在Controller中调用。下面是代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcServer.Models
{
    public class UserRepository
    {
        private JQueryAndMVCEntities entity = new JQueryAndMVCEntities();

        public IQueryable<UserInfo> FindAllUsers()
        {
            return entity.UserInfoes;
        }

        public UserInfo FindUserByID(int id)
        {
            return entity.UserInfoes.FirstOrDefault(u => u.UserID == id);
        }

        public UserInfo FindUserByName(string Name)
        {
            return entity.UserInfoes.FirstOrDefault(u => u.UserName == Name);
        }
        public void AddUser(UserInfo user)
        {
            entity.UserInfoes.AddObject(user);
        }

        public void DeleteUser(UserInfo user)
        {
            entity.UserInfoes.DeleteObject(user);
        }

        public void Save()
        {
            entity.SaveChanges();
        }
    }
}

完成这里的代码之后，其实，主要的数据操作方法已经完成了，下面我们就对Controller进行完善。

　　右键点击Controllers，选择Add，添加一个控制器，命名为UserContoller，点击确定。在UserContoller页面，我们引用刚才的Module层，Using MvcServer.Module;

这里面主要实现了增删改查的方法（也可以成为controller对外的接口），因为仅作为验证demo，所以写的很粗糙，大家莫拍砖，此文也仅为像我这样的新手提供一点帮助。

UserController的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcServer.Models;

namespace MvcServer.Controllers
{
    public class UserController : Controller
    {
        //
        // GET: /User/

        UserRepository userRepository = new UserRepository();
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult OneUser()
        {
            UserInfo User= userRepository.FindUserByID(1);
            return Content(User.UserName+" "+User.UserGender);
        }
        public ActionResult GetUserByName(string Name)
        {
            UserInfo user = userRepository.FindUserByName(Name);
            return Json(user);
        }

        public ActionResult GetUserByID(string ID)
        {
            UserInfo user = userRepository.FindUserByID(int.Parse(ID));
            return Json(user);
        }
        public JsonResult GetAllUsers()
        {
            List<UserInfo> Users = userRepository.FindAllUsers().ToList();
            return Json(Users);
        }

        public void AddUser(string Name, string Gender, string Age, string Email)
        {
            UserInfo user = new UserInfo();
            user.UserGender = Gender;
            user.UserName = Name;
            user.UserEmail = Email;
            user.UserAge = int.Parse(Age);
            userRepository.AddUser(user);
            userRepository.Save();
        }

        public void DeleteUser(string id)
        {
            UserInfo user = userRepository.FindUserByID(int.Parse(id));
            userRepository.DeleteUser(user);
            userRepository.Save();
        }

        public void UpdateUser(string ID, string Name, string Gender, string Age, string Email)
        {
            UserInfo user = userRepository.FindUserByID(int.Parse(ID));
            user.UserName = Name;
            user.UserGender = Gender;
            user.UserEmail = Email;
            user.UserAge =int.Parse(Age);
            //UpdateModel(user);
            userRepository.Save();
        }
    }
}

这里有几点需要说明，Controller里面的方法的返回值类型都是ActionResult，这其实是一个类似返回值类型总称的意思，根据具体的情况可以分为具体的类型，当然，如果方法内部是Return View（）；这样的话，还是ActionResult，因为那是返回一个视图。因为我们这里不需要使用View层，所以返回类型可以根据实际情况来定。这里需要说明一下，JQuery中的Ajax方法接受指定的数据类型（后面介绍），本文使用的是Json格式，而且在.NET平台上，如果客户端指定的接受数据类型是Json的话，必须是严格符合Json.NET才可以通过，否则什么都传不过去。写到这里，大部分Sever端的代码都写完了。下面我来写最主要的部分，Client端。

　　同样是新建一个项目，为什么不在同一个解决方案下新建，这个个人爱好，感觉这样更容易调试。新建的web项目命名为JQueryClient，这里我们只需要试用里面的Default页面，呵呵，我比较懒，所有的操作全在这里面搞定的，还是那句话，demo，所以样子做的很烂。

首先还是因为Jquery库，这东西太好用，.NET平台已经集成了。直接在项目中可以引用<script type="text/javascript src="Scripts/jquery-1.4.1.js"></script>"这就可以了。

下面我主要说一下里面用的核心方法，就是Jquery.ajax();这个方法很强大，是Jquery的底层方法，简化版本的方法是Jquery.get()和Jquwery.post()然还是一些其他的方法，这个可以去查阅一下w3school，上面有简要但是全名的介绍。同归在Ajax方法中设置url，可以找到我们需要的c层的方法，通过type可以设置我们需要的http请求的类型，如果直接试用Jquery.get()或者juery.post()就不需要设置什么type了；通过data可以设置回传的数据，success：来设置一个成功之后的callback，与之对应的是一个error：参数，也可以带有callback。下面就是一个实例：

$(document).rendy(function(){
$("#btn1").click(function(){
$.ajax({
type:"Post",//这里是http类型
contentType:"application/json",//这里设置发往服务端的数据类型
url:"http://localhost:端口号/User/方法名",//大家都应该很清楚了
data:"Name="+$("#text1").val(),//回传一个参数
dataType:"json",//传回来的数据类型
success:function(){alert("成功！')},
error:function(){alert("失败!")}
});
});
});

这就是一个实例，当然，Ajax中还有很多可选的参数没有写出来，而且里面所有的参数都是可选的。

下面是Default.aspx页面的代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="JQueryClient._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
    function GetOneUser() {
        $.get("http://localhost:4768/User/OneUser", function (result) {
            $("#myPnl").html(result)
        });
    }
    function GetUserByID() {
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/GetUserByID",
            data: "ID=" + $("#text1").val(),
            dataType: "json",
            success: function (result) {
                if (result != null) {
                    $("#myPn2").html(result.UserID + " " + result.UserName + " " + result.UserGender + " " + result.UserAge + " " + result.UserEmail + " <input type='button' id='btn5' value='修改' onclick='SilderToggle()'/> <input type='button' value='删除'onclick='DeleteUser()'/>");
                }
                else {
                    alert("不存在此用户！");
                }
            }
        });
    }
    function GetAllUsers() {
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/GetAllUsers",
            dataType: "json",
            success: function (result) {
                
                $.each(result, function (index, data) {
                    $("#myPn3").append(data.UserID + " " + data.UserName + " " + data.UserGender + " " + data.UserAge + " " + data.UserAge + "<br>");
                });
            }
        });
    }
    function AddUser() {
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/AddUser",
            data: "Name=" + $("#name").val() + "&Gender=" + $("#gender").val() + "&Age=" + $("#age").val() + "&Email=" + $("#email").val(),
            success: function () {
                alert("添加成功！");
            }
        });
    }
    function SilderToggle() {
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/GetUserByID",
            data: "ID=" + $("#text1").val(),
            dataType: "json",
            success: function (result) {
                $("#name1").val(result.UserName);
                $("#gender1").val(result.UserGender);
                $("#age1").val(result.UserAge);
                $("#email1").val(result.UserEmail);
            }
        });
        $("#myPan4").slideToggle("slow");
    }
    function UpdateUser() {
        var id = $("#text1").val();
        var name = $("#name1").val();
        var gender = $("#gender1").val();
        var email = $("#email1").val();
        var age = $("#age1").val();
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/UpdateUser",
            data: "ID=" + id + "&Name=" + name + "&Age=" + age + "&Gender=" + gender + "&Email=" + email,
            success: function () { alert("修改成功！"); }
        });
    }
    function DeleteUser() {
        var id = $("#text1").val();
        $.ajax({
            type: "POST",
            url: "http://localhost:4768/User/DeleteUser",
            data: "id=" + id,
            success: function () {
                alert("删除成功！");
             }
        });}
</script>
    <input type="button" value="显示一个用户" id="btn1" onclick="GetOneUser()"/>
<div id="myPnl" style=" 350px; height: 30px; border: 1px dotted silver;">
</div>
<p>查询：<input type="text" id="text1" /><input type="button" value="点击" id="btn2" onclick="GetUserByID()" /></p>
<div id="myPn2" style=" 350px; height: 30px; border: 1px dotted silver;">
</div>
<div id="myPan4" style=" 350px; height: 100px; border: 1px dotted silver; display:none">
姓名：<input type="text" id="name1" /><br>
性别：<input type="text" id="gender1" /><br>
年龄：<input type="text" id="age1" /><br>
Emial：<input type="text" id="email1" /><br>
<input type="button" value="确定" id="Button1" onclick="UpdateUser()"/>
</div>
<p><input type="button" value="显示所有用户" id="btn3" onclick="GetAllUsers()" /></p>
<div id="myPn3" style=" 350px; height: 200px; border: 1px dotted silver;">
</div>
<div id="Div1" style=" 350px; height: 300px; border: 1px dotted silver;">
姓名：<input type="text" id="name" /><br>
性别：<input type="text" id="gender" /><br>
年龄：<input type="text" id="age" /><br>
Emial：<input type="text" id="email" /><br>
<input type="button" value="添加" id="btn4" onclick="AddUser()"/>
</div>
</asp:Content>

当然，这个解决方案是不安全的，在IE9上会给出提示，不过这个是作为实现思路来做的，目前就先这样吧。如果写的不好，大家就将就一下，如果对你有帮助，那就太好了！