Get hidden field value from client side and retain the value code behind in ASP .Net

Question

0.00/5 (No votes)

See more:

Dynamically i want to get the height of the div element. At client side i am getting the value and has been assigned to hidden field successfully.

ASP.NET

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HomePage.aspx.cs" Inherits="HomePage_New" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <title>Home Page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" href="Css/HomePageStyle.css" type="text/css" />
    <script type="text/javascript" src="Script/jquery_min.js"></script>
    <script type="text/javascript" src="JavaScript/DisableBackSpace.js"></script>
    <script type="text/javascript" src="JavaScript/DisableMouseRightClick.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            var varHeight = $('#MainDiv').height();
            $('#maincontentpageframe').height($('#MainDiv').height());

            /*Set the value to Hidden Field*/
            $("input[id=hfMainDiv]").val(varHeight);
            /*alert($('#hfMainDiv').val());*/
        });
    </script>

</head>
<body>
    <form id="form1"  runat="server">
    <div class="header">
        <div class="lefttext">
            Welcome to ATM Claims
        </div>
        <div class="righttext">
            <div>
                <label id="lblLoginUserName"  runat="server"></label> <p>|</p>
            </div>
            <div>
                <a id="lnkHomePage" href="welcomepage.aspx" target="mainFrame">Home</a> <p>|</p>
            </div>
            <div>
                <a id="lnkMyProf" href="myprofile.aspx" target="mainFrame">My profile</a> <p>|</p>
            </div>
            <div>
                <a id="lnkChgPwd" href="ChangePassword.aspx" target="mainFrame">Change password</a> <p>|</p>
            </div>
            <div>
                <a href="">Logout</a>
            </div>
        </div>
    </div>
    <table cellspacing="0" id="main">
        <tr>
            <td class="leftnav">
                <div class="leftnavheader">
                    Menu</div>
                <div class="menu">
                    <iframe src="MenuItem.aspx" frameborder="0" style="height: 91.5%; width: 100%;" name="menuFrame">
                    </iframe>
                </div>
            </td>
            <td class="content">
                <div class="MainFrame" id="MainDiv"  runat="server">
                    <iframe src="WelcomePage.aspx" id="maincontentpageframe" style="width: 99.5%; height: 100%;"
                        frameborder="1" name="mainFrame"  runat="server"></iframe>
                </div>
                <asp:HiddenField ID="hfMainDiv" runat="server" ClientIDMode="Static" Value="23" />
            </td>
        </tr>
    </table>
    <div class="footer">
        <div class="footer_wrap">
            © 2013 | All Rights Reserved.
        </div>
    </div>
    </form>
</body>
</html>

In Code Behind, i am trying to get the value in Page Load event but value comes nothing.

C#

public partial class HomePage_New : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        lblLoginUserName.InnerHtml = "";
        Session["HomePageMainDivHeight"] = this.hfMainDiv.Value.ToString();
        if(Session["UserID"] != null)
        {
            lblLoginUserName.InnerHtml = "Hi ! "+Session["UserID"].ToString().Trim();
        }
    }
}

Posted 23-Oct-13 1:20am

mn.sathish

Updated 20-Apr-17 19:26pm

Add a Solution

2 solutions

Solution 1

Hello Mr. Sathish,

<asp:hiddenfield id="hfMainDiv" runat="server" clientidmode="Static" value="23" xmlns:asp="#unknown">

you want height of Div, and on client side you are storing it in an hidden field, why you are directly assigned a value "23" to hidden field.

Posted 23-Oct-13 2:40am

NagarajDJ

Comments

VICK 23-Oct-13 8:44am

NagarajDJ... If you want to ask some question to than kindly use... "Have a Quesiton or Comment " option...

mn.sathish 24-Oct-13 3:42am

Hi Nagaraj Dj. . . , Your question is correct but when i was trying to get desired result i had tried different possibilities such as set some default value and replace with result.
Is this cause the program logic. . ,

Bajirao_ 23-Oct-13 10:22am

Satish,

I observer some points in your code :

1] As we know, Aspx pages processed at server side and then load to browser. So it will clearly hit your PageLoad first then hit to document.ready.

Hence there is no point in using Jquery at client side if you want value in PageLoad event.

2] You have used "MainDiv" div with runat="server", which may change client side id of div.

Hence possibility of error in $('#MainDiv').height(); statement.

Understanding :
1] You have used iframe and used height parameter in %, its correct in case of responsive UI.

Comments :
If you are ready to use the iframe height value in px instead of % you may follow below solution.

This is my POC, Make correction according to your requirement.
ASP :
<form id="form1" runat="server">
<div id="content" runat="server" clientidmode="Static">
<span style="height:30px; width:200px;color:Blue;">This my span...</span>
</div>
<asp:HiddenField ID="hdnMyFld2" runat="server" ClientIDMode="Static" />

<iframe id="ifXyz" runat="server" clientidmode="Static" src="http://google.com" height="300px" frameborder="1" name="mainFrame" runat="server" />
</form>
C# :
protected void Page_Load(object sender, EventArgs e)
{ // i hope you are interested in value more than wherever i assign it.
hdnMyFld2.Value = Convert.ToString(ifXyz.Attributes["height"]).Replace("px","");
}

mn.sathish 24-Oct-13 3:47am

Hi PrasaShastri, Thanks for ur help. Really it is very helpful for me. Now i understood why the hidden field return value as nothing at code behind in Load event.

Bajirao_ 24-Oct-13 8:50am

You are well come, hope you mark it as ans for question.

CodeBlack 24-Oct-13 9:09am

update your solution with code which worked instead of keeping it in comment field.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bajirao_ · Accepted Answer · 2013-10-24T02:49:00

XML

Sathish,

I observer some points in your code :

1] As we know, Aspx pages processed at server side and then load to browser. So it will clearly hit your PageLoad first then hit to document.ready.

Hence there is no point in using Jquery at client side if you want value in PageLoad event.

2] You have used "MainDiv" div with runat="server", which may change client side id of div.

Hence possibility of error in $('#MainDiv').height(); statement.

Understanding :
1] You have used iframe and used height parameter in %, its correct in case of responsive UI.

Comments :
If you are ready to use the iframe height value in px instead of % you may follow below solution.

This is my POC, Make correction according to your requirement.
ASP :
    <form id="form1"  runat="server">
    <div id="content"  runat="server" clientidmode="Static">
        <span style="height:30px; width:200px;color:Blue;">This my span...</span>
    </div>
    <asp:HiddenField ID="hdnMyFld2"  runat="server" ClientIDMode="Static" />

    <iframe id="ifXyz" runat="server" clientidmode="Static" src="http://google.com" height="300px" frameborder="1" name="mainFrame"   />
    </form>
C# :
        protected void Page_Load(object sender, EventArgs e)
        {   // i hope you are interested in value more than wherever i assign it.
            hdnMyFld2.Value = Convert.ToString(ifXyz.Attributes["height"]).Replace("px","");
        }