在codebehind在Javascript中设置隐藏输入值,那么对其进行访问 [英] Setting hidden input value in Javascript, then accessing it in codebehind

查看:221
本文介绍了在codebehind在Javascript中设置隐藏输入值,那么对其进行访问的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我一直在尝试使用Javascript功能来设置一个隐藏的输入值,然后从我的C#codebehind中访问值。当我运行code,它在下面复制,分配给assignedIDs为的值,我认为是一个隐藏的输入的默认值。如果我手动设置HTML标记的值,那么assignedIDs被设置为该值。

此行​​为表明,我认为输入的值是的OnClientClick和的onclick事件触发之间被重置(重新呈现?)。

我想AP preciate此事的任何帮助。我花了几个小时试图解决什么似乎是一个非常简单的问题。

HTML / JavaScript的:

 < HTML的xmlns =htt​​p://www.w3.org/1999/xhtml>
<头=服务器>
<标题>管理页面 - 管理任务和LT; /标题>
    < SCRIPT LANGUAGE =JavaScript的类型=文/ JavaScript的>
        功能PopulateAssignedIDHiddenInput(){
            无功源=的document.getElementById('assignedLinguistListBox');
            变种S =;
            变种数= source.length;
            对于(VAR I =计数 - 1; I> = 0;我 - ){
                VAR项目= source.options [I]
                如果(S ==){S = source.options [I] .value的; }
                否则{S = s.concat(,,source.options [I]。价值); }
            }
            的document.getElementById('assignedIDHiddenInput')值= S。
            //我已经证实,在这一点上,的值
            //隐藏的输入设置正确
        }
    < / SCRIPT>
< /头>
<身体GT;
    <表ID =form1的=服务器>
    < D​​IV>
        < ASP:面板ID =编辑模式=服务器>
            <表样式=边界:无;>
                &所述; TR>
                    &所述; TD>
                        < ASP:标签ID =availableLinguistLabel=服务器文本=可用>< / ASP:标签>< BR />
                        < ASP:列表框ID =availableLinguistListBox=服务器行=10的SelectionMode =多>< / ASP:列表框>
                    < / TD>
                    &所述; TD>
                        <输入类型=按钮NAME =右VALUE =&放大器; GT;&放大器; GT;
                            的onclick =使用Javascript:移动选项('availableLinguistListBox','assignedLinguistListBox'); />< BR />< BR />
                        <输入类型=按钮NAME =左VALUE =&放大器; LT;&放大器; LT;
                            的onclick =使用Javascript:移动选项('assignedLinguistListBox','availableLinguistListBox'); />
                    < / TD>
                    &所述; TD>
                        < ASP:标签ID =assignedLinguistLabel=服务器文本=入驻GT&;< / ASP:标签>< BR />
                        < ASP:列表框ID =assignedLinguistListBox=服务器行=10的SelectionMode =多>< / ASP:列表框>
                    < / TD>
                < / TR>
            < /表>
            // - snip-
            < ASP:按钮的ID =save_task_changes_button=服务器工具提示=点击将更改保存到任务
                文本=保存更改的OnClick =save_task_changes_button_click的OnClientClick =使用Javascript:PopulateAssignedIDHiddenInput()/>
        < / ASP:面板>        <! - 隐藏的输入 - >
        <! - 请注意,我也尝试设置=服务器,没有变化 - >
        <输入ID =assignedIDHiddenInputNAME =assignedIDHiddenInput类型=隐藏/>
    < / DIV>
    < /表及GT;
< /身体GT;

C#

 保护无效save_task_changes_button_click(对象发件人,EventArgs的发送)
{
    字符串assignedIDs =的Request.Form [assignedIDHiddenInput];
    //这里,assignedIDs ==;同时,Request.Params [assignedIDHiddenInput] ==
    // -snip-
}


解决方案

在JavaScript的你需要的属性为小写,就像这样:

 的document.getElementById('assignedIDHiddenInput')值= S;

然后,它会被设置正确:) 你可以看到在这里行动的例子

但如果你提醒 .value的,它会显示你的价值,你实际上已经加入了 。值属性,但您没有设置输入的 .value的属性,它是被发送到服务器。上面的例子链接说明了这两种方式。

您也可以通过使用一个数组,而不是字符串连接,这样做有点快,特别是如果你有很多选择:

 无功源=的document.getElementById('assignedLinguistListBox');
变种选择采用= [];
对于(VAR I = 0; I< source.options.length;我++){
    opts.push(source.options [I]。价值);
}
变种S = opts.join(,);

