توضیحات و دانلود

نمایش تصاویر در GridView Control با استفاده از مسیر ذخیره شده در پایگاه داده SQL Server با asp.net
0 0
نمایش تصاویر در GridView Control با استفاده از مسیر ذخیره شده در پایگاه داده SQL Server با asp.net

با سلام در این مقاله با مثال توضیح خواهیم داد که چگونه تصاویر را در یک پوشه (دایرکتوری) بر روی دیسک و مسیر آنها در پایگاه داده ذخیره کنید و سپس آنها را در کنترل GridView در ASP.Net با استفاده از C # و VB.Net نمایش دهید.
مفهوم  این روش این است که تصاویر روی دیسک را در یک فولدر که در دایرکتوری ریشه وب سایت قرار دارد ذخیره کنید در حالی که مسیر نسبی تصاویر همراه با نام فایل در پایگاه داده SQL Server ذخیره می شود.
بانک اطلاعاتی
 یک جدول با نام Files ایجاد کنید که شیوه آن به صورت زیر تعریف شده است.

توجه :

شما می توانید جدول پایگاه داده SQL را با کلیک روی لینک دانلود کنید.فایل SQL را دانلود کنید
کدHTML
کد HTML زیر شامل کنترل ASP.Net FileUpload، دکمه، GridView و یک DIV HTML است.

<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick = "Upload" />
<hr />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="FileId" HeaderText="Image Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
    </Columns>
</asp:GridView>
<div id="dialog" style="display: none">
</div>

فضاهای نام
شما باید فضای نامهای زیر را وارد کنید.
C #

using System.IO;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;

VB.Net

Imports System.IO
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

نمایش تصاویردر GridViewبا استفاده از مسیر ذخیره شده در پایگاه داده با ASP.Net
درون پردازش رویداد بارگذاری صفحه ، رکوردها از جدول پایگاه داده جمع آوری می شوند و برای کنترل GridView استفاده می شوند.
C #

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(constr))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM Files", conn))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvImages.DataSource = dt;
                gvImages.DataBind();
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using conn As SqlConnection = New SqlConnection(constr)
            Using sda As SqlDataAdapter = New SqlDataAdapter("SELECT * FROM Files", conn)
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvImages.DataSource = dt
                gvImages.DataBind()
            End Using
        End Using
    End If
End Sub

آپلود و ذخیره تصویر در پوشه و در مسیر  پایگاه داده SQL Server
رویدادhanler زیر هنگام فراخوانی یک فایل تصویر انتخاب می شود و دکمه آپلود روی آن کلیک می شود.
فایل تصویر آپلود شده برای اولین بار در پوشه با نام Uploads در پوشه پروژه ذخیره می شود و سپس نام و مسیر فایل تصویر در جدول پایگاه داده SQL Server وارد می شود.
توجه :

مسیر نسبی فایل تصویر  برای سهولت تبدیل به URL مطلق یا مطلق در پایگاه داده ذخیره می شود .
C #

protected void Upload(object sender, EventArgs e)
{
    //Extract Image File Name.
    string fileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
 
    //Set the Image File Path.
    string filePath = "~/Uploads/" + fileName;
 
    //Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath));
 
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection conn = new SqlConnection(constr))
    {
        string sql = "INSERT INTO Files VALUES(@Name, @Path)";
        using (SqlCommand cmd = new SqlCommand(sql, conn))
        {
            cmd.Parameters.AddWithValue("@Name", fileName);
            cmd.Parameters.AddWithValue("@Path", filePath);
            conn.Open();
            cmd.ExecuteNonQuery();
            conn.Close();
        }
    }
 
    Response.Redirect(Request.Url.AbsoluteUri);
}

VB.Net

Protected Sub Upload(ByVal sender As Object, ByVal e As EventArgs)
    'Extract Image File Name.
    Dim fileName As String = Path.GetFileName(FileUpload1.PostedFile.FileName)
 
    'Set the Image File Path.
    Dim filePath As String = "~/Uploads/" & fileName
 
    'Save the Image File in Folder.
    FileUpload1.PostedFile.SaveAs(Server.MapPath(filePath))
 
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using conn As SqlConnection = New SqlConnection(constr)
        Dim sql As String = "INSERT INTO Files VALUES(@Name, @Path)"
        Using cmd As SqlCommand = New SqlCommand(sql, conn)
            cmd.Parameters.AddWithValue("@Name", fileName)
            cmd.Parameters.AddWithValue("@Path", filePath)
            conn.Open()
            cmd.ExecuteNonQuery()
            conn.Close()
        End Using
    End Using
 
    Response.Redirect(Request.Url.AbsoluteUri)
End Sub

پیاده سازی زوم هنگامی که تصویر با استفاده از jQuery کلیک شده است
در روش کلیک روی jQuery به تمام عناصر HTML تصویر در GridView اختصاص داده شده است. هنگامی که یک عنصر HTML  روی صفحه کلیک می شود، عنصر Image کلون می شود و در اندازه ی بزرگتر در یک jQuery UI Model Popup ظاهر می شود .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/start/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            height: 600,
            width: 600,
            title: "Zoomed Image"
        });
        $("[id*=gvImages] img").click(function () {
            $('#dialog').html('');
            $('#dialog').append($(this).clone());
            $('#dialog').dialog('open');
        });
    });
</script>

سوابق فایل های تصویری وارد شده است

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :