GridView 添加、删除、编辑的综合例子（带上载图片预览功能） Add Delete Edit GridView With Upload Image Preview

<%@ Page Language="C#" AutoEventWireup="true" EnableViewState="true" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<script runat="server">

  private int EditId = 0;
  private String ConnectionString = @"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|ASPNET20Book.mdb;";

  /// <summary>
  /// 数据绑定的处理。在需要编辑时，显示出编辑框
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  {
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
      if (EditId > 0)
      {
        //如果绑定数据源是DatarReader，则使用下面的方法：
        //System.Data.Common.DbDataRecord rowItem = (System.Data.Common.DbDataRecord)e.Row.DataItem;

        //如果绑定是 DataView，则使用此方法
        System.Data.DataRowView rowItem = (System.Data.DataRowView)e.Row.DataItem;
        if (rowItem["id"].ToString().Equals(EditId.ToString()))
        {
          //隐藏显示的文字
          PlaceHolder LabelTitle = e.Row.FindControl("LabelTitle") as PlaceHolder;
          LabelTitle.Visible = false;
          PlaceHolder LabelBirthday = e.Row.FindControl("LabelBirthday") as PlaceHolder;
          LabelBirthday.Visible = false;
          PlaceHolder LabelGender = e.Row.FindControl("LabelGender") as PlaceHolder;
          LabelGender.Visible = false;
          PlaceHolder LabelClassName = e.Row.FindControl("LabelClassName") as PlaceHolder;
          LabelClassName.Visible = false;
          PlaceHolder LabelPhoto = e.Row.FindControl("LabelPhoto") as PlaceHolder;
          LabelPhoto.Visible = true;

          PlaceHolder PlaceHolder1 = e.Row.FindControl("PlaceHolder1") as PlaceHolder;
          PlaceHolder1.Visible = false;

          //打开编辑框
          TextBox uTitle = e.Row.FindControl("uTitle") as TextBox;
          uTitle.Visible = true;

          TextBox uBirthDay = e.Row.FindControl("uBirthDay") as TextBox;
          uBirthDay.Visible = true;

          RadioButtonList uGender = e.Row.FindControl("uGender") as RadioButtonList;
          uGender.Visible = true;

          DropDownList uClassName = e.Row.FindControl("uClassName") as DropDownList;
          uClassName.Visible = true;

          FileUpload uPhoto = e.Row.FindControl("uPhoto") as FileUpload;
          uPhoto.Visible = true;
          uPhoto.Attributes.Add("onchange", "onUploadImgChange(this,'preview_" + EditId + "', 'preview_fake_" + EditId + "', 'preview_size_fake_" + EditId + "')");

          //赋原来的值
          if (rowItem["Gender"] != DBNull.Value)
          {
            uGender.SelectedIndex = (Convert.ToBoolean(rowItem["Gender"]) ? 0 : 1);
          }

          if (rowItem["ClassName"] != DBNull.Value)
          {
            uClassName.Items.FindByText(rowItem["ClassName"].ToString()).Selected = true;
          }

          //显示编辑更新按钮
          Panel PanelNormal = e.Row.FindControl("PanelNormal") as Panel;
          PanelNormal.Visible = false;

          Panel PanelUpdate = e.Row.FindControl("PanelUpdate") as Panel;
          PanelUpdate.Visible = true;
        }
      }
    }
  }

  /// <summary>
  /// 打开编辑框，将编辑标识传递到 EditId
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void EditClick(object sender, EventArgs e)
  {
    Button b = sender as Button;
    EditId = Convert.ToInt32(b.CommandArgument);

    //GridViewRow dvr = b.NamingContainer as GridViewRow;
   // EditId = (int)GridView1.DataKeys[dvr.DataItemIndex].Value;
    DataBind();
    //Response.Write(GridView1.DataKeys[dvr.DataItemIndex].Value);

  }

  /// <summary>
  /// 将编辑的数据保存
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void UpdateClick(object sender, EventArgs e)
  {
    Button b = sender as Button;
    GridViewRow dvr = b.NamingContainer as GridViewRow;
    TextBox uTitle = dvr.FindControl("uTitle") as TextBox;

    string StudentTitle = uTitle.Text;
    string StudentBirthDay = ((TextBox)dvr.FindControl("uBirthDay")).Text;
    bool StudentGender = ((RadioButtonList)dvr.FindControl("uGender")).SelectedValue == "男" ? true : false;
    string StudentClassName = ((DropDownList)dvr.FindControl("uClassName")).SelectedValue;
    string StudentID = GridView1.DataKeys[dvr.RowIndex].Value.ToString();
    string sql = "";
    String PhotoPath = "";
    bool HasFileUploaded = false;

    FileUpload oUpload = (FileUpload)dvr.FindControl("uPhoto");
    if (oUpload.HasFile)
    {
      PhotoPath = Guid.NewGuid().ToString("D") + System.IO.Path.GetExtension(oUpload.FileName);
      oUpload.SaveAs(Server.MapPath("~") + "\\" + PhotoPath);
      HasFileUploaded = true;
    }

    if (HasFileUploaded)
    {
      sql = "Update Student Set Title=@Title,BirthDay = @BirthDay,";
      sql += "Gender=@Gender,PhotoPath=@PhotoPath,ClassName=@ClassName Where id=@id";
    }
    else
    {
      sql = "Update Student Set Title=@Title,BirthDay = @BirthDay,";
      sql += "Gender=@Gender,ClassName=@ClassName Where id=@id";
    }

    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();
    OleDbCommand cmd = new OleDbCommand(sql, cn);

    cmd.Parameters.AddWithValue("@Title", StudentTitle);
    cmd.Parameters.AddWithValue("@BirthDay", StudentBirthDay);
    cmd.Parameters.AddWithValue("@Gender", StudentGender);
    if (HasFileUploaded)
    {
      cmd.Parameters.AddWithValue("@PhotoPath", PhotoPath);
    }
    cmd.Parameters.AddWithValue("@ClassName", StudentClassName);
    cmd.Parameters.AddWithValue("@id", StudentID);
    cmd.ExecuteNonQuery();
    cn.Close();

    Response.Redirect(Request.Url.ToString());

  }

  /// <summary>
  /// 添加新记录
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void AddClick(object sender, EventArgs e)
  {
    InsertNewRecord(sender, e);
  }

  /// <summary>
  /// 取消编辑
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void CancelClick(object sender, EventArgs e)
  {
    Response.Redirect(Request.UrlReferrer.ToString());
  }

  /// <summary>
  /// 删除记录
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void DeleteClick(object sender, EventArgs e)
  {
    Button b = sender as Button;
    int id = Convert.ToInt32(b.CommandArgument);
    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();
    OleDbCommand cmd = new OleDbCommand("Delete From [Student] Where [id]=@id", cn);
    cmd.Parameters.AddWithValue("@id", id);
    cmd.ExecuteNonQuery();
    cn.Close();
    Response.Redirect(Request.Url.ToString());
  }

  /// <summary>
  /// 插入新记录的公共函数
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void InsertNewRecord(object sender, EventArgs e)
  {
    string StudentTitle = ((TextBox)(sender as Button).NamingContainer.FindControl("NewTitle")).Text;
    if (StudentTitle.Trim() == "")
    {
      ErrorMsg.Text = "请输入姓名";
      return;
    }
    string StudentBirthDay = ((TextBox)(sender as Button).NamingContainer.FindControl("NewBirthDay")).Text;
    bool StudentGender = ((RadioButtonList)
      (sender as Button).NamingContainer.FindControl("NewGender")).SelectedValue == "男" ? true : false;
    string StudentClassName = ((DropDownList)
      (sender as Button).NamingContainer.FindControl("NewClassName")).SelectedValue;
    FileUpload oUpload = (FileUpload)(sender as Button).NamingContainer.FindControl("AddPhoto");
    String FileName = "";
    FileName = Guid.NewGuid().ToString("D") + System.IO.Path.GetExtension(oUpload.FileName);
    oUpload.SaveAs(Server.MapPath("~") + "\\" + FileName);
    string sql = "Insert Into Student (Title,BirthDay,Gender,PhotoPath,ClassName)";
    sql += " Values(@Title,@BirthDay,@Gender,@PhotoPath,@ClassName)";
    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();

    OleDbCommand cmd = new OleDbCommand(sql, cn);
    cmd.Parameters.AddWithValue("@Title", StudentTitle);
    cmd.Parameters.AddWithValue("@BirthDay", StudentBirthDay);
    cmd.Parameters.AddWithValue("@Gender", StudentGender);
    cmd.Parameters.AddWithValue("@PhotoPath", FileName);
    cmd.Parameters.AddWithValue("@ClassName", StudentClassName);

    cmd.ExecuteNonQuery();
    cn.Close();
    Response.Redirect(Request.FilePath.ToString());
  }

  /// <summary>
  /// 加载页面
  /// </summary>
  /// <param name="sender"></param>
  /// <param name="e"></param>
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!Page.IsPostBack)
    {
      DataBind();
    }
  }

  /// <summary>
  /// 绑定 GridView
  /// </summary>
  protected void DataBind()
  {
    String sql;
    OleDbConnection cn = new OleDbConnection(ConnectionString);
    cn.Open();

    sql = "SELECT * FROM [Student] ORDER BY [id] DESC";

    OleDbDataAdapter da = new OleDbDataAdapter(sql, cn);
    DataSet ds = new DataSet();
    da.Fill(ds);
    GridView1.DataSource = ds.Tables[0].DefaultView;
    GridView1.DataBind();
    cn.Close();
  }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>GridView 插入、删除、修改的例子</title>
  <style type="text/css">
    .preview_wrapper
    {
      display: inline-block;
      width: 300px;
      height: 300px;
    }
    .preview_fake
    {
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
    }
    .preview_size_fake
    {
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
      visibility: hidden;
    }
    .preview
    {
      width: 300px;
      height: 300px;
    }
  </style>
  <script type="text/javascript">
    function onUploadImgChange(sender, preview, preview_fake, preview_size_fake) {
      if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
        alert('图片格式无效！');
        return false;
      }
      var objPreview = document.getElementById(preview);
      var objPreviewFake = document.getElementById(preview_fake);
      var objPreviewSizeFake = document.getElementById(preview_size_fake);

      if (sender.files && sender.files[0]) {
        objPreview.style.display = 'block';
        objPreview.style.width = 'auto';
        objPreview.style.height = 'auto';
        objPreview.src = sender.files[0].getAsDataURL();
      } else if (objPreviewFake.filters) {
        sender.select();
        var imgSrc = document.selection.createRange().text;
        objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
        objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
        autoSizePreview(objPreviewFake);
        objPreview.style.display = 'none';
      }
    }
    function onPreviewLoad(sender) {
      autoSizePreview(sender);
    }
    function autoSizePreview(objPre) {
      objPre.style.width = 300 + 'px';
      objPre.style.height = 300 + 'px';
      objPre.style.marginTop = 0 + 'px';
      objPre.style.marginLeft = 0 + 'px';
    }
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id"
    OnRowDataBound="GridView1_RowDataBound" ShowFooter="true">
    <HeaderStyle BackColor="#ccff99" Font-Bold="true" />
    <Columns>
      <asp:TemplateField HeaderText="姓名">
        <ItemTemplate>
          <asp:PlaceHolder ID="LabelTitle" runat="server">
            <%#Eval("Title") %></asp:PlaceHolder>
          <asp:TextBox ID="uTitle" runat="server" Text='<%#Eval("Title") %>' Visible="false"></asp:TextBox>
        </ItemTemplate>
        <FooterTemplate>
          <asp:TextBox ID="NewTitle" runat="server"></asp:TextBox>
        </FooterTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="生日（yyyy-MM-dd格式）">
        <ItemTemplate>
          <asp:PlaceHolder ID="LabelBirthday" runat="server">
            <%#Eval("BirthDay", "{0:yyyy-MM-dd}")%></asp:PlaceHolder>
          <asp:TextBox ID="uBirthDay" runat="server" Text='<%#Eval("BirthDay", "{0:yyyy-MM-dd}")%> '
            Visible="false" />
        </ItemTemplate>
        <FooterTemplate>
          <asp:TextBox ID="NewBirthDay" runat="server"></asp:TextBox>
        </FooterTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="性别">
        <ItemTemplate>
          <asp:PlaceHolder ID="LabelGender" runat="server">
            <%#(Eval("Gender")).ToString() =="True"?"男":"女"%></asp:PlaceHolder>
          <asp:RadioButtonList ID="uGender" runat="server" RepeatDirection="Horizontal" Visible="false">
            <asp:ListItem Text="男"></asp:ListItem>
            <asp:ListItem Text="女"></asp:ListItem>
          </asp:RadioButtonList>
        </ItemTemplate>
        <FooterTemplate>
          <asp:RadioButtonList ID="NewGender" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Selected="true" Text="男"></asp:ListItem>
            <asp:ListItem Text="女"></asp:ListItem>
          </asp:RadioButtonList>
        </FooterTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="年级">
        <ItemTemplate>
          <asp:PlaceHolder ID="LabelClassName" runat="server">
            <%#Eval("ClassName")%></asp:PlaceHolder>
          <asp:DropDownList ID="uClassName" runat="server" Visible="false">
            <asp:ListItem Text="小学" Value="小学"></asp:ListItem>
            <asp:ListItem Text="中学" Value="中学"></asp:ListItem>
            <asp:ListItem Text="高中" Value="高中"></asp:ListItem>
            <asp:ListItem Text="大学" Value="大学"></asp:ListItem>
          </asp:DropDownList>
        </ItemTemplate>
        <FooterTemplate>
          <asp:DropDownList ID="NewClassName" runat="server">
            <asp:ListItem Text="小学" Value="小学"></asp:ListItem>
            <asp:ListItem Text="中学" Value="中学"></asp:ListItem>
            <asp:ListItem Text="高中" Value="高中"></asp:ListItem>
            <asp:ListItem Text="大学" Value="大学"></asp:ListItem>
          </asp:DropDownList>
        </FooterTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="照片">
        <ItemTemplate>
          <asp:PlaceHolder ID="LabelPhoto" runat="server" Visible="false">
            <div class="preview_wrapper">
              <div id="preview_fake_<%# Eval("id") %>" class="preview_fake">
                <img id="preview_<%# Eval("id") %>" src='<%# Eval("PhotoPath") %>' class="preview"
                  onload="onPreviewLoad(this)" />
              </div>
            </div>
            <img id="preview_size_fake_<%# Eval("id") %>" class="preview_size_fake" />
          </asp:PlaceHolder>
          <asp:PlaceHolder ID="PlaceHolder1" runat="server">
            <img class="preview" src='<%# Eval("PhotoPath") %>' />
          </asp:PlaceHolder>
          <br />
          <asp:FileUpload ID="uPhoto" runat="server" Visible="false" />
        </ItemTemplate>
        <FooterTemplate>
          <div class="preview_wrapper">
            <div id="preview_fake_0" class="preview_fake">
              <img id="preview_0" src='http://dotnet.aspx.cc/Images/pixel.gif' class="preview" onload="onPreviewLoad(this)" />
            </div>
          </div>
          <img id="preview_size_fake_0" class="preview_size_fake" />
           <br />
          <asp:FileUpload ID="AddPhoto" runat="server" onchange="onUploadImgChange(this,'preview_0', 'preview_fake_0', 'preview_size_fake_0')" />
        </FooterTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="操作">
        <ItemTemplate>
          <asp:Panel ID="PanelNormal" runat="server">
            <asp:Button ID="EditButton" runat="server" Text="修改" OnClick="EditClick" CommandArgument='<%#Eval("id") %>' />
            <asp:Button ID="DeleteButton" runat="server" Text="删除" OnClick="DeleteClick" CommandArgument='<%#Eval("id") %>' />
          </asp:Panel>
          <asp:Panel ID="PanelUpdate" runat="server" Visible="false">
            <asp:Button ID="UpdateButton" runat="server" Text="更新" OnClick="UpdateClick" CommandArgument='<%#Eval("id") %>' />
            <asp:Button ID="CancelButton" runat="server" Text="取消" OnClick="CancelClick" />
          </asp:Panel>
        </ItemTemplate>
        <FooterTemplate>
          <asp:Button ID="AddButton" runat="server" Text="添加新纪录" OnClick="AddClick" />
        </FooterTemplate>
      </asp:TemplateField>
    </Columns>
    <EmptyDataTemplate>
      <table cellspacing="0" rules="all" border="1" style="border-collapse: collapse;">
        <tr>
          <th>
            姓名
          </th>
          <th>
            生日（yyyy-MM-dd格式）
          </th>
          <th>
            性别
          </th>
          <th>
            年级
          </th>
          <th>
            照片
          </th>
          <th>
            操作
          </th>
        </tr>
        <tr><td>
          <asp:TextBox ID="NewTitle" runat="server"></asp:TextBox>
        </td><td>
          <asp:TextBox ID="NewBirthDay" runat="server"></asp:TextBox>
        </td><td>
          <asp:RadioButtonList ID="NewGender" runat="server" RepeatDirection="Horizontal">
            <asp:ListItem Selected="true" Text="男"></asp:ListItem>
            <asp:ListItem Text="女"></asp:ListItem>
          </asp:RadioButtonList>
        </td><td>
          <asp:DropDownList ID="NewClassName" runat="server">
            <asp:ListItem Text="小学" Value="小学"></asp:ListItem>
            <asp:ListItem Text="中学" Value="中学"></asp:ListItem>
            <asp:ListItem Text="高中" Value="高中"></asp:ListItem>
            <asp:ListItem Text="大学" Value="大学"></asp:ListItem>
          </asp:DropDownList>
        </td><td>
          <div class="preview_wrapper">
            <div id="preview_fake_0" class="preview_fake">
              <img id="preview_0" src='http://dotnet.aspx.cc/Images/pixel.gif' class="preview" onload="onPreviewLoad(this)" />
            </div>
          </div>
          <img id="preview_size_fake_0" class="preview_size_fake" />
           <br />
          <asp:FileUpload ID="AddPhoto" runat="server" onchange="onUploadImgChange(this,'preview_0', 'preview_fake_0', 'preview_size_fake_0')" />
        </td><td>
          <asp:Button ID="b" runat="server" Text="添加学生" OnClick="AddClick" />
        </td></tr>
      </table>
    </EmptyDataTemplate>
  </asp:GridView>
  <div id="Pager" runat="server" style="text-align: left; padding: 10px 0;"></div>
  <asp:Label ID="ErrorMsg" runat="server" ForeColor="red"></asp:Label>
  </form>
</body>
</html>