نحوه بارگزاری تصویر در کنترل GridView در Asp.Net
چهارشنبه 2 اردیبهشت 1394در این مقاله نحوه قرار دادن و بارگزاری تصویر در کنترل GridView در Asp.Net را شرح خواهیم داد
کنترل GridView یک کنترل برای نمایش و ویرایش اطلاعات مربوط به یانک اطلاعاتی در Web Application میباشد . این کنترل یه صورت جدول نمایش داده میشود یا به عبارت دیگر به صورت مجموعه ای از سطر و ستون ها نمایش داده میشود .در کنترل GridView هر ستون در یک TemplateField ایجاد میشود و هر TemplateField می تواند شامل HeaderTemplate , ItemTemplate , EditItemTemplate و FooterTemplate می باشد .
HeaderTemplate : که در هر TemplateField فقط یکبار قابل استفاده میباشد .برای نمایش عنوان ستون استفاده میشود
ItemTemplate : برای نمایش اطلاعات بانک اطلاعاتی استفاده میشود , قابلیت استفاده چندین مرتبه را دارد .
EditItemTemplate : به کاربر اجازه ویرایش اطلاعات هر ردیف را میدهد .
FooterTemplate : که در هر Templatefield یکبار قابل استفاده میباشد و برای نمایش متن انتهای ستون استفاده میشود
رویدادهای مربوط به کنترل GridView :
OnRowEditing : هنگامی که دکمه ای با خاصیت "CommandName="Edit کلیک می شود , اجرا می شود .
OnRowUpdating : هنگامی که دکمه ای با خاصیت "CommandName="Updateکلیک می شود , اجرا می شود .
OnRowDeleting : هنگامی که دکمه ای با خاصیت "CommandName="Deleteمی شود , اجرا می شود .
OnRowCanceling : هنگامی که دکمه ای با خاصیت "CommandName="Cancelمی شود , اجرا می شود .
ConnectionString را در Web.config تنظیم میکنیم :
<connectionStrings> <add name="connection1" connectionString="Data Source=.;Initial Catalog=northwind;integrated security=true" providerName="System.Data.SqlClient"/> </connectionStrings>
سپس یک صفحه به پروژه اضافه میکنیم و تگ مربوط به کنترل GridView را در صفحه قرار میدهیم .
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.hdrow {
text-align:center;
color:White;
background-color:midnightblue;
height:30px;
}
.gridview
{
width:50%;
background-color:white;
margin:0px auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="false" OnRowEditing="gv1_RowEditing" OnRowUpdating="gv1_RowUpdating" OnRowCancelingEdit="gv1_RowCancelingEdit" OnRowDeleting="gv1_RowDeleting" CssClass="gridview" OnPageIndexChanging="gv1_PageIndexChanging" PageSize="3" AllowPaging="true">
<Columns>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<HeaderTemplate>
<asp:Label ID="hlbleid" runat="server" Text="Employee Id"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbleid" runat="server" Text='<%# Eval("EmpId") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<HeaderTemplate>
<asp:Label ID="hlblename" runat="server" Text="Employee Name"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblename" runat="server" Text='<%# Eval("EmpName") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtename" runat="server" Text='<%# Eval("EmpName") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<HeaderTemplate>
<asp:Label ID="hlblemid" runat="server" Text="Email ID"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblemid" runat="server" Text='<%# Eval("EmpEmailId") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtemid" runat="server" Text='<%# Eval("EmpEmailId") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<HeaderTemplate>
<asp:Label ID="hempnumber" runat="server" Text="Mobile Number"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblmnumber" runat="server" Text='<%# Eval("EmpMobileNum") %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtmnumber" runat="server" Text='<%# Eval("EmpMobileNum") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<HeaderTemplate>
<asp:Label ID="hlblimg" runat="server" Text="Image"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Image ID="img1" runat="server" ImageUrl='
<%# "~/Images/"+Eval("EmpImage") %>' Height="100px" Width="100px" />
</ItemTemplate>
<EditItemTemplate>
<asp:FileUpload ID="fu1" runat="server" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderStyle CssClass="hdrow" />
<ItemTemplate>
<asp:Button ID="btnedit" runat="server" Text="Edit" CommandName="Edit" />
<asp:Button ID="btndelete" runat="server" Text="Delete" CommandName="Delete" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="btnupdate" runat="server" Text="Update" CommandName="Update" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
سپس در قسمت کد نویسی مربوط به صفحه کدهای زیر را قرار می دهیم که جزء به جزء توضیح خواهیم داد
ابتدا از کلای SqlConnection که برای اتصال به بانک اطلاعاتی می باشد یک object جدید ایجاد میکنیم .
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["connection1"].ConnectionString);
سپس یک متد برای اتصال کنترل GridView به بانک اطلاعاتی ایجاد میکنیم .
public void Bind()
{
SqlCommand cmd = new SqlCommand("select * from Employee", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Employee");
gv1.DataSource = ds;
gv1.DataBind();
}
سپس یک متد برای اتصال به بانک تعریف میکنیم :
public void Bind()
{
SqlCommand cmd = new SqlCommand("select * from Employee", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Employee");
gv1.DataSource = ds;
gv1.DataBind();
}
متد دستور ویرایش نیز به صورت زیر میباشد :
protected void gv1_RowEditing(object sender, GridViewEditEventArgs e)
{
gv1.EditIndex = e.NewEditIndex;
Bind();
}
protected void gv1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int index = e.RowIndex;
GridViewRow row = (GridViewRow) gv1.Rows[index];
Label eid = (Label) row.FindControl("lbleid");
TextBox ename = (TextBox) row.FindControl("txtename");
TextBox emid = (TextBox) row.FindControl("txtemid");
TextBox mnumber = (TextBox) row.FindControl("txtmnumber");
FileUpload fu = (FileUpload) row.FindControl("fu1");
if (fu.HasFile)
{
string file = System.IO.Path.Combine(Server.MapPath("~/Images/"), fu.FileName);
fu.SaveAs(file);
SqlCommand cmd = new SqlCommand("update Employee set EmpImage = '" + fu.FileName + "' where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
con.Open();
int res = cmd.ExecuteNonQuery();
con.Close();
}
SqlCommand cmd1 = new SqlCommand("update Employee set EmpName='" + ename.Text + "',EmpEmailId='" + emid.Text + "',EmpMobileNum=" + Convert.ToInt64(mnumber.Text) + "", con);
con.Open();
int res1 = cmd1.ExecuteNonQuery();
con.Close();
if (res1 == 1)
{
Response.Write("<script>alert('Updation done!')</script>");
}
gv1.EditIndex = -1;
Bind();
}
و دستور حذف یک رکورد از جدول بانک اطلاعاتی به صورت زیر میباشد :
protected void gv1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int index = e.RowIndex;
GridViewRow row = (GridViewRow) gv1.Rows[index];
Label eid = (Label) row.FindControl("lbleid");
SqlCommand cmd = new SqlCommand("delete from Employee where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
con.Open();
int res = cmd.ExecuteNonQuery();
con.Close();
if (res == 1)
{
Response.Write("<script>alert('Deletion done!')</script>");
}
Bind();
}
در ادامه کلیه دستورات را می توانید مشاهده کنید :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Web.Configuration;
public partial class _Default: System.Web.UI.Page
{
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["connection1"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Bind();
}
}
public void Bind()
{
SqlCommand cmd = new SqlCommand("select * from Employee", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds, "Employee");
gv1.DataSource = ds;
gv1.DataBind();
}
protected void gv1_RowEditing(object sender, GridViewEditEventArgs e)
{
gv1.EditIndex = e.NewEditIndex;
Bind();
}
protected void gv1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int index = e.RowIndex;
GridViewRow row = (GridViewRow) gv1.Rows[index];
Label eid = (Label) row.FindControl("lbleid");
TextBox ename = (TextBox) row.FindControl("txtename");
TextBox emid = (TextBox) row.FindControl("txtemid");
TextBox mnumber = (TextBox) row.FindControl("txtmnumber");
FileUpload fu = (FileUpload) row.FindControl("fu1");
if (fu.HasFile)
{
string file = System.IO.Path.Combine(Server.MapPath("~/Images/"), fu.FileName);
fu.SaveAs(file);
SqlCommand cmd = new SqlCommand("update Employee set EmpImage = '" + fu.FileName + "' where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
con.Open();
int res = cmd.ExecuteNonQuery();
con.Close();
}
SqlCommand cmd1 = new SqlCommand("update Employee set EmpName='" + ename.Text + "',EmpEmailId='" + emid.Text + "',EmpMobileNum=" + Convert.ToInt64(mnumber.Text) + "", con);
con.Open();
int res1 = cmd1.ExecuteNonQuery();
con.Close();
if (res1 == 1)
{
Response.Write("<script>alert('Updation done!')</script>");
}
gv1.EditIndex = -1;
Bind();
}
protected void gv1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
gv1.EditIndex = -1;
Bind();
}
protected void gv1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int index = e.RowIndex;
GridViewRow row = (GridViewRow) gv1.Rows[index];
Label eid = (Label) row.FindControl("lbleid");
SqlCommand cmd = new SqlCommand("delete from Employee where EmpId=" + Convert.ToInt32(eid.Text) + "", con);
con.Open();
int res = cmd.ExecuteNonQuery();
con.Close();
if (res == 1)
{
Response.Write("<script>alert('Deletion done!')</script>");
}
Bind();
}
protected void gv1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
gv1.PageIndex = e.NewPageIndex;
Bind();
}
}
- ASP.net
- 2k بازدید
- 2 تشکر