Create Radio Button Dynamically like gmail User ID suggestion

Introduction: In my project I face a problem that generate user id dynamically and show it in a radio button list. For example when create a new gmail account user first time supply user id and if the user id is not available the gmail show some user id as suggestion. After some google i found how to generate radio button dynamically but this was not sufficient for me. So I decide to write some thing so that people may get help from my writing.

Procedure: First I create a page that contain

                 1. A text box which is used to supply the user ID.

                 2. A button that is used to check availability.

If the user id is not available then a radio button group with suggested user id will show below the text box. This is the scenario. Let see how can we do that with javascript and asp.Net.

Step1: Add the aspx page that contain the text box and the button. The script of the page is as follows:

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Master Pages/LogedIn.Master" AutoEventWireup="true" CodeBehind="RadioButtonTest.aspx.cs" Inherits="JqueryTest.RadioButtonTest" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

    <div>
        User ID:
        <asp:TextBox ID = "txtUserID" runat = "server" />
        <input id="btnCheckID" value="Check availability"  type="button" onclick="usernameChecker();" />
        <span id="spanAvailability"></span>
      
    </div>
    <div id="divRadiolist">
    </div>
   
</asp:Content>

Step2: Now add the necessary javascript code below the button and span. The javascript code is given below:

<script type="text/javascript">
            var usernameCheckerTimer;

            var spanAvailability = document.getElementById("spanAvailability");
            var dvSuggest = document.getElementById("divRadiolist");
            function usernameChecker() {
                var username1 = document.getElementById("ctl00_ContentPlaceHolder1_txtUserID");
                var username = username1.value;
                clearTimeout(usernameCheckerTimer);
              
                    spanAvailability.innerHTML = "<span style='color: #ccc;'>checking...</span>";
                    usernameCheckerTimer = setTimeout("checkUsernameUsage('" + username + "');", 750);
              }

            function checkUsernameUsage(username) {
                // initiate the ajax pagemethod call
                // upon completion, the OnSucceded callback will be executed
                PageMethods.IsUserAvailable(username, OnSucceeded);
            }

            // Callback function invoked on successful completion of the page method.
            function OnSucceeded(result, userContext, methodName) {
                if (methodName == "IsUserAvailable") {

                    if (result == "0") {
                        spanAvailability.innerHTML = "<span style='color: DarkGreen;'>Available</span>";
                        divRadiolist.style.display = "none";
                    }
                    else {
                        spanAvailability.innerHTML = "<span style='color: Red;'>Unavailable</span>";
                        divRadiolist.style.visibility = "visible";
                        /** This code is for show the suggesstion.Added by zafor 2010/10/27  **/
                        var checkAvailable = result.toString().split('|');
                        //Two dimentional array hold suggested user id
                        var arrData = [["0", checkAvailable[0]], ["1", checkAvailable[1]], ["2", checkAvailable[2]], ["3", checkAvailable[3]]];

                        //read div which show available user id
                        var radioDiv = document.getElementById("divRadiolist");
                        var username1 = document.getElementById("ctl00_ContentPlaceHolder1_txtUserID");
                        var username = username1.value;

                        radioDiv.innerHTML = "<p style='color: Red;'>" + username + " is not available but the followings are</p>";
                        //This for loop used to create the radio list
                        for (var i = 0; i < arrData.length; i++) {
                            var createRadioItem = document.createElement("input");
                            createRadioItem.type = "radio";
                            createRadioItem.name = "radioButtonGroup";
                            createRadioItem.id = "radioItem_" + i;

                            createRadioItem.value = arrData[i][1]
                            createRadioItem.setAttribute("onclick", "JavaScript:return getSelectedRadioValue()");

                            var objTextNode = document.createTextNode(" " + arrData[i][1]);

                            var createLabel = document.createElement("label");
                            createLabel.htmlFor = createRadioItem.id;
                            createLabel.appendChild(createRadioItem);
                            createLabel.appendChild(objTextNode);

                            var createBreak = document.createElement("br");

                            radioDiv.appendChild(createLabel);
                            radioDiv.appendChild(createBreak);
                        };

                        /** End the suggestion code  **/
                        divRadiolist.style.display = "block";
                    }
                }
            }
        </script>

  <%-- This javascript function is for select suggesstion. Added by zafor 2010/10/27--%>
  <script type="text/javascript">
          function getSelectedRadioValue() {
                var node = document.getElementsByName('radioButtonGroup');

                for (var i = 0; i < node.length; i++) {
                    if (node[i].checked) {
                        var rad_val = node[i].value;
                    }
                }
                var userID = document.getElementById('ctl00_ContentPlaceHolder1_txtUserID');
                userID.value = rad_val;
            }
 </script>

We use Ajax pageMethods to call the server side method which actually check the user id availability. Since we use master page in that page so add the ScriptManager tag in master page form section and set its EnablePageMethods property true to call the server side method.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods ="true"  > </asp:ScriptManager>

Step3: Now add the following code in code behind page i.e, .cs file.

public static List<string> UserList = new List<string>()
        {
            "shimul","zakir","zafor","sohel","sumon"
        };
        protected void Page_Load(object sender, EventArgs e)
        {
           
        }

        [System.Web.Services.WebMethod]
        public static string IsUserAvailable(string username)
        {
            string userAvailability = string.Empty;
            bool userExists = false;
           
            string tempOid = string.Empty;

            //Check the username in user list
            foreach (var item in UserList)
            {
                if (item.Equals(username))
                {
                    userExists = true;
                }
            }
            if (!userExists)
                userAvailability += "0";
            else
            {
               
               
                //hold suggested user id
                List<string> LstUserOID = new List<string>();
                System.Random random = new Random();
                while (LstUserOID.Count < 4)
                {
                    tempOid = string.Empty;
                  
                    //create temporary oid
                    tempOid += username + random.Next(0, 100);
                    // test is the id exists in login table

                    if (!UserList.Contains(tempOid))
                    {
                        //if not exists then put it in the list
                        LstUserOID.Add(tempOid);
                    }
                }
                foreach (var item in LstUserOID)
                {
                    userAvailability += item + "|";
                }
            }
            return userAvailability;

        }

In my method i actually use a list that is initialize with some name. I use it so that i test my code as it is working or not. And in IsUserAvailable method i test supplied user id to the list. If the list contains the usert id then it generate some id for suggestion and make string with that id which then send to the javascript function. And finally we show the id in radio button.

Step5: When i run my page I see and supply a user id and check it. I get the following screen shot.

I think that will help you little bit. If any further clarification or any suggestion please write me in a mail.

Shimul Mahmud

azkhairuzzaman@gmail.com

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