如何使用隐藏字段从前端的 .aspx 传递数据到后端的 .aspx.cs 文件。

huangapple go评论88阅读模式
英文:

How to pass data from (front-end) .aspx to (back-end) .aspx.cs using hidden filed

问题

我想从后端传递数据到前端,同时也想从前端传递数据到后端,到目前为止,我已经尝试了以下方式:

从后端到前端:

后端(.aspx.cs):

public string amt;

protected void Page_Load(object sender, EventArgs e)
{
    amt = "100";
}

前端(.aspx):

<body>
    <form id="form1" runat="server">
        <script type="text/javascript">
            var amt = "<%=amt%>";
            alert(amt); // 数据成功传递
        </script>
    </form>
</body>

上述示例可以正常工作,但在从前端传递数据到后端时,我得到了一个空值("")(有关此概念,我已经阅读了这篇文章)。

从前端到后端:

前端(.aspx):

<body>
    <form id="form1" runat="server">
        <script type="text/javascript">
            var amt = "<%=amt%>";

            alert("amt :- " + amt);

            function getval() {
                var keyid = "1234";
                document.getElementById('key_id').value = keyid;

                alert(document.getElementById('key_id').value);
                alert('hit');
                window.location.href = "http://localhost:49855/ValuePassig.aspx";
            }
        </script>

        <input id="key_id" runat="server" type="hidden" name="key_id_1" />
        <input type="button" id="btn" value="click" runat="server" onclick="getval()" />
    </form>
</body>

后端(.aspx.cs):

public string amt;
protected void Page_Load(object sender, EventArgs e)
{
    amt = "100";
    // 我得到了空值
    // string kId = this.Request["key_id_1"];
    // string kId = Request.Form["key_id_1"];
    string kId = key_id.Value; // 初始时值为null(可接受),然后我点击“click”按钮时,值不应该为null(但是是null)
    Response.Write(kId);
}

我迄今为止已经尽力去实现这个概念,但我不知道为什么我得到了一个空值,因为我也遵循了上面提到的文章来实现这个概念。

请建议我在从前端到后端传递值时犯了哪些错误以及如何实现这一目标。

请给我您最好的建议。

注:为了更好地理解,我已经更改了代码,添加了一个按钮,当我点击按钮时,隐藏的值应该传递到后端。

英文:

I want to pass data from back-end to front-end and front-end to back-end so far I have tried like below

back-end to front-end :-

back-end (.aspx.cs):-


public string amt;

protected void Page_Load(object sender, EventArgs e)
{
amt = &quot;100&quot;;
}

front-end (.aspx):-


&lt;body&gt;
 &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
var amt = &quot;&lt;%=amt%&gt;&quot;;
alert(amt); // data coming
&lt;/script&gt;
 &lt;/form&gt;
&lt;/body&gt;

The above example is working fine but while passing the value from front-end to back-end I'm getting the null("") value (for this concept I have read this article)

front-end to back-end :-

front-end (.aspx) :-


