Редактируемый ярлык Ajax на странице ASP с главной страницей

Question

У меня есть страница 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';