관리 메뉴

심재운 블로그

How to Pass Values from CodeBehind to JavaScript? 본문

닷넷관련/ASP.NET WEBFORM

How to Pass Values from CodeBehind to JavaScript?

재우니 2011. 12. 28. 13:27



How to Pass Values from CodeBehind to JavaScript?

 

Using HiddenField

Using a HiddenField control is one of the very common options which we can use to send some values from server to clientside. You can do this, by declaring a HTML INPUT control with type as hidden and setting runat attribute to server. Another way is to drag and drop a HiddenField control from visual studio toolbox.

ASPX

  <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {

         alert($("#hfServerValue").val());

         });

     </script>

</head>

<body>

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

    <div>

    <asp:HiddenField ID="hfServerValue" runat="server" />

 

Codebehind

  protected void Page_Load(object sender, EventArgs e)

    {

        hfServerValue.Value = "From Server";

    }

 

Setting a Javascript Variable using <% %> blocks

We can embed the C# code using the <% %> construct in ASPX page. To do this, declare a public variable and assign it to a javascript variable through <% %> construct. Refer below,

 

ASPX

 <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {           

             var servervalue = '<%=FromServer %>';

             alert(servervalue);

         });

     </script>

</head>

<body>

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

 

Codebehind

 public string FromServer;

    protected void Page_Load(object sender, EventArgs e)

    {      

        FromServer = "From Server";

    }

 

Declaring JavaScript Variable from CodeBehind

This is one another way where we can declare a javascript variable by constructing the javascript from codebehind and assign a value. Refer the below code,

ASPX

<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {           

             alert(JSVar);

         });

</script>

 

CodeBehind

public string FromServer;

    protected void Page_Load(object sender, EventArgs e)

    {        

        FromServer = "From Server";

 

        StringBuilder strScript = new StringBuilder();

        strScript.Append("<script type=\"text/javascript\">");

        strScript.Append("var JSVar='");

        strScript.Append(FromServer);

        strScript.Append("';");       

        strScript.Append("</script>");

 

        ClientScriptManager script = Page.ClientScript;

 

        if (!script.IsClientScriptBlockRegistered(this.GetType(), "Var"))

        {

            script.RegisterClientScriptBlock(this.GetType(), "Var", strScript.ToString());

        }

 

    }

 

Once executed, the above code will emit the javascript variable with a value to the output HTML(similar to below).

 

<body>

    <form name="form1" method="post" action="CBTOJS.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTM4NjU4ODE1ZGQElWxBiEc2w9QhtjJyaVl59BWiPw==" />

</div>

<script type="text/javascript">var JSVar='From Server';</script>

 

Using Expando Attribute

Another way of sending some information or data from server to client side is by adding a custom attribute to a control through AttributeCollection of that control. For example,

 

  btnSave.Attributes.Add("flag", "From ASP.Net!");

 

The above custom attribute can be accessed in javascript like below,

 

<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">      

$(document).ready(function() {

         alert($('#btnSave').attr("flag"));

});

     </script>

 

The main disadvantage of the above approach is, the HTML generated by the ASP.Net for the above code is not XHTML complaint since flag is not a valid attribute of INPUT control. Below is the HTML generated when we use AttributeCollection.

 

<input type="submit" name="btnSave" value="Save" id="btnSave" flag="From ASP.Net!" />

 

To prevent this, the ClientScriptManager class has a method called RegisterExpandoAttribute() which can be used. This method can be used add a custom attribute a control which can be accessed in clientside by making it XHTML complaint.

 

This method has 2 overloads.

1.      RegisterExpandoAttribute(String controlID, String attribute, String value)  

Registers a name/value pair to a control (controlID), attribute name(attribute), and attribute value(value).

2.      RegisterExpandoAttribute(String, String, String, Boolean)

Registers a name/value pair to a control (controlID), attribute name(attribute), and attribute value(value) and a Boolean value indicating whether to encode the attribute value.

 

  To attach custom property called “LastPostBackTime” to a button control we can use,

 

Page.ClientScript.RegisterExpandoAttribute(btnSave.ClientID, "LastPostbackTime", DateTime.Now.ToString());

 

To Access the attribute in JavaScript,

  alert(document.getElementById("btnSave").LastPostbackTime);

 

 Or you can use the above jquery script.

 

When we use RegisterExpandoAttribute method, the custom attribute will be segregated in a separate javascript making the control clean and XHTML complaint. Refer the below output,

<script type="text/javascript">

<!--

var btnSave = document.all ? document.all["btnSave"] : document.getElementById("btnSave");

btnSave.LastPostbackTime = "19/03/2009 8:47:24 PM";

// -->

</script>





 How to Pass Values from JavaScript to CodeBehind?

 

Using HiddenField Control

Again using a HiddenField control is one of the most common ways of sending client data to ASP.Net. The below code does that,

ASPX

<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {            

         $("hfServerValue").val("From ClientSide!");

         });

     </script>

</head>

<body>

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

    <div>

    <asp:HiddenField ID="hfServerValue" runat="server" />

 

CodeBehind

protected void Page_Load(object sender, EventArgs e)

    {      

        Response.Write(hfServerValue.Value);

    }

 

You can also use a HTML INPUT control by setting runat="server".

 

Using __doPostBack() method

One another way to pass values from javascript to ASP.Net codebehind is to use the __EventArgument in __doPostBack() method. To know more about this method and to use it you can refer Doing or Raising Postback using __doPostBack() function from Javascript in Asp.Net

 

If you have a control that emits __doPostBack() method (or you will have to emit it through code, refer above article) you can use __EventArgument to pass values from a javascript to codebehind. Refer the below code,

ASPX

 <script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

     <script type="text/javascript">

         $(document).ready(function() {

             $("#btnSave").click(function() {

                 __doPostBack("lbSave","From Javascript!");

 

             });

 

         });

        

     </script>

</head>

<body>

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

    <div>

    <input id="btnSave" type="button" value="Save" />

    <asp:LinkButton ID="lbSave" runat="server" onclick="Save_Click">lbSave</asp:LinkButton>

 

CodeBehind

protected void Save_Click(object sender, EventArgs e)

    {

        Response.Write(Request["__EVENTARGUMENT"]);

    }

   

Using Ajax Methods

This is another way where we can make an Ajax call to server whenever we need the server value in javascript/jquery. When you use ASP.Net AJAX then you can use PageMethods for this. Read the below code snippet which demonstrates it with an example.

Calling a Serverside Method from JavaScript in ASP.Net AJAX - PageMethods

 

Also, there are numerous article posted on codedigest on making Ajax calls using jquery. Refer here.

0 Comments
댓글쓰기 폼