zoukankan      html  css  js  c++  java
  • 第三篇:使用Visual Studio 2008实现基本的页面交互

    本系列目录
    对第一篇中的数据库做一下修正
    脚本如下:
    Code

    下面开始本节内容:

    打开上节创建的项目,添加一个新的web页面ModuleManager.aspx将一个GridView拖动到设计器,将其命名为GridViewModules。在设计视图使用快捷键F7打开代码视图,找到Page_Load函数,完成其中代码。

            SecurityDataContext db;
            
    protected void Page_Load(object sender, EventArgs e)
            
    {

                db 
    = new SecurityDataContext();
                
    if (!IsPostBack)
                
    {
                    BindGrid();
                }

            }
         
    private void BindGrid()
            
    {
                SecurityDataContext db 
    = new SecurityDataContext();
                
    this.GridViewModules.DataSource = db.Modules.GetNewBindingList();
                
    this.GridViewModules.DataBind();
            }

    说明:BindGrid实现了GridView的数据绑定。

    在属性面板中设置Columns属性,打开Fields窗口如图1.


    图1

    在图中红色区域选择要添加的列,点击add按钮列将被添加到绿色区域,使用蓝色区域的按钮来对列排列删除。选中绿色区域的列可在紫色区域的属性编辑区设置该列DataField属性。设计完成的的html如下。

            <asp:GridView ID="GridViewModules" runat="server" AutoGenerateColumns="False">
                
    <Columns>
                    
    <asp:BoundField DataField="Code" HeaderText="Code" />
                    
    <asp:BoundField DataField="Name" HeaderText="Name" />
                    
    <asp:BoundField DataField="Comments" HeaderText="Comments" />
                    
    <asp:CommandField ShowDeleteButton="True" />
                    
    <asp:CommandField ShowEditButton="True" ShowInsertButton="True" />
                
    </Columns>
            
    </asp:GridView>

    右键点击GridView控件,选择属性,打开属性面板,如图2.

     

    图2

     双击红色区域生成RowEditing的事件处理函数。同样的方法生成RowUpdatingRowDeletingRowCanceling事件处理函数。转到C#代码页面。完成刚才生成的GridViewModules_RowEditing函数,完成代码如下。

            protected void GridViewModules_RowEditing(object sender, GridViewEditEventArgs e)
            
    {
                
    this.GridViewModules.EditIndex = e.NewEditIndex;
                BindGrid();
            }

    该段代码在点击编辑按钮后将列变为可编辑状态。

            protected void GridViewModules_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
            
    {
                GridViewModules.EditIndex 
    = -1;
                BindGrid();
            }

     说明:重新将可编辑部分置为不可编辑。

    protected void GridViewModules_RowUpdating(object sender, GridViewUpdateEventArgs e)
            
    {
                var a 
    = db.Modules.Where(module => module.ModuleID.ToString() == GridViewModules.DataKeys[e.RowIndex].Values[0].ToString().Trim()).First();
                a.Name 
    = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[1].Controls[0as TextBox).Text;
                a.Code 
    = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[0].Controls[0as TextBox).Text;
                a.Comments 
    = ((TextBox)GridViewModules.Rows[e.RowIndex].Cells[2].Controls[0as TextBox).Text;
                db.SubmitChanges();
                GridViewModules.EditIndex 
    = -1;
                BindGrid();
    }

    说明:更新修改的行。

            protected void GridViewModules_RowDeleting(object sender, GridViewDeleteEventArgs e)
            
    {
                var a 
    = db.Modules.Where(module => module.ModuleID.ToString() == GridViewModules.DataKeys[e.RowIndex].Values[0].ToString().Trim()).First();
                db.Modules.DeleteOnSubmit(a);
                db.SubmitChanges();
                BindGrid();
            }

    说明:删除当前行。
    F5执行代码效果如图3

     

    图3

     现在还缺少添加功能。
    向界面添加3个TextBox控件并设置其ID,再添加一个按钮。其html代码为

            </div>
            
    <div>Name:<asp:TextBox ID="TextBoxName" runat="server"></asp:TextBox>        
            
    </div>
            
    <div>Comments:<asp:TextBox ID="TextBoxComments" runat="server"></asp:TextBox>        
            
    </div>
            
    <div>
                
    <asp:Button ID="ButtonAdd" runat="server" Text="添加" />
            
    </div>

    为Button添加onclick事件
    <asp:Button ID="ButtonAdd" runat="server" Text="添加" onclick="ButtonAdd_Click" />
    修改其CS代码
            protected void ButtonAdd_Click(object sender, EventArgs e)
            
    {
                Modules m 
    = new Modules()
                
    {
                    Code 
    = this.TextBoxCode.Text,
                    Name 
    = this.TextBoxName.Text,
                    Comments 
    = this.TextBoxComments.Text
                }
    ;
                SecurityDataContext db 
    = new SecurityDataContext();
                
    if (db.Modules.Where(module => module.Code.Trim() == m.Code.Trim()).Count() > 0)//Linq
                    throw new Exception("Code不能重复");
                

                db.Modules.InsertOnSubmit(m);
                db.SubmitChanges();
                BindGrid();
                
    this.TextBoxCode.Text = "";
                
    this.TextBoxName.Text = "";
                
    this.TextBoxComments.Text = "";
            }
    这样就完成了对Modules的添加、修改、删除操作。

        预告:第四篇:实现用户注册页面
        主要内容数据验证控件的使用。
  • 相关阅读:
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark RDD(Resilient Distributed Datasets)论文
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    【机器学习实战】第10章 K-Means(K-均值)聚类算法
    [译]flexbox全揭秘
  • 原文地址:https://www.cnblogs.com/tianyamoon/p/1036284.html
Copyright © 2011-2022 走看看