ASP.NET MVC Preview 5 演示Demo #8 实现JQuery结合Json进行后台数据Ajax方式验证

拼吾爱程序人生.Net编程 Asp.Net ASP.NET MVC Preview 5 演示Demo #8 实现JQuery结合Json进行后台数据Ajax方式验证

1 / 1 页

跳转页

查看:190

striver

个人空间 相册
性别:
来自:拼吾爱
积分:7097
帖子:7009
注册: 2007-04-09

2008-10-08 13:12 | 只看楼主

树型| 收藏| 小中大复制帖子链接到剪贴板1F

ASP.NET MVC Preview 5 演示Demo #8 实现JQuery结合Json进行后台数据Ajax方式验证

上一篇：ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素

JQuery is a lightweight javascript library adding the Ajax and other functionality to a web application. Recently Microsoft has announced that they will integrate JQuery into their Visual Studio IDE. The next version of ASP.NET MVC will be the first product shipped with JQuery.

This Mvc Demo #8 demonstrates how to use JQuery and Json to validate the submit form data in an Ajax way.

Hope this helps, let's get started.

该项目演示了在ASP.NET MVC中使用开源Javasript脚本库JQuery结合Json进行后台数据Ajax方式验证。

开发环境：Visual Studio 2008 SP1 ＋ ASP.NET MVC Preview 5 ＋ Linq To Sql ＋ SQL Server 2005

ASP.NET MVC Preview 5 下载地址： http://www.codeplex.com/aspnet/R ... spx?ReleaseId=16775

【Step By Step 操作步骤】

1、下载本演示源码：

附件: 您所在的用户组无法下载或查看附件【ok】

2、打开下载的源码中的“数据库脚本Demo08.sql”脚本文件，双击，在SQL Server 2005 中执行。该Sql脚本将生成一个新的mike108mvp数据库，里面包含5个表User、UserType、Product、Order、OrderItem。【ok】

3、Visual Studio 2008 双击打开下载的演示源码中的 Mike108Demo.sln 解决方案文件，按F5运行。【ok】

4、运行后，点击页面右上角的“添加”链接。输入姓名，将采用Ajax方式实时验证姓名是否已存在。由JQuery调用Url.Action("IsExistUser") 返回一个Json数据，判断是否已经存在该用户名。

附件: 您所在的用户组无法下载或查看附件

5、Views/Users/Add.aspx 【ok】

JQuery验证代码

Code

[copy to clipboard]

CODE:

6、运行后，点击页面右上角的“采购”链接。打钩选中要采购的产品，用JQuery控制必须选中几个产品。本Demo演示的是必须选中产品个数为2个或者3个。【ok】

附件: 您所在的用户组无法下载或查看附件

7、Views/Users/BuyProduct.aspx 产品采购页面【ok】

Code

8、母版页site.master添加JQuery引用。【ok】

9、UsersController.cs 【ok】

Code

[copy to clipboard]

CODE:

