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

Set Text property of asp:label in Javascript PROPER way

本文关键字：label Text 属性 asp Javascript PROPER 方式 设置      更新时间：2023-09-26

我在表单上有一系列文本框。 当用户在这些文本框中插入数字时，将进行计算，并通过 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: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中丢失。

这个 使用 asp 标签控件为我工作。

 function changeEmaillbl() {

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

使用以下代码

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

爪哇脚本

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

C#

sptext.innerHTML

不使用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" />

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

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

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

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

创建隐藏字段：

<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"];
}

希望这有帮助！

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

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

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

相关文章：