如何在GridView中實作Insert功能

如何在GridView中實作Insert功能

預設GridView提供查詢、刪除及修改等功能,讓開發人員甚至不需撰寫一行程式碼就可以做到上述功能,但GridView唯獨缺了新增功能,本文提供了簡單的範例來讓GirdView可以具備新增功能,使用經典的Northwind資料庫來為例,步驟如下:

  • 從工具箱拉一個GridView控制項至頁面中,加入兩個TemplateFiled用來呈現Region資料表的RegionID和RegionDescription欄位,此步驟的重點必須在上述兩個TemplateField中的FooterTemplate分別加入一個TextBox,做為新增資料時輸入之用。
   1:  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" >
   2:      <Columns>
   3:          <asp:TemplateField HeaderText="RegionID">
   4:              <EditItemTemplate>
   5:                  <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("RegionID") %>'></asp:TextBox>
   6:              </EditItemTemplate>
   7:              <FooterTemplate>
   8:                  <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
   9:              </FooterTemplate>
  10:              <ItemTemplate>
  11:                  <asp:Label ID="Label1" runat="server" Text='<%# Bind("RegionID") %>'></asp:Label>
  12:              </ItemTemplate>
  13:          </asp:TemplateField>
  14:          <asp:TemplateField HeaderText="RegionDescription">
  15:              <EditItemTemplate>
  16:                  <asp:TextBox ID="TextBox2" runat="server" 
  17:                      Text='<%# Bind("RegionDescription") %>'></asp:TextBox>
  18:              </EditItemTemplate>
  19:              <FooterTemplate>
  20:                  <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
  21:              </FooterTemplate>
  22:              <ItemTemplate>
  23:                  <asp:Label ID="Label2" runat="server" Text='<%# Bind("RegionDescription") %>'></asp:Label>
  24:              </ItemTemplate>
  25:          </asp:TemplateField>
  26:      </Columns>
  27:  </asp:GridView>    

 

  • 接著加入兩個Button做為新增和儲存之用。
   1:  <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Add" />
   2:  <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Save" />

 

  • 於CodeBehind中加入下列程式,用來在第一次載入網頁時利用ADO.NET取得資料,並繫結給GridView。
   1:  protected void Page_Load(object sender, EventArgs e)
   2:  {
   3:      if (!IsPostBack) 
   4:          GridViewDataBind();
   5:  }
   6:  
   7:  private void GridViewDataBind()
   8:  {
   9:      using (SqlConnection con = new SqlConnection(GetConString()))
  10:      {
  11:          using (SqlDataAdapter adapter = new SqlDataAdapter("select * from region", con))
  12:          {
  13:              DataTable dt = new DataTable();
  14:              adapter.Fill(dt);
  15:              GridView1.DataSource = dt;
  16:              GridView1.DataBind();
  17:          }
  18:      }
  19:  }
  20:  
  21:  private string GetConString()
  22:  {
  23:      SqlConnectionStringBuilder conbd = new SqlConnectionStringBuilder();
  24:      conbd.DataSource = ".";
  25:      conbd.InitialCatalog = "Northwind";
  26:      conbd.IntegratedSecurity = true;
  27:      return conbd.ToString();
  28:  }

 

  • 下列程式用來處理當使用者按下Add按鈕時,顯示前述步驟在Footer放置的TextBox。
   1:  //Add
   2:  protected void Button1_Click(object sender, EventArgs e)
   3:  {
   4:      GridView1.ShowFooter = true;
   5:      GridViewDataBind();
   6:  }

 

  • 下列程式用來處理當使用者按下Save時,將使用者於前一步驟的TestBox中輸入的內容新增至資料庫。
   1:  //Save
   2:  protected void Button2_Click(object sender, EventArgs e)
   3:  {
   4:      using (SqlConnection con = new SqlConnection(GetConString()))
   5:      {
   6:          using (SqlCommand cmd = new SqlCommand())
   7:          {
   8:              TextBox txt3 = GridView1.FooterRow.FindControl("TextBox3") as TextBox;
   9:              TextBox txt4 = GridView1.FooterRow.FindControl("TextBox4") as TextBox;
  10:              if (txt3 != null && txt4 != null)
  11:              {
  12:                  con.Open();
  13:                  cmd.Connection = con;
  14:                  cmd.CommandText = "insert into Region values(@RegionID,@RegionDescription)";
  15:                  cmd.Parameters.AddRange(new SqlParameter[] { new SqlParameter("@RegionID", txt3.Text), new SqlParameter("@RegionDescription", txt4.Text) });
  16:                  cmd.ExecuteNonQuery();
  17:              }
  18:          }
  19:      }
  20:  }

	
PS:若使用SqlDataSource,可參考Adding an insert row to GridView一文。