显示值在asp:TextBox On Modal中输入

时间:2015-11-05 13:14:25

标签: c# html asp.net

我有一个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 %>,但它无法正常工作。

2 个答案:

答案 0 :(得分:2)

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

完成

看起来你正在使用Bootstrap&#39; s Modal(后者又包含jQuery)。他们的文档有一节varying content

这将使您的代码看起来大致如下:

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

工作代码段(不包括.NET控件):

&#13;
&#13;
$('#removeUserModal').on('show.bs.modal', function (event) {
  var user = $('#txtRemoveUser').val();
  $('.modal-body b', this).text(user);
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

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

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

在显示模态之前,请使用此脚本将其复制到范围:

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

使用jquery或纯JavaScript:

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

然后该值将正确显示。