Question

我已经查看了其他问题和答案，似乎仍无法解决我的问题。

我正在使用带有3个标签的jQuery UI标签：基本信息，付款，确认

我想要做的是将基本信息标签文本框和付款标签上的值传递到确认标签上的标签

ASPX：

<ul>
<li><a href="#tabs-1">Basic Information</a></li>
<li><a href="#tabs-2">Payment Information</a></li>
<li><a href="#tabs-3">Confirmation</a></li>
</ul>

<div id="tabs-1">
<asp:Label runat="server" ID="lblFirstName" Text="First Name" />
<asp:TextBox runat="server" ID="tbFirstName" AutoPostBack="true"/>
<asp:Button runat="server" ID="btnContinue" Text="Continue" CssClass="nexttab" />
</div>

<div id="tabs-2">
</div>

<div id="tabs-3">
<asp:Label runat="server" ID="lblConfirmFirstTitle" Text="First Name" />
<asp:Label runat="server" ID="lblConfirmFirst" />
</div>

</div>

脚本：

$("#btnContinue").click(function () {
$("#lblConfirmFirst").html($("#tbFirstName.").val());
});

下一个标签功能正常工作，当选择下一个标签时，值会保留在文本框中，但是它不会传递到第3个标签上的标签。

Answer 1

我认为问题是asp.net重命名你的服务器控件，如果页面有一个母版页。将属性：ClientIDMode =“Static”添加到您的asp控件。

Answer 2

当您使用ASP.NET控件时，ID将在呈现时更改。使用jQuery Ends With 选择器来选择元素。



对ASP.NET标签使用jQuery text 方法（即html span），为ASP.NET Toolbox使用jQuery val 方法（即html输入）。



此外，由于该按钮是ASP.NET按钮，因此每次单击时都会回发，因此在按钮单击方法结束时使用 return false; 。



对于文本框，您有一个 AutoPostBack =“true”，这可能会在回发时重置标签文字，从而产生问题。

如果从文本框中删除 AutoPostBack =“true”，则代码将有效。

$(document).ready(function () {
    $(function () {
        $("#tabs").tabs();
    });
    $("input[id$=btnContinue]").click(function () {
        $("span[id$=lblConfirmFirst]").text($("input[id$=tbFirstName]").val());
        return false;
    });
});

将文本框值传递给标签ASP.net C＃jQuery UI选项卡

2 个答案: