带有 Masterpage 的 ASP 页面上的 Ajax 可编辑标签

Question

我的网页上有一个带有 Masterpage 的 ASP 页面。在此页面上，我将有多个标签，旁边有一个编辑超链接。当用户单击编辑超链接时，我希望标签成为文本框，并在其旁边保存和编辑超链接。我一直在尝试这样做，并且在单击时无法使编辑超链接工作。这是我的 .js

/// <reference name="MicrosoftAjax.js"/>
// Global variables
var Label1, TextBox1, Edit1, Save1, Cancel1;

Sys.Application.add_init(AppInit);

function AppInit(sender) {
    Label1 = $get('labelWorkPhone');
    TextBox1 = $get('textboxWorkPhone');
    Edit1 = $get('hyperlinkEditWorkPhone');
    Save1 = $get('hyperlinkSaveWorkPhone');
    Cancel1 = $get('hyperlinkCancelWorkPhone');

    $addHandler(Edit1, "click", Edit1_Click);
    $addHandler(TextBox1, "blur", TextBox1_Blur);
    $addHandler(Save1, "click", Save1_Click);
    $addHandler(Cancel1, "click", Cancel1_Click);
}

function Edit1_Click() {
    TextBox1.value = Label1.innerHTML;

    Label1.style.display = 'none';
    TextBox1.style.display = '';

    TextBox1.focus();
}

function Save1_Click() {
    TextBox1.blur();
}

function Cancel1_Click() {
    Label1.style.display = '';
    TextBox1.style.display = 'none';
}

function TextBox1_Blur() {
    var labelUpdated;

    if (Label1.textContent == TextBox1.value)
        labelUpdated = false;
    else
        labelUpdated = true;

    Label1.innerHTML = TextBox1.value;

    TextBox1.style.display = 'none';
    Label1.style.display = '';

    if (labelUpdated)
        PageMethods.SetWorkPhone(TextBox1.value);
}

这是我的html

<td class="style1">
  <asp:Label ID="labelWorkPhone" runat="server" Text="labelWorkPhone"></asp:Label>
  <asp:TextBox ID="textboxWorkPhone" runat="server" Style="display: none;"></asp:TextBox>
</td>
<td class="style1">
  <asp:HyperLink CssClass="a" ID="hyperlinkEditWorkPhone" runat="server" Font-Underline="True" 
    ForeColor="Blue">Edit</asp:HyperLink>
  <asp:HyperLink CssClass="a" ID="hyperlinkSaveWorkPhone" runat="server" 
  Style="display: none;">Save</asp:HyperLink>
  <asp:HyperLink CssClass="a" ID="hyperlinkCancelWorkPhone" runat="server" 
  Style="display: none;">Cancel</asp:HyperLink>
</td>

<asp:ScriptManager ID="scriptManager1" runat="server" EnablePageMethods="true">
    <Scripts>
      <asp:ScriptReference Path="~/Scripts/WorkPhoneJavaEdit.js" />
</Scripts>
  </asp:ScriptManager>

提前谢谢你。

Answer 1

尝试改变：

TextBox1.style.display = '';

到

TextBox1.style.display = 'block';