MVC进阶学习--HtmlHelper之GridView控件拓展(五)

1.GridView使用Action代码

 

 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>";
                    $(obj).html(html);
                    $("#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) {
            var tr = $(objEdit).parent().parent();
            $(tr).html(text);
            $("a.Edit_Link").bind("click", function() {
                Edit(this);
            });
            return false;
        }

        //更新
        function Update(objUpdate) {

        }
    </script>

 

应该都知道MVC和Jquery的结合非常默契，我也是对Jquery情有独钟，要实现一些效果的变换Jquery再好不过了。至于这点写什么我也自己也不知道，原理就是将原来的编辑行中每个单元格的数据替换成<input type="text"/> 然将数据值赋给这个文本框，编辑按钮则变为相应的更新按钮。然后修改文本框中的数据会自动填充到生成的表单中对应的隐藏域中去。然后用js实现表单提交就OK了。到此大功告成

 

 

 到此该写的都马马虎虎的写完了，略有成就感，写了好几篇啊。这个控件虽然写出来了，但是还是有很多地方有待优化，不过在使用的过程中已经方便了不少，特别是页面的代码，不用foreach 去循环了。当我把这个控件写出来的时候，我发现我这个.net程序员彻彻底底的爱上了MVC，呵呵，扩展性比WebForm要好很多，用MVC也做过不少东西了，以前都是简简单单没有去追求，没有去思考它的原理。MVC就是一种模式，我们可以不用拘泥他们的微软的那种格式，我们可以彻底的改变他们的目录结构，根据自己的需要来设置个性化目录。这里不再多少，以后再写。这个控件有待改善的地方还有很多，功能是都实现了，还有细节等等都有待优化。