&lt;body&gt;
 &lt;form id=&quot;form1&quot; runat=&quot;server&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
                var amt = &quot;&lt;%=amt%&gt;&quot;;

                alert(&quot;amt :- &quot; + amt);

                function getval() {
                    var keyid = &quot;1234&quot;;
                    document.getElementById(&#39;key_id&#39;).value = keyid;

                    alert(document.getElementById(&#39;key_id&#39;).value);
                    alert(&#39;hit&#39;);
                    window.location.href = &quot;http://localhost:49855/ValuePassig.aspx&quot;;
                }
                   //alert(amt);
            &lt;/script&gt;

            &lt;input id=&quot;key_id&quot; runat=&quot;server&quot; type=&quot;hidden&quot; name=&quot;key_id_1&quot; /&gt;
            &lt;input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;click&quot; runat=&quot;server&quot; onclick=&quot;getval()&quot; /&gt;

 &lt;/form&gt;
&lt;/body&gt;

back-end(.aspx.cs) :-


 public string amt;
protected void Page_Load(object sender, EventArgs e)
{

amt = &quot;100&quot;;

//I&#39;m getting the null(&quot;&quot;) value 
//string kId = this.Request[&quot;key_id_1&quot;];
//string kId = Request.Form[&quot;key_id_1&quot;]; 
string kId = key_id.Value; //Initially the value come null(acceptable) and next I&#39;m clicking on the &quot;click&quot; button at that time null value should not come(but coming)

Response.Write(kId);

}

I did my best so far to achieve this concept and I don't why I'm getting a null value because, I have followed the article also(above mentioned link) to achieve this
concept

Suggest me where I did the mistake to pass the value from front-end to back-end and how to achieve this

Please give me your best suggestions.

Note :- I have changed the code for better understanding that is button added and when I click on the button the hidden value should come back-end.

答案1

得分: 1

以下是您要翻译的内容:

"Ok, so we want to have some value - set in code behind cs, to set/pass/have some value for use in the client side js code.

And of course in the js code, we want use of that value, and ALSO to be able to change that value, and then upon actions, or code behind, we want that value passed back to the code behind.

First up, don't use a server side expression to "set" that value for use in the js code. The reason of course then you don't have a easy way to pass back and have use of that change value in the code behind.

You can freely change the var in js code, but you really don't have a easy/nice way to get that value back to the code behind (so that <%= %> expression is a one way street to the client side.

There are a LOT of ways to do this, but probably best is to drop in a hidden field control (as per your question title)..

You can also use a hidden text box, but might as well use the hidden field.

So, lets on page load (and ONLY first page load - like all setup on the page should be inside of the !IsPostBack code block - all web pages quite much need this !IsPostBack code block).

And bonus? the Hidden field control has automatic view state. (that means the value will persist on page post-backs).

So, lets drop in a server side button to "show" the value.

And THEN lets drop in a button (client side) to show the value, and ALSO to modify the value.

<asp:HiddenField ID="MyHotelName" runat="server" ClientIDMode="Static" />

Server side code



Client side code




And our code behind:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
MyHotelName.Value = "Zoo";
}
}

protected void cmdShowServer_Click(object sender, EventArgs e)
{
lblShow.Text = "Value of hotel = " + MyHotelName.Value;
}"

希望这可以帮助您!

英文:

Ok, so we want to have some value - set in code behind cs, to set/pass/have some value for use in the client side js code.

And of course in the js code, we want use of that value, and ALSO to be able to change that value, and then upon actions, or code behind, we want that value passed back to the code behind.

First up, don't use a server side expression to "set" that value for use in the js code. The reason of course then you don't have a easy way to pass back and have use of that change value in the code behind.

You can freely change the var in js code, but you really don't have a easy/nice way to get that value back to the code behind (so that <%= %> expression is a one way street to the client side.

There are a LOT of ways to do this, but probably best is to drop in a hidden field control (as per your question title)..

You can also use a hidden text box, but might as well use the hidden field.

So, lets on page load (and ONLY first page load - like all setup on the page should be inside of the !IsPostBack code block - all web pages quite much need this !IsPostBack code block).

And bonus?
the Hidden field control has automatic view state. (that means the value will persist on page post-backs).

So, lets drop in a server side button to "show" the value.

And THEN lets drop in a button (client side) to show the value, and ALSO to modify the value.

    &lt;asp:HiddenField ID=&quot;MyHotelName&quot; runat=&quot;server&quot; ClientIDMode=&quot;Static&quot; /&gt;
    &lt;h3&gt;Server side code&lt;/h3&gt;
    &lt;asp:Button ID=&quot;cmdShowServer&quot; runat=&quot;server&quot; OnClick=&quot;cmdShowServer_Click&quot;
        Text=&quot;Show Hotel Name&quot; CssClass=&quot;btn&quot; /&gt;
    &lt;br /&gt;
    &lt;asp:Label ID=&quot;lblShow&quot; runat=&quot;server&quot; Text=&quot;Label&quot;&gt;&lt;/asp:Label&gt;


    &lt;h3&gt;Client side code&lt;/h3&gt;
    &lt;asp:Button ID=&quot;cmdShowClient&quot; runat=&quot;server&quot; Text=&quot;Show Hotel Name&quot;
        OnClientClick=&quot;ShowHotel();return false&quot; /&gt;
    &lt;br /&gt;
    &lt;asp:Button ID=&quot;cmdChangeClient&quot; runat=&quot;server&quot; Text=&quot;Change Hotel Name&quot;
        OnClientClick=&quot;ChangeHotel();return false&quot; /&gt;

    &lt;script&gt;

        function ShowHotel() {
            alert(&quot;Hotel name = &quot; + $(&quot;#MyHotelName&quot;).val())
        }

        function ChangeHotel() {
            sHotelNew = prompt(&quot;Enter new hotel value&quot;)

            $(&quot;#MyHotelName&quot;).val(sHotelNew)

        }

    &lt;/script&gt;

And our code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            MyHotelName.Value = &quot;Zoo&quot;;
        }
    }

    protected void cmdShowServer_Click(object sender, EventArgs e)
    {
        lblShow.Text = &quot;Value of hotel = &quot; + MyHotelName.Value;
    }

So, we now have this:
如何使用隐藏字段从前端的 .aspx 传递数据到后端的 .aspx.cs 文件。

Edit: Above used jquery.

Of course the js code above used jQuery.

however, we could assume pure js code, no jQuery.

so, the js code would then become this:

    &lt;script&gt;

        function ShowHotel() {

            sHotel = document.getElementById(&quot;MyHotelName&quot;).value
            alert(&quot;Hotel name = &quot; + sHotel)
        }

        function ChangeHotel() {

            sHotelNew = prompt(&quot;Enter new hotel value&quot;)
            document.getElementById(&quot;MyHotelName&quot;).value = sHotelNew

        }

    &lt;/script&gt;

I should also point out the "very" imprortant adding of clientidmode="static" for the hidden field. This will "prevent" asp.net system from changing the "id" used for the control, and as a result, the js code tends to be more "clean" and "easy" to reference controls.

If you don't want to use clientidmode=static for the hidden field, then the above code then becomes this:

hidden field thus is this: (no client id mode).

    &lt;asp:HiddenField ID=&quot;MyHotelName&quot; runat=&quot;server&quot; /&gt;

And now our code becomes this:

    &lt;script&gt;

        function ShowHotel() {

            sHotel = document.getElementById(&#39;&lt;%= MyHotelName.ClientID %&gt;&#39;).value
            alert(&quot;Hotel name = &quot; + sHotel)
        }

        function ChangeHotel() {

            sHotelNew = prompt(&quot;Enter new hotel value&quot;)
            document.getElementById(&#39;&lt;%= MyHotelName.ClientID %&gt;&#39;).value = sHotelNew

        }
    &lt;/script&gt;

So, I often will toss in a ClientIDMode="static" for the hidden field, as that makes the js code to get the hidden control less messy.

huangapple
  • 本文由 发表于 2023年1月9日 19:18:39
  • 转载请务必保留本文链接:https://go.coder-hub.com/75056520.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定