باز کردن پنجره Popup در ASP.NET با استفاده از Code Behind

قطعا در بسیاری از Applicationهای شما مواردی پیش آمده است که شما نیاز داشتید صفحه‌ای خاص را در یک پنجره Popup باز کنید. این کار به سادگی با استفاده از یک خط کدنویسی ساده جاوا اسکریپت امکان پذیر است. حتی در صورتی که فایلی که کد جاوا اسکریپت شما در آن قرار می گیرد یک فایل Server Side باشد نیز به علت اینکه در تمامی زبانهای Server Side پیش از ASP.NET کلیه کدها به صورت Block Script و لابلای کدهای HTML قرار می گرفت منعی در استفاده از بلاکهای جاوا اسکریپت نیز وجود نداشت. با ظهور ASP.NET و قابلیت قدرتمند آن یعنی Code Behind برنامه نویسان از کلنجار رفتن با کدهای تو در توی طولانی رها شده و کلیه کدهای Server Side خود را در Code Behind می نویسند و حاصل کار آنها یک فایل aspx. است که در آن اثری از کدنویسی غیر از تگهای HTML (و تگهای توسعه یافته ASP.NET) دیده نمی‌شود. حال اگر شما بخواهید یک Popup باز کنید چه می‌کنید؟ آیا تابع جاوا اسکریپت بازکننده Popup را لابلای کدهای HTML صفحه خود می‌نویسید؟ این روش به نظر صحیح نمی آید. چرا که ما خود را از قابلیت خوانانویسی کدهای HTML محروم کرده و باز قسمتی از برنامه نویسی خود را به درون فایل اصلی خود انتقال داده‌ایم. چه می توان کرد؟ آیا راهی برای اینکه ما با استفاده از کدنویسی در Code Behind یک Popup باز کنیم هست؟ پاسخ مثبت است. در ادامه مقاله به این موضوع می پردازیم: در این روش در واقع ما کدهای جاوا اسکریپت خود را به صورت یک attribute به کنترل مورد نظر خود Add می کنیم. اما برای اینکه برای هر کنترل کدنویسی را تکرار نکنیم این قسمت را درون یک ساب روتین قرار می دهیم:

using System.Web.UI.WebControls;

public void OpenPopUp(WebControl opener, string PagePath) {

   string clientScript;

   clientScript = "window.open('" + PagePath + "')";

   opener.Attributes.Add("OnClick", clientScript);           

}

طرز کار بسیار ساده است! مقادیر ورودی یک کنترل و صفحه‌ای است که باید باز شود. کد جاوا اسکریپت در یک متغیر رشته‌ای به نام clinetString قرار داده می‌شود و با استفاده از متد Add به کنترل اضافه می‌شود. متد Add دو مقدار دریافت می‌کند: ابتدا نام property و یا event و سپس مقدار آن که پس از Generate شدن صفحه به تگ HTML تولید شده اضافه می‌شود.

حال شما می‌توانید به راحتی به صورت زیر از این روتین استفاده کنید:

