Pop up a ASP page using javascript and refreash the parent page when close the pop up page

Introduction: In this article I will show how to open a page as pop up using javascript. And when close the pop up page how to refresh the parent page where the pop up page is called. It is simple but  some time it will helpful. Suppose you have a page that contain a grid and a button which pop up a page to add data in the grid. Then you need the mechanism to add data in the grid and refresh the page so that the change reflect the page. Let us see how simple it is.

Step1:  In first step we create a parent page which contains just a button called PoP UP and a text box which show the current time including hour minute and second. The script of the asp page is given below:

<table>
        <tr>
            <td>
                Date:
            </td>
            <td>
                <asp:TextBox ID="txtDate" runat="server" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <asp:Button ID="btnPopup" runat="server" Text="PoP UP" OnClick="btnPopup_Click" />
            </td>
        </tr>
    </table>
From this page when we click the PoP UP button a small page will pop up contains some text and a button called OK. After clicking the OK button the pop up page will hide and the parent page will refresh (the date text box show different value).
Step2: For the pop up page I create a asp page named PopupPage. The script of the page given below:
<div>
        <p>
            Hi! How are you.<br />
            This is a pop up page.
        </p>
    </div>
    <table>
        <tr>
            <td>
                <asp:Button ID="btnOk" runat="server" Text="OK" OnClick="btnOk_Click" />
            </td>
        </tr>
    </table>
Step3: Now we write a function to show the pop up page in parent page code behind file i.e, .cs file. The function looks like follows:
void PopUpPage()
        {
            StringBuilder sb = new StringBuilder();
            sb.Append("<script language='JavaScript'>" + "\r\n");
            sb.Append("window.open('PopupPage.aspx', 'CustomPopUp',");
            sb.Append("'width=300,height=300,addressbar=0,menubar=0, resizable=0,");
            sb.Append("status=0,toolbar=0,titlebar=0,location=0,left=250,top=250');");
            sb.Append("</script>\r\n");

            Type t = this.GetType();
            if (!Page.ClientScript.IsClientScriptBlockRegistered(t, "PopupScript"))
            {
                Page.ClientScript.RegisterClientScriptBlock(t, "PopupScript", sb.ToString());
            }
        }
Now call the function from the PoP UP button's click event. It will show the pop up page. When I run my parent page and click the PoP UP button the page looks like the following figure:

Step4: Now the refresh part. In my parent page date show local current time. I want to refresh the page when i click the OK button of pop up page. To do this i add a line in OK buttons click event which close the pop up and refresh the parent page. Just add the following line in OK buttons click event.

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "RefreshParent", "<script>opener.location=(window.opener.location.href);window.close();</script>");

After that when i click the OK button the pop up page close and date refresh means the parent page refresh. Which looks like the following figure.

 

Conclusion: This is simple and easy but some time it will be very helpful. If any one will get benefit from it my work will be success. For any query about the article please send me a mail.

Shimul Mahmud
azkhairuzzaman@gmail.com

Store Image and Video in Database using ASP.Net and C#

Introduction:
It is a common case to store image and video in database. But store image/video in database takes huge amount of space. So after some time in Google I learn a technique to store image/video in database easily. In my case I store only the name of the image/video in a varchar field in database and the actual file uploaded in the server. Let see the simple but very useful technique to store image/video.
Step1: First we create a simple ASP.Net project named StoreImage. An asp page and a folder to load the image/video. The solution explorer looks like

Step2: In aspx page I use only a file up loader control of asp and a two button one for upload and another for save. The aspx page code as follows,

<form id="uploadForm" runat="server">

<table>

<tr>

<td>

Uploaded Image:

td>

<td>

<asp:Image ID="imageFile" runat="server" />

td>

tr>

<tr>

<td>

<asp:FileUpload ID="fileUploadImage" runat="server" />

td>

<td>

<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click"/>

td>

tr>

<tr>

<td colspan="2">

