和上次（第一次）写博文过了很久，期间有几次想写，也有几次感觉不错的心得体会，但是还是没找到静下来的时间。再有想法写博文的时候，已经毕业了。呵呵，闲话不说了。还是直奔主题吧。
公司准备开发一个通过远程访问的服务端项目，之前没有使用过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='修改' οnclick='SilderToggle()'/> <input type='button' value='删除'οnclick='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" οnclick="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上会给出提示，不过这个是作为实现思路来做的，目前就先这样吧。如果写的不好，大家就将就一下，如果对你有帮助，那就太好了！
763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