public class UsersController : Controller
{
Mike108mvpDataContext db = new Mike108mvpDataContext();

#region Demo #1 CRUD操作

public ActionResult UserAdd()
{
return View(@"Add");
}

public ActionResult UserCreate()
{
if (Request.HttpMethod != "POST")
{ return View(@"Add"); }

User model = new User();
UpdateModel(model, Request.Form.AllKeys);
db.Users.InsertOnSubmit(model);
db.SubmitChanges();
return RedirectToAction("UserList");
}

public ActionResult UserEdit(int userId)
{
User model = db.Users.FirstOrDefault(e => e.UserId == userId);
return View(@"Edit", model);
}

public ActionResult UserUpdate(int userId)
{
if (Request.HttpMethod != "POST")
{ return RedirectToAction("UserEdit", new { userId = userId }); }

User model = db.Users.FirstOrDefault(e => e.UserId == userId);
UpdateModel(model, Request.Form.AllKeys);
db.SubmitChanges();
return RedirectToAction("UserList");
}

public ActionResult UserDetail(int userId)
{
User model = db.Users.FirstOrDefault(e => e.UserId == userId);
return View(@"Detail", model);
}

public ActionResult UserDelete(int userId)
{
User model = db.Users.FirstOrDefault(e => e.UserId == userId);
db.Users.DeleteOnSubmit(model);
db.SubmitChanges();
return RedirectToAction("UserList");
}

public ActionResult UserList1()
{
if (db.Users.Count() == 0 || db.UserTypes.Count() == 0)
{
return RedirectToAction("DataReset");
}
ViewData["UserList"] = db.Users.ToList();
return View(@"List");
}

#endregion

#region Demo #1 数据重置

public ActionResult DataReset()
{
//批量添加用户分类
if (db.UserTypes.Count() == 0)
{
List<UserType> userTypelist = new List<UserType>
{
new UserType { TypeId=1, TypeName = "总统" },
new UserType { TypeId=2, TypeName = "独裁者" },
new UserType { TypeId=3, TypeName = "S.H.E" },
new UserType { TypeId=4, TypeName = "小虎队" },
new UserType { TypeId=5, TypeName = "NBA" },
new UserType { TypeId=6, TypeName = "科学家" }
};
db.UserTypes.InsertAllOnSubmit(userTypelist);
db.SubmitChanges();
}

//批量删除用户
//List<User> oldList = db.Users.ToList();
//db.Users.DeleteAllOnSubmit(oldList);

//批量添加用户
if (db.Users.Count() == 0)
{
List<User> userlist = new List<User>
{
new User { UserName = "孙中山", TypeId=1, Sex=true, Age = 53, Career = "中国总统" },
new User { UserName = "蒋中正", TypeId=1, Sex=true, Age = 36, Career = "中国总统" },
new User { UserName = "小布什", TypeId=1, Sex=true, Age = 61, Career = "美国总统" },
new User { UserName = "列宁", TypeId=2, Sex=true, Age = 49, Career = "邪恶苏联" },
new User { UserName = "斯大林", TypeId=2, Sex=true, Age = 49, Career = "邪恶苏联" },
new User { UserName = "Selina", TypeId=3, Sex=false, Age = 26, Career = "女艺人" },
new User { UserName = "Hebe", TypeId=3, Sex=false, Age = 25, Career = "女艺人" },
new User { UserName = "Ella", TypeId=3, Sex=false, Age = 26, Career = "女艺人" },
new User { UserName = "吴奇隆", TypeId=4, Sex=true, Age = 34, Career = "男艺人" },
new User { UserName = "苏有朋", TypeId=4, Sex=true, Age = 33, Career = "男艺人" },
new User { UserName = "陈志朋", TypeId=4, Sex=true, Age = 35, Career = "男艺人" },
new User { UserName = "乔丹", TypeId=5, Sex=true, Age = 39, Career = "球星" },
new User { UserName = "皮蓬", TypeId=5, Sex=true, Age = 38, Career = "球星" },
new User { UserName = "罗德曼", TypeId=5, Sex=true, Age = 37, Career = "球星" },
new User { UserName = "姚明", TypeId=5, Sex=true, Age = 27, Career = "球星" },
new User { UserName = "易建联", TypeId=5, Sex=true, Age = 20, Career = "球星" },
new User { UserName = "科比", TypeId=5, Sex=true, Age = 29, Career = "球星" },
new User { UserName = "麦蒂", TypeId=5, Sex=true, Age = 33, Career = "球星" },
new User { UserName = "艾弗森", TypeId=5, Sex=true, Age = 29, Career = "球星" },
new User { UserName = "詹姆斯", TypeId=5, Sex=true, Age = 29, Career = "球星" },
new User { UserName = "加内特", TypeId=5, Sex=true, Age = 32, Career = "球星" },
new User { UserName = "比尔盖茨", TypeId=6, Sex=true, Age = 62, Career = "微软老大" },
new User { UserName = "Scott Guthrie", TypeId=6, Sex=true, Age = 33, Career = "ASP.NET Leader" }

};
db.Users.InsertAllOnSubmit(userlist);
db.SubmitChanges();
}

//批量添加产品
if (db.Products.Count() == 0)
{
List<Product> productlist = new List<Product>
{
new Product { ProductName="苹果", Price=(decimal)1.5 },
new Product { ProductName="梨子", Price=(decimal)2.0 },
new Product { ProductName="柑橘", Price=(decimal)0.5 },
new Product { ProductName="荔枝", Price=(decimal)1.8 },
new Product { ProductName="菠萝", Price=(decimal)3.0 },
new Product { ProductName="草莓", Price=(decimal)3.5 },
new Product { ProductName="樱桃", Price=(decimal)6.0 },
new Product { ProductName="橄榄", Price=(decimal)8.5 },
new Product { ProductName="芒果", Price=(decimal)9.0 }
};
db.Products.InsertAllOnSubmit(productlist);
db.SubmitChanges();
}

return RedirectToAction("UserList");
}

#endregion

#region Demo #2 微软Membership权限

[Authorize] //登陆后才能查看
public ActionResult UserMembership()
{

User model = db.Users.FirstOrDefault(e => e.UserName == "孙中山");
return View(@"Detail", model);
}

#endregion

#region Demo #3 实现MVC批量上传文件

public ActionResult Upload()
{
return View(@"Upload");
}

public ActionResult UploadFiles()
{
var r = new List<MikeUploadFile>();

foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(AppDomain.CurrentDomain.BaseDirectory + "Upload\\", Path.GetFileName(hpf.FileName));
hpf.SaveAs(savedFileName);

r.Add(new MikeUploadFile()
{
Name = savedFileName,
Length = hpf.ContentLength
});
}
return View(@"Upload", r);
}

