第三篇:使用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的添加、修改、删除操作。

    预告:第四篇:实现用户注册页面
    主要内容数据验证控件的使用。
posted @ 2008-01-12 16:43  tianyamoon  阅读(4501)  评论(12编辑  收藏  举报