通过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中调用。下面是代码
View Code
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的代码：
View Code
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页面的代码：
View Code
<%@ 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="width: 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="width: 350px; height: 30px; border: 1px dotted silver;">
</div>
<div id="myPan4" style="width: 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="width: 350px; height: 200px; border: 1px dotted silver;">
</div>
<div id="Div1" style="width: 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上会给出提示，不过这个是作为实现思路来做的，目前就先这样吧。如果写的不好，大家就将就一下，如果对你有帮助，那就太好了！
