以 Javascript PROPER 方式设置 asp:label 的 Text 属性答案

【问题标题】：Set Text property of asp:label in Javascript PROPER way以 Javascript PROPER 方式设置 asp:label 的 Text 属性
【发布时间】：2012-04-25 02:11:51
【问题描述】：

我在表单上有一系列文本框。当用户在这些文本框中插入数字时，会进行计算并通过 JavaScript 更新 <asp:Label> 控件以反映这些计算：

document.getElementById('<%=TotalLoans.ClientID %>').innerHTML = TotalLoans;

这会正确更新 UI。但是，当我尝试访问代码隐藏中的值时，Text 属性为空。我想这是有道理的，因为我是通过 JavaScript 更新 innerHTML 属性的。

//TotalLoans.Text will always be equal to "" in this scenario
double bTotalLoans = string.IsNullOrEmpty(TotalLoans.Text) 
                   ? 0.00 
                   : Convert.ToDouble(TotalLoans.Text);

如何通过 JavaScript 更新 <asp:Label> 的 Text 属性，以便我可以读取代码隐藏中的属性？

更新

这是包含 41 个标签的大型表单上的一个小问题，每个标签都为用户显示一些计算的结果。听从 FishBasketGordo 的建议，我将我的 <asp:Label> 转换为已禁用的 <asp:TextBox>。我正在设置新文本框的值：

    document.getElementById('<%=TotalLoans.ClientID %>').value = TotalLoans;

同样，在代码隐藏中，TotalLoans.Text 的值始终等于“”。

我不介意改变我的处理方式，但这就是问题的关键。

我正在使用 JavaScript 来操作某些控件的属性值。单击“提交”时，我需要能够从后面的代码中访问这些操作值。

有什么建议可以解决这个问题吗？

更新 2

关于@James Johnson 的回答，我无法按照建议使用.innerText 属性检索值。我在<asp:Label> 上将EnableViewState 设置为true。我还有什么遗漏的吗？

我不明白为什么，当我输入文本框并提交表单时，我可以访问代码隐藏中的值，但是当我通过 JavaScript 以编程方式更改文本框或标签的文本时，我无法访问新值。

【问题讨论】：

这可能是不可能的，因为asp:Label 不是<input> 的类型。我觉得我以前遇到过这种情况，不得不使用隐藏的输入让服务器识别它。
您正在执行的操作将在回发发生后起作用。 Asp.net/Server 不知道是否有任何变化，直到它再次有机会查看它。
虽然你可以让它们工作，但<asp:Label> 控件并不是你正在做的事情的正确选择。我会考虑使用只读文本框或更符合语义的文本框。
感谢 FishBasketGordo，请查看更新
@splatto：更新了我的答案。我想我已经为你找到了一个很好的解决方案。

标签： javascript asp.net label code-behind

【解决方案1】：

在表单中放置 HiddenField 控件。

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

在表单中创建属性

protected String LabelProperty
{
    get
    {
        return hidden.Value;
    }
    set
    {
        hidden.Value = value;
    }
}

从 JavaScript 更新隐藏字段值

<script>
   function UpdateControl() {
            document.getElementById('<%=hidden.ClientID %>').value = '12';
   }
</script>

现在您可以通过Postback 直接访问该物业。 Label 控件更新后的值将在 PostBack 中丢失，以防它直接在后面的代码中使用。

【讨论】：

@James Johnson，我试图将其发布在您的答案中。我无法使用 .innerText 属性检索值。我在<asp:Label> 上将EnableViewState 设置为true。我还有什么遗漏的吗？
我无法通过Postback 访问标签更新值，因为它会在回发期间丢失。所以，我需要使用ViewState/HiddenField Control。
@PankajGarg：您实际上是对的。我在想该值可以存储在标签的属性中，但事实并非如此。
@John：我确实在标签方面犯了一个错误，但由于我是网站上 ASP.NET 用户的前 0.001%，我认为这样说不公平我对 ASP.NET 不了解。不过我很感谢你的评论:)
这个解决方案效果很好。但是，实际上选择 ASP.NET 隐藏字段可能是外部 JavaScript 文件和 jQuery 的问题。 This answer 有解决方案。

【解决方案2】：

这个适用于我的 asp 标签控件。

 function changeEmaillbl() {


         if (document.getElementById('<%=rbAgency.ClientID%>').checked = true) {
             document.getElementById('<%=lblUsername.ClientID%>').innerHTML = 'Accredited No.:';
         } 
     }

【讨论】：

【解决方案3】：

使用以下代码

<span id="sptext" runat="server"></span>

Java 脚本

document.getElementById('<%=sptext'%>).innerHTML='change text';

C#

sptext.innerHTML

【讨论】：

正确的语法是---- document.getElementById("").innerHTML="change text";

【解决方案4】：

Asp.net 代码隐藏首先在服务器上运行，然后页面呈现给客户端（浏览器）。 Codebehind 无法访问客户端（javascript、html），因为它只存在于服务器上。

所以，要么使用 ajax 并将标签的值发送到代码后面。您可以使用 PageMethods ，或者简单地将页面发布到代码隐藏所在的服务器，以便代码隐藏可以知道更新的值:)

【讨论】：

【解决方案5】：

由于您已更新标签客户端，因此您需要回发以便您的服务器端代码反映更改。

如果你不知道怎么做，这里是我过去的做法。

创建一个隐藏字段：

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

创建一个附加了客户端和服务器端功能的按钮。您的客户端功能将填充您的隐藏字段，服务器端将读取它。确保您是客户端首先被调用。

<asp:Button ID="_Submit" runat="server" Text="Submit Button" OnClientClick="TestSubmit();" OnClick="_Submit_Click" />

Javascript 客户端函数：

function TestSubmit() {
              try {

             var message = "Message to Pass";
             document.getElementById('__EVENTTARGET').value = message;

           } catch (err) {
              alert(err.message);

          }

      }

C# 服务器端函数

protected void _Submit_Click(object sender, EventArgs e)
{
     // Hidden Value after postback
     string hiddenVal= Request.Form["__EVENTTARGET"];
}

希望这会有所帮助！

【讨论】：

【解决方案6】：

不要使用Label，而是使用文本输入：

<script type="text/javascript">
    onChange = function(ctrl) {
        var txt = document.getElementById("<%= txtResult.ClientID %>");
        if (txt){
            txt.value = ctrl.value;
        }           
    }
</script>

<asp:TextBox ID="txtTest" runat="server" onchange="onChange(this);" />      

<!-- pseudo label that will survive postback -->  
<input type="text" id="txtResult" runat="server" readonly="readonly" tabindex="-1000" style="border:0px;background-color:transparent;" />        

<asp:Button ID="btnTest" runat="server" Text="Test" />

【讨论】：

虽然它解决了 OP 的问题，但它会导致另一个问题。文本输入可以通过鼠标选择。这使该字段看起来是可更新的。然后，如果单击退格按钮，IE 会导航到上一页。告别表格中的数据。

【解决方案7】：

标签的信息存储在回发时的 ViewState 输入中（请记住，服务器对回发的表单值之外的页面一无所知，其中包括标签的文本）..您必须以某种方式在客户端知道该标签发生了什么变化，我猜这不值得您花时间。

我不完全确定您要在这里解决什么问题，但这可能会给您一些解决方法的想法：

您可以创建一个隐藏字段来与您的标签一起使用，并且每当您更新标签时，您也会更新该值。然后在后面的代码中将标签的 Text 属性设置为那个隐藏的领域。

【讨论】：