显示在asp:TextBox中输入的值

本文关键字：输入 TextBox asp 显示 | 更新日期: 2023-09-27 18:20:44

我有一个asp.net网络表单应用程序，我想传递在asp:TextBox中输入的用户名值，然后在我的确认模式中显示。

HTML

        <div class="form-group">        
            <asp:Label runat="server" AssociatedControlID="txtRemoveUser" CssClass="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</asp:Label>
            <div class="col-sm-3">
                <asp:TextBox runat="server" ID="txtRemoveUser" CssClass="form-control" />
            </div>
        </div>
<!-- Confirm Delete Modal-->
<div class="modal fade" id="removeUserModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ConfirmHeader">
                <h4 class="modal-title" id="myModalLabel">Confirm Removal</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to remove <b><%= txtRemoveUser.Text %></b> from the payday lunch list?</p>
                <p>If you don't, click 'No' and the removal request will not be sent.</p>                    
            </div>
            <div class="modal-footer ConfirmFooter">
                <asp:Button id="btnRemoveConfirmYes" runat="server" CssClass="btn btn-success" Text="Yes" OnClick="btnRemoveConfirmYes_Click" ToolTip="Click to request user to be removed from the payday lunch list." />
                <button id="btnRemoveConfirmNo" type="button" class="btn btn-warning" data-dismiss="modal" title="Click to close this screen. The request will not be sent.">No</button>
            </div>
        </div>
    </div>
</div>

我试过下面的<%= txtRemoveUser.Text %>，但它不起作用。

显示在asp:TextBox中输入的值

<%= txtRemoveUser.Text %>将不起作用，因为它只会在初始页面加载或回发期间输出文本框的值。您需要使用JavaScript在客户端检索值，但您需要知道控件的ID。这可以使用<%= txtRemoveUser.ClientID %> 来完成

看起来您正在使用Bootstrap的Modal（它反过来又包括jQuery）。他们的文档中有一个关于不同内容的部分。

这将导致您的代码看起来大致如下：

$('#removeUserModal').on('show.bs.modal', function (event) {
  var user = $('#<%= txtRemoveUser.ClientID %>').val();
  $('.modal-body b', this).text(user);
});

工作代码段（不包括.NET控件）：

$('#removeUserModal').on('show.bs.modal', function (event) {
  var user = $('#txtRemoveUser').val();
  $('.modal-body b', this).text(user);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="form-group">        
	<label for="txtRemoveUser" class="col-sm-offset-2 col-sm-3 control-label">Enter Name To Be Removed</label>
	<div class="col-sm-3">
		<input type="textbox" ID="txtRemoveUser" CssClass="form-control" />
	  <input type="button" value="Remove" data-toggle="modal" data-target="#removeUserModal" />
	</div>
</div>
<div class="modal fade" id="removeUserModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header ConfirmHeader">
                <h4 class="modal-title" id="myModalLabel">Confirm Removal</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to remove <b>[name]</b> from the payday lunch list?</p>
                <p>If you don't, click 'No' and the removal request will not be sent.</p>                    
            </div>
            <div class="modal-footer ConfirmFooter">
              <button type="button" class="btn btn-success">Yes</button>
                <button id="btnRemoveConfirmNo" type="button" class="btn btn-warning" data-dismiss="modal" title="Click to close this screen. The request will not be sent.">No</button>
            </div>
        </div>
    </div>
</div>

当您显示在服务器上定义的原始值时，这种方法有效；如果要显示用户更改为的值，请将<%= txtRemoveUser.Text %>代码替换为：

<span id="removeUserLabel"></span>

在显示模态之前，使用此脚本将其复制到span:

$("#removeUserLabel").html(
     $("#<%= txtRemoveUser.ClientID %>").val()
);

使用jquery，或者作为普通JavaScript:

var span= document.getElementById("removeUserLabel");
var input = document.getElementById("<%= txtRemoveUserID.ClientID %>").value;
span.innerHTML = input;

然后该值将正确显示。

相关文章：