编辑:上面code被更新, CMS 是正确的previous方法是依赖于浏览器,上面现在应该行为一致。另外,如果 jQuery的是一种选择,也有得到这个信息的是,像这样的短方式:

 变种S = $('#assignedLinguistListBox选项')。映射(函数(){
          返回THIS.VALUE;
        })获得()加入('')。
$('#assignedIDHiddenInput)VAL(S)。

你可以看到这这里工作的例子

I have been trying to set the value of a hidden input by using Javascript and then access the value from within my C# codebehind. When I run the code that is copied below, the value that is assigned to assignedIDs is "", which I assume is the default value for a hidden input. If I manually set the value in the html tag, then assignedIDs is set to that value.

This behavior suggests to me that the value of the input is being reset (re-rendered?) between the onClientClick and onClick events firing.

I would appreciate any help with the matter. I have spent hours trying to solve what seems like a very simple problem.

html/javascript:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Admin Page - Manage Tasks</title>
    <script language="javascript" type="text/javascript">
        function PopulateAssignedIDHiddenInput() {
            var source = document.getElementById('assignedLinguistListBox');
            var s = "";
            var count = source.length;
            for (var i = count - 1; i >= 0; i--) {
                var item = source.options[i];
                if (s == "") { s = source.options[i].value; }
                else { s = s.concat(",",source.options[i].value); }
            }
            document.getElementById('assignedIDHiddenInput').Value = s;
            // I have confirmed that, at this point, the value of
            // the hidden input is set properly
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Panel id="EditMode" runat="server">
            <table style="border: none;">
                <tr>
                    <td>
                        <asp:Label ID="availableLinguistLabel" runat="server" Text="Available"></asp:Label><br />
                        <asp:ListBox ID="availableLinguistListBox" runat="server" Rows="10" SelectionMode="Multiple"></asp:ListBox>
                    </td>
                    <td>
                        <input type="button" name="right" value="&gt;&gt;"
                            onclick="Javascript:MoveItem('availableLinguistListBox', 'assignedLinguistListBox');" /><br /><br />
                        <input type="button" name="left" value="&lt;&lt;"
                            onclick="Javascript:MoveItem('assignedLinguistListBox', 'availableLinguistListBox');" />
                    </td>
                    <td>
                        <asp:Label ID="assignedLinguistLabel" runat="server" Text="Assigned To"></asp:Label><br />
                        <asp:ListBox ID="assignedLinguistListBox" runat="server" Rows="10" SelectionMode="Multiple"></asp:ListBox>
                    </td>
                </tr>
            </table>
            //-snip-
            <asp:Button ID="save_task_changes_button" runat="server" ToolTip="Click to save changes to task"
                Text="Save Changes" OnClick="save_task_changes_button_click" OnClientClick="Javascript:PopulateAssignedIDHiddenInput()" />
        </asp:Panel>

        <!-- Hidden Inputs -->
        <!-- Note that I have also tried setting runat="server" with no change -->
        <input id="assignedIDHiddenInput" name="assignedIDHiddenInput" type="hidden" />
    </div>
    </form>
</body>

c#

protected void save_task_changes_button_click(object sender, EventArgs e)
{
    string assignedIDs = Request.Form["assignedIDHiddenInput"];
    // Here, assignedIDs == ""; also, Request.Params["assignedIDHiddenInput"] == ""
    // -snip-
}

解决方案

In javascript you need the value property to be lowercase, like this:

document.getElementById('assignedIDHiddenInput').value = s;

Then it will be set properly :) You can see an example in action here

Though if you alert the .Value it will show your value, you've actually added a new .Value property, but you haven't set the input's .value property which is what gets posted to the server. The example link above illustrates this both ways.

Also you can make it a bit faster especially if you have lots of options by using an array instead of string concatenation, like this:

var source = document.getElementById('assignedLinguistListBox');
var opts = [];
for (var i = 0; i < source.options.length; i++) {
    opts.push(source.options[i].value);
}
var s = opts.join(',');

Edit: The above code is updated, CMS is right that the previous method was browser dependent, the above should now behave consistently. Also, if jQuery is an option, there are shorter ways of getting this info still, like this:

var s = $('#assignedLinguistListBox option').map(function() { 
          return this.value; 
        }).get().join(',');
$('#assignedIDHiddenInput').val(s);

You can see a working example of this here

这篇关于在codebehind在Javascript中设置隐藏输入值,那么对其进行访问的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