[asp.net]显示值输入在 asp︰ 文本框在modal

标签: Asp.net HTML C#
发布时间: 2017/3/26 2:08:57
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有 asp.net web 窗体应用程序,我想要在中输入的值传递我 asp:TextBox 的用户名称,然后在我确认modal上显示。

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 %> ,但它不工作。

解决方法 1:

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

看来你使用引导的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>

官方微信
官方QQ群
31647020