1.GridView使用Action代碼
Code
1 public ActionResult Index()
2 {
3 CommonPage page = TempData["page"] as CommonPage;
4 if (page == null)
5 {
6 page = new CommonPage();
7 }
8 page.Total = context.Tab_Comment.Count();
9 page.PageIndex = 1;
10 page.PageSize = 10;
11 page.PageCount = page.Total % page.PageSize == 0 ? page.Total / page.PageSize : page.Total / page.PageSize + 1;
12 IEnumerable<Tab_Comment> items = context.Tab_Comment.Skip((page.PageIndex-1) * page.PageSize).Take(page.PageSize).Select(c=>c);
13 ViewData["items"] = new PageList<Tab_Comment>(items,page,null,"ID","Home","List");
14 TempData["page"] = page;
15 return View();
16 }
17
18 public ActionResult List(int pageIndex)
19 {
20 CommonPage page = TempData["page"] as CommonPage;
21 page.PageIndex = pageIndex;
22 if (pageIndex <= 1)
23 {
24 page.PageIndex = 1;
25 }
26 if (pageIndex >= page.PageCount)
27 {
28 page.PageIndex = page.PageCount;
29 }
30 IEnumerable<Tab_Comment> items = context.Tab_Comment.Skip((page.PageIndex - 1) * page.PageSize).Take(page.PageSize).Select(c => c);
31 ViewData["items"] = new PageList<Tab_Comment>(items, page, null, "ID","Home","List");
32 TempData["page"] = page;
33 return View("Index");
34 }
35
36 public ActionResult Delete(int id)
37 {
38 context.Tab_Comment.DeleteOnSubmit(context.Tab_Comment.Single(c=>c.ID==id));
39 context.SubmitChanges();
40 return RedirectToAction("Index");
41 }
42
43 public ActionResult Update(Tab_Comment comment)
44 {
45 return RedirectToAction("Index");
46 }
47
上述代碼主要是在GridView的使用中配合使用的Action，這是是在開發這個标簽的時候做測試的Action代碼，使用Linq與資料庫互動。Index這個初始化頁面，顯示資料集合的第一頁，并初始化資料分頁的一些基本資訊。List則主要适用于分頁的，這裡和Index中有重複的代碼，這裡隻是做測試沒有進行代碼優化。資料的分頁都由這個action來處理。Delete 這是來用于删除資料行的.Update 是用于編輯修改資料，這裡方法的實作其實并沒有實作修改，但是已經獲得了送出修改的資料值，稍作處理就可以了。
2.頁面使用标簽
<div style="text-align: center;">
<%=Html.GridView<Tab_Comment>(ViewData["items"] as PageList<Tab_Comment>, new string[] { "ID", "GameID", "ComType","ComUser" }, new GridViewOption(true, "編輯", true, "删除", new string[] { "編号", "遊戲ID", "類型"},"Home","Delete","",""))%>
</div>
這個不用多少，應該都知道。這就是我們最終使用GridView 的時候的代碼，看似有些繁瑣了，特别是參數，有興趣的可以進行優化
3.編輯按鈕的實作
<style type="text/css">
.Edit_Link
{
}
</style>
<script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var text = null;
$(document).ready(function() {
$("a.Edit_Link").click(function() {
return Edit(this);
})
});
//編輯
function Edit(objEdit) {
var tr = $(objEdit).parent().parent();
text = $(tr).html();
$(tr).children().each(function(i, obj) {
var value = $(obj).text();
var html = "";
if (i < $(tr).children().length - 1) {
//隐藏表單域的id
if (i == 0) {
var id = $($(obj).children().get(0)).attr("id");
var hidden = $("#form0").find("#" + id);
if($(hidden).length > 0)
{
$("#form0 input[type=hidden][id=" + id + "]").val($($(obj).children().get(0)).attr("value"));
}
else
$("#form0").append("<input id='" + id + "' name='" + id + "' type='hidden' value='" + $($(obj).children().get(0)).attr("value") + "' />");
}
var trFirst = $(tr).parent().children().get(0);
var columnName = $($(trFirst).children().get(i)).attr("id");
$("#form0 input[type=hidden][id=" + columnName + "]").val(value)
html = "<input type='text' value='" + value + "' id='txt" + columnName + "' name='txt" + columnName + "' style='width:100px;' />";
$(obj).html(html);
$("#txt" + columnName).change(function() {
$("#form0 input[type=hidden][id=" + columnName + "]").val($(this).val());
});
}
else {
html = "<a id='btnUpdate' href='#'>更新</a>&nbsp;&nbsp;&nbsp;<a id='btnCancel' href='#'>取消</a>";
$("#btnCancel").click(function() {
Cancel(this);
$("#btnUpdate").click(function(){
alert($("#form0 input[type=hidden][id=ComUser]").val());
document.getElementById("form0").submit();
});
$("a.Edit_Link").unbind("click");
return false;
//取消
function Cancel(objEdit) {
$(tr).html(text);
$("a.Edit_Link").bind("click", function() {
Edit(this);
//更新
function Update(objUpdate) {
</script>
應該都知道MVC和Jquery的結合非常默契，我也是對Jquery情有獨鐘，要實作一些效果的變換Jquery再好不過了。至于這點寫什麼我也自己也不知道，原理就是将原來的編輯行中每個單元格的資料替換成<input type="text"/> 然将資料值賦給這個文本框，編輯按鈕則變為相應的更新按鈕。然後修改文本框中的資料會自動填充到生成的表單中對應的隐藏域中去。然後用js實作表單送出就OK了。到此大功告成
到此該寫的都馬馬虎虎的寫完了，略有成就感，寫了好幾篇啊。這個控件雖然寫出來了，但是還是有很多地方有待優化，不過在使用的過程中已經友善了不少，特别是頁面的代碼，不用foreach 去循環了。當我把這個控件寫出來的時候，我發現我這個.net程式員徹徹底底的愛上了MVC，呵呵，擴充性比WebForm要好很多，用MVC也做過不少東西了，以前都是簡簡單單沒有去追求，沒有去思考它的原理。MVC就是一種模式，我們可以不用拘泥他們的微軟的那種格式，我們可以徹底的改變他們的目錄結構，根據自己的需要來設定個性化目錄。這裡不再多少，以後再寫。這個控件有待改善的地方還有很多，功能是都實作了，還有細節等等都有待優化。