<asp:Label ID="lblError" runat="server" ForeColor="Red">asp:Label>

td>

tr>

<tr>

<td colspan="2">

<asp:Button ID="btnSave" runat="server" Text="Save Image"

onclick="btnSave_Click" />

td>

tr>

table>

form>

Step3: In the code behind use the following code to upload the image in server’s particular folder in our case the folder is ‘Uploaded Image’

protected void btnUpload_Click(object sender, EventArgs e)

{

if (fileUploadImage.PostedFile != null && fileUploadImage.PostedFile.ContentLength > 0)

{

//Get the file extension and check if it is jpg,png or wmv.

fileExtension = Path.GetExtension(fileUploadImage.PostedFile.FileName);

//If file type jpg/png/wmv then enter the block

if (fileExtension.ToLower().Equals(".jpg") || fileExtension.ToLower().Equals(".png") || fileExtension.ToLower().Equals(".wmv"))

{

//get file size

fileSize = fileUploadImage.PostedFile.ContentLength;

//if file size more than 4MB then show error message

if (fileSize / 1024 > 4096)

{

lblError.Text = "File size can not be more than 4MB";

return;

}

else

{

//get the uploaded file name

fileName = Path.GetFileName(fileUploadImage.PostedFile.FileName);

//save the file in location of server

fileUploadImage.PostedFile.SaveAs(HttpContext.Current.Server.MapPath("~/Uploaded Image/" + Path.GetFileName(fileUploadImage.PostedFile.FileName)));

//get the server URI

ServerUri = System.Configuration.ConfigurationManager.AppSettings["ServerUrl"].ToString();

//Create the image URI

imageUri = ServerUri + "/Uploaded Image/" + fileName;

//Show the uploaded iamge in imagefile

imageFile.ImageUrl = ServerUri + "/Uploaded Image/" + fileName;

}

}

else

{

lblError.Text = "Unsupported file format. Please select jpg, pig or wmv file";

return;

}

}

else

{

lblError.Text = "No file selected";

return;

}

}

We assume that we just upload jpg png or wmv file.

To get the server URL we add an extra line in web.config file. The line is

<appSettings>

<add key ="ServerUrl" value="http://localhost:4122" />

appSettings>

For your case it may be different. After show the location of file and click the Upload button my page looks like

Step4: Now we want to save the image name in database. To do so first we read the file name from server then we save it to database. Suppose our database hold a table named image which has two field OID and ImageName. So to save it in database we need the following code in the Save button’s event handler.

bool SaveImage()

{

bool result = false ;

if (imageUri != null)

{

string[] imageName = imageUri.Split('/');

//check the file extension if the extension jpg/png then content type IMG

if (imageName[imageName.Length - 1].Contains("jpg") || imageName[imageName.Length - 1].Contains("png"))

{

SqlConnection conn = new SqlConnection(ConfigurationSettings.AppSettings["ConnectionString"]);

string query = "";

query += " insert into t_ image (OID, ImageName) ";

query += " values (@OID, @ ImageName) ";

try

{

SqlCommand command = new SqlCommand();

command.Connection = conn;

command.CommandType = System.Data.CommandType.Text;

command.CommandText = query;

command.Parameters.AddWithValue("OID", "1");

command.Parameters.AddWithValue("ImageName ", imageName[imageName.Length - 1]);

conn.Open();

if (command.ExecuteNonQuery() == 1)

{

result = true;

}

}

catch (Exception ex)

{

result = false;

}

finally

{

conn.Close();

conn.Dispose();

}

}

}

return result;

}

protected void btnSave_Click(object sender, EventArgs e)

{

if (SaveImage())

{

lblError.Text = "Image Save Successfully";

}

}

Here imageUri is a static global field which hold the image url when upload the image to the server.

Hope it will help you little bit. Thank you very much. For any query please don’t be hesitate to write me.

Shimul Mahmud

azkhairuzzaman@gmail.com