#endregion

#region Demo #4 实现RadioButtonList和DropDownList应用

// Demo #4 没有加入新的Controller代码

#endregion

#region Demo #5 实现MikePager数据分页和GridView控件

public ActionResult UserList(int? pageIndex, int? pageSize)
{
if (db.Users.Count() == 0 || db.UserTypes.Count() == 0)
{
return RedirectToAction("DataReset");
}
int pIndex = pageIndex ?? 1;
int pSize = pageSize ?? 10;
GridViewData<User> gridViewData = new GridViewData<User>();
gridViewData.PagedList = db.Users.OrderBy(e => e.UserId).ToPagedList<User>(pIndex, pSize);
return View(@"List", gridViewData);
}

#endregion

#region Demo #6 实现MvcContrib的Html.CheckBoxList应用

[AcceptVerbs("GET")]
public ActionResult BuyProduct()
{
List<Product> productList = db.Products.ToList();
ViewData["products"] = productList;
return View(@"BuyProduct");
}

[AcceptVerbs("Post")]
public ActionResult BuyProductSave()
{
string[] selectedList = Request.Form.GetValues("productList"); //被选中的项
int selectedAmount = Request.Form.GetValues("productList").Length; //被选中项的个数
string checkBoxValueList = Request.Form["productList"]; //得到选中的多个CheckBox值，例如 1,2,5

//本次订单的产品Id列表，用逗号隔开保存在Order表的ProductList字段中
string buyProductIds = "";
StringBuilder sb = new StringBuilder();
foreach (string productId in selectedList)
{
sb.Append(productId + ",");
}
if (sb.Length > 1)
{
buyProductIds = sb.ToString(0, sb.Length - 1);
}

//假设当前登陆用户是Selina
User currentUser = db.Users.FirstOrDefault(e => e.UserName == "Selina");

//添加一个订单到Order表
Order order = new Order();
order.OrderName = currentUser.UserName + " 订单";
order.OrderTime = DateTime.Now;
order.UserId = currentUser.UserId;
order.ProductList = buyProductIds; //成功
//order.ProductList = checkBoxValueList; //成功

db.Orders.InsertOnSubmit(order);
db.SubmitChanges();

//批量添加多个订单明细到OrderItem表
foreach (string productId in selectedList)
{
OrderItem orderItem = new OrderItem();
orderItem.OrderId = order.OrderId;
orderItem.UserId = currentUser.UserId;
orderItem.ProductId = int.Parse(productId);
int quantity = int.Parse(Request.Form["Quantity" + productId]); //采购数量
orderItem.Quantity = quantity;
Product product = db.Products.FirstOrDefault(e => e.ProductId == int.Parse(productId));
orderItem.UnitPrice = product.Price.Value;

db.OrderItems.InsertOnSubmit(orderItem);
}
db.SubmitChanges();

return RedirectToAction("OrderList");
}

public ActionResult OrderList(int? pageIndex, int? pageSize, int? orderId)
{
int pIndex = pageIndex ?? 1;
int pSize = pageSize ?? 10;

//订单列表
GridViewData<Order> gridViewData = new GridViewData<Order>();
gridViewData.PagedList = db.Orders.OrderByDescending(e => e.OrderId).ToPagedList(pIndex, pSize);

//订单明细列表
GridViewData<OrderItem> orderItemGridViewData = new GridViewData<OrderItem>();
if (!string.IsNullOrEmpty(Request.QueryString["orderId"]))
{
int id = int.Parse(Request.QueryString["orderId"]);
orderItemGridViewData.PagedList = db.OrderItems.Where(e => e.OrderId == id).OrderBy(e => e.OrderItemId).ToPagedList(pIndex, pSize);
}
else
{
orderItemGridViewData.PagedList = db.OrderItems.OrderBy(e => e.OrderItemId).ToPagedList(pIndex, 100);
}
ViewData["OrderItemList"] = orderItemGridViewData;

return View(@"~/Views/Users/OrderList.aspx", gridViewData);
}

#endregion

#region Demo #7 实现JQuery表单数据验证及JQuery操作Html元素

// Demo #7 没有加入新的Controller代码

#endregion

#region Demo #8 实现JQuery结合Json进行后台数据Ajax方式验证

public ActionResult IsExistUser(string userName)
{
if (db.Users.FirstOrDefault(e=>e.UserName == userName) != null)
{
return Json(1); //用户名已存在
}
else
{
return Json(0);
}
}

#endregion

}