Friday, 22 March 2013

How to Call Javascript Function from Codebehind page or .aspx.cs in Asp.net

 


Description:-

 In this example we Explain That how to call Javascript Function from the CodeBehind or aspx.cs File in asp.net.in which we also explain how to get Gridview Cell value or Rows to perform the operation using javascript

the main use of this example is that we can display the description of each row in a modal popup when user move mouse in each row of the Gridview the javascript function is called and display this row detail in modal popup.

Generally to Create this Type Effect we Have to Define a RowDataBound Event of the Gridview in which we define Click event in each Row of gridview.

Explanation of this example:-

                      in this example when user move mouse in gridview row that time javascript function is call with  two argument RowIndex and Id.

in javascript function we can use this two argument and display this row Detail in modal popup.

File Upload Example in MVC4 Upload File and bind to Gridview

Read/Write File in asp.net Read/write file using c#





Code For Code Behind:-
protected override void Render(System.Web.UI.HtmlTextWriter writer)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {

            int j = row.RowIndex + 1;

            i = (Image)(GridView1.Rows[row.RowIndex].Cells[3].FindControl("Image1"));
            string a = GridView1.DataKeys[row.RowIndex].Value.ToString();
            row.Attributes["onmouseover"] = "javascript:shownext('" + j + "','" + a + "')";

        }
        base.Render(writer);
    }





JavaScript Function:-

<scrpt type="javascript">
 function shownext(event,a) {
         
            var grid = document.getElementById("<%= GridView1.ClientID %>");

            var id = grid.rows[event].cells[0].firstChild.nodeValue;
            var name = grid.rows[event].cells[1].firstChild.nodeValue;
            var bod = grid.rows[event].cells[2].firstChild.nodeValue;
            var p = grid.rows[event].cells[3].firstChild.nodeValue;


            document.getElementById("foo").innerHTML = "Id=" + id + "<br>Name=" + name + "<br>bod=" + bod + "<br>photo=" + '<img src="Z:/kiit/homework/' + a + '" alt="some alt text" width=50 height=50 />';
         
        }


</script>

0 comments:

Post a Comment