通过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

<%@ 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上会给出提示，不过这个是作为实现思路来做的，目前就先这样吧。如果写的不好，大家就将就一下，如果对你有帮助，那就太好了！