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

简介: 1.GridView使用Action代码   Code 1 public ActionResult Index() 2         { 3             CommonPage page = TempData["page"] as CommonPage; 4            ...

1.GridView使用Action代码

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif 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.页面使用标签

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<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.编辑按钮的实现

 

img_1c53668bcee393edac0d7b3b3daff1ae.gif img_405b18b4b6584ae338e0f6ecaf736533.gif Code
<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就是一种模式,我们可以不用拘泥他们的微软的那种格式,我们可以彻底的改变他们的目录结构,根据自己的需要来设置个性化目录。这里不再多少,以后再写。这个控件有待改善的地方还有很多,功能是都实现了,还有细节等等都有待优化。

相关文章
|
5月前
|
前端开发 Java 程序员
从零基础手写Spring MVC框架,准备好进阶程序员了吗?
我们程序员大部分人都是野路子,不懂什么叫代码规范。写了一个月的代码,最后还得其他老司机花3天时间重构,相信大部分老司机都很头疼看新手的代码。
43 1
|
4月前
|
设计模式 前端开发 Java
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
【Spring MVC】快速学习使用Spring MVC的注解及三层架构
50 1
|
4月前
|
JSON 前端开发 Java
【JavaEE进阶】 关于Spring MVC 响应
【JavaEE进阶】 关于Spring MVC 响应
48 3
|
5月前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
5月前
|
缓存 前端开发 Java
【Spring底层原理高级进阶】轻松掌握 Spring MVC 的拦截器机制:深入理解 HandlerInterceptor 接口和其实现类的用法
【Spring底层原理高级进阶】轻松掌握 Spring MVC 的拦截器机制:深入理解 HandlerInterceptor 接口和其实现类的用法
|
5月前
|
前端开发 Java 应用服务中间件
快速上手:探索Spring MVC的学习秘籍!
快速上手:探索Spring MVC的学习秘籍!
|
5月前
|
JSON 前端开发 Java
【JavaEE进阶】 关于Spring mvc 响应
【JavaEE进阶】 关于Spring mvc 响应
|
5月前
|
前端开发 Java 应用服务中间件
【JavaEE进阶】 初识Spring Web MVC
【JavaEE进阶】 初识Spring Web MVC
|
5月前
|
前端开发 Java 数据库
MVC架构学习归纳总结(小傅哥の码场 学习专栏)
MVC架构学习归纳总结(小傅哥の码场 学习专栏)
33 0
|
10月前
|
XML 前端开发 Java
自定义MVC的进阶使用
自定义MVC的进阶使用
43 0
下一篇
无影云桌面