OpenPopup(Button1, http://www.google.com);

که در آن Butoon1 یک کنترل از نوع asp:button است. طرز کار بدین صورت است که پنجره بلافاصله پس از فراخوانی روتین باز نمی‌شود بلکه کنترل شما را برای رویداد مورد نظر تنظیم می‌کند و در هنگام وقوع رویداد (مثلا کلیک کردن روی دکمه) روتین اجرا می‌شود.

با کمی کدنویسی اضافه می‌توان ظاهر پنجره باز شده را نیز کنترل کرد. برای مثال شما می توانید طول و عرض پنجره، عنوان آن، اسکرول بار و... را تنظیم کنید:

public shared void OpenPopUp(WebControl opener, string PagePath,

string windowName, int width, int height( {

   string windowAttribs;

   string clientScript ;

   windowAttribs = "width=" + width + "px," + "height=" + height + "px," 

      "left='+((screen.width -" & width & ") / 2)+'," +

      "top='+ (screen.height - " & height & ") / 2+'";

   clientScript = "window.open('" + PagePath + "','" + windowName + "','" +

      windowAttribs + "'); return false;";

   opener.Attributes.Add("OnClick", clientScript);           

}

مزیت استفاده از این روش این است که به علت اینکه شما این تابع را یک بار و آن هم در کلاس و یا Code Behind قرار می‌دهید می‌توانید به راحتی خطاهای برنامه نویسی خود را قبل از اینکه اجرای کد خود را آغاز نمایید، پیدا کنید.

اضافه کردن تصویر به پایگاه داده

در بسیاری مواقع ما نیاز به افزودن تصویر به پایگاه داده داریم. از آنجایی که دسترسی به فایلهای موجود در سرور جهت استفاده هکرها بسیار سهل الوصول است، برخی مواقع نمی‌توانیم اطلاعات حساس را در قالب فایلهای تصویری در سرور ذخیره کنیم. به همین جهت بهتر آن است که در قالب نوع داده image در بانک اطلاعاتی ذخیره شود.

در این قسمت موارد زیر بررسی می شوند:

§         بررسی پیش نیازهای اضافه نمودن فایل تصویری

§         کار با شیء Stream

§         پیدا کردن اندازه و نوع تصویری که آپلود می شود

§         چگونگی استفاده از متد InputStream

بررسی پیش نیازهای اضافه نمودن فایل تصویری
دو مورد اصلی که قبل از شروع آپلود نیاز داریم عبارتند از:

1.       - تنظیم خاصیت enctype فرم مربوطه (در برچسبForm) به enctype="multipart/form-data"
- داشتن <input type=file> که به کاربر اجازه انتخاب فایل مورد نظرش را می دهد. (فایلی که در پایگاه داده باید ذخیره شود) و یک Submit button جهت اجرای عملیات مربوط به آپلود کردن فای
- استفاده از فضانام System.IO جهت سروکار داشتن با شیء Stream

2.       سه پارامتر بالا در یک صفحه aspx بکار می روند.ما همچنین به پیش نیازهای زیر در SQL Server نیازمندیم:
- داشتن حداقل یک جدول با فیلدی از نوع image
- بهتر است که فیلد دیگری از نوع varchar جهت ذخیره تایپ تصویر داشته باشیم

روند کار بدین صورت است که در ابتدا محتویات فایل تصویر خوانده می‌شود و سپس تصویر به جدول افزوده می‌شود. در زیر کد مربوط به رویداد OnClick مربوط به Submit button که تصویر را خوانده و به جدول SQL اضافه می‌کند، می‌پردازیم:

Public Sub AddPerson(sender As Object, e As EventArgs)

   Dim intImageSize As Int64

   Dim strImageType As String

   Dim ImageStream As Stream

   ' Gets the Size of the Image

   intImageSize = PersonImage.PostedFile.ContentLength

   ' Gets the Image Type

   strImageType = PersonImage.PostedFile.ContentType

   ' Reads the Image

   ImageStream = PersonImage.PostedFile.InputStream

   Dim ImageContent(intImageSize) As Byte

   Dim intStatus As Integer

   intStatus = ImageStream.Read(ImageContent, 0, intImageSize)

   ' Create Instance of Connection and Command Object

   Dim myConnection As New SqlConnection(

ConfigurationSettings.AppSettings("ConnectionString"))

   Dim myCommand As New SqlCommand("sp_person_isp", myConnection)

   ' Mark the Command as a SPROC

   myCommand.CommandType = CommandType.StoredProcedure

   ' Add Parameters to SPROC

   Dim prmPersonImage As New SqlParameter("@PersonImage", SqlDbType.Image)

   prmPersonImage.Value = ImageContent

   myCommand.Parameters.Add(prmPersonImage)

   Dim prmPersonImageType As New SqlParameter("@PersonImageType",

SqlDbType.VarChar, 255)

   prmPersonImageType.Value = strImageType

   myCommand.Parameters.Add(prmPersonImageType)

   Try

      myConnection.Open()

      myCommand.ExecuteNonQuery()

      myConnection.Close()

      Response.Write("New person successfully added!")

   Catch SQLexc As SqlException

      Response.Write("Insert Failed. Error Details are: " & SQLexc.ToString())

   End Try

End Sub

شیء PersonImage نام کنترل HTMLInputFile است. در ابتدا ما نیاز داریم که اندازه تصویری که جهت اضافه کردن انتخاب شده را بدانیم که توسط کد زیر قابل اندازه گیری است:

intImageSize = PersonImage.PostedFile.ContentLength

سپس نوع تصویر را با استفاده از خاصیت ContentType دریافت می کنیم. حال باید یک استریم از تصویر مربوطه دریافت شود:

ImageStream = PersonImage.PostedFile.InputStream

در اینجا ما یک آرایه از بایتها بنام ImageContent که آماده نگهداری محتویات تصویر است، داریم. تصویر ورودی توسط متد Read از شیء Stream خوانده می شود. متد Read سه آرگومان می گیرد:
1. موقعیت مکانی که محتویات تصویر در آن باید کپی شود
2. مکان شروع جهت خواندن
3. تعداد بایتهایی که باید خوانده شود

و دستور مربوط به خواندن هم به شکل زیر است:

intStatus = ImageStream.Read(ImageContent, 0, intImageSize) 

حالا ما می خواهیم محتویات تصویر ورودی را که خوانده ایم به یک جدول SQL اضافه کنیم. به همین منظور از یک زیرروال ذخیره شده که تصویر و نوع آن را به یک جدول اضافه می کند، بهره می بریم. حالا ما می خواهیم محتویات تصویر ورودی را که خوانده ایم به یک جدول SQL اضافه کنیم. به همین منظور از یک زیرروال ذخیره شده که تصویر و نوع آن را به یک جدول اضافه می کند، بهره می بریم.

فایل aspx مربوطه:

<%@ Page Language="vb" %>

<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>

<%@ Import Namespace="System.IO" %>

<html>

   <head>

      <title>Inserting Image to a SqlServer</title>

      <script runat=server>

         Public Sub AddPerson(sender As Object, e As EventArgs)

            ' above code

         End Sub    

      </script>

   </head>

   <body>

      <form enctype="multipart/form-data" runat="server">

         <input type="file" id="PersonImage" runat=server />

         <asp:Button Text="Add Person" OnClick="AddPerson" Runat=server />

    </form>

  </body>

</html>

جدول و زیرروال استفاده شده:

Drop Table Person

Go

Create Table Person

(

PersonID Int Identity,

PersonEmail Varchar(255),

PersonName Varchar(255),

PersonSex Char(1),

PersonDOB DateTime,

PersonImage Image,

PersonImageType Varchar(255)

|+| 
  نظرات ()