Javascript MVC更改html帮助程序类型

我有一个查看和编辑帐户的视图。它有一个“编辑”按钮和一个“保存”按钮

我希望视图将信息显示为标签，并在单击“编辑”时将其更改为文本框。如何将标签更改为文本框，反之亦然？我目前有一个javascript函数，在单击edit时隐藏/显示save按钮，想必我也可以用javascript实现结果

我的视图html在下面（当前使用的是文本框而不是标签）

函数SetEditButton（）
{
var editOrSave=document.getElementById（“editButton”）.value；
如果（编辑保存=“编辑”）{
//AccountPopupControl.SetHeaderText（AccountPopupControl.HeaderText+“编辑”）；
document.getElementById（“saveButton”）.style=“float:right；display:block；”
document.getElementById（“editButton”）.style=“float:right；display:none；”
}
否则{
//AccountPopupControl.SetHeaderText（AccountPopupControl.HeaderText.substring（0，AccountPopupControl.HeaderText.length-5））；
document.getElementById（“editButton”）.style=“float:right；display:block；”
document.getElementById（“saveButton”）.style=“float:right；display:none；”
}
返回editOrSave；
}
名称：


参考资料：


说明：


地址第1行：


地址第2行：


地址第3行：


地址第4行：


地址第5行：


@Html.TextBoxFor（model=>model.name，新的{id=“nameTxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.reference，新的{id=“referenceTxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.description，新的{id=“descriptionxtbx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.address1，新的{id=“address1TxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.address2，新的{id=“address2TxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.address3，新的{id=“address3TxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.address4，新的{id=“address4TxtBx”，@readonly=“true”}）


@Html.TextBoxFor（model=>model.address5，新的{id=“address5TxtBx”，@readonly=“true”}）


自定义1:


定制2:


@Html.TextBoxFor（model=>model.custom1）


@Html.TextBoxFor（model=>model.custom2）

为什么总是使用

@Html.TextBoxFor

，给他们一个

@class

，这样你就可以用JS来定位他们，然后在你查看时给他们Html属性

@readonly=true

，然后你可以使用一些jQuery，比如

$（'.theclassyoumake'）.attr（'readonly'，false）

在更改按钮的同时更改它们

---

我认为值得一提的是，创建和编辑视图的最佳实践通常是不同的。有关为什么创建和编辑不应在同一视图中的讨论，请参阅。

如何始终使用

@Html.TextBoxFor

，为所有对象提供一个

@class

，这样您就可以使用JS将它们作为目标，然后在查看时为它们提供Html属性

@readonly=true

，然后可以使用类似

的jQuery$（'.TheClassYouMake'）.attr（'readonly'，false）；

在更改按钮的同时更改它们

---

我认为值得一提的是，创建和编辑视图的最佳实践通常是不同的。有关为什么创建和编辑不应在同一视图中的讨论，请参阅。

您可以在单击时隐藏并显示文本框

html

---

您可以在单击时隐藏并显示文本框

html

<script type="text/javascript">
  function SetEditButton()
{
    var editOrSave = document.getElementById("editButton").value;

    if (editOrSave == "Edit") {
        //AccountPopupControl.SetHeaderText(AccountPopupControl.HeaderText + " EDIT");

        document.getElementById("saveButton").style = "float: right;display:block;"
        document.getElementById("editButton").style = "float: right;display:none;"
    }
    else {
        //AccountPopupControl.SetHeaderText(AccountPopupControl.HeaderText.substring(0, AccountPopupControl.HeaderText.length - 5));

        document.getElementById("editButton").style = "float: right;display:block;"
        document.getElementById("saveButton").style = "float: right;display:none;"
    }

    return editOrSave;
}
</script>

<table style="width:100%;height:100%">
            <tr>
                <td>
                    <div class="verticalLine">
                        <table style="width:100%;height:100%">
                            <tr>
                                <td valign="top">
                                    <p class="big">Name:</p><br />
                                    <p class="big">Reference:</p><br />
                                    <p class="big">Description:</p><br />
                                    <p class="big">Adress Line 1:</p><br />
                                    <p class="big">Adress Line 2:</p><br />
                                    <p class="big">Adress Line 3:</p><br />
                                    <p class="big">Adress Line 4:</p><br />
                                    <p class="big">Adress Line 5:</p><br />
                                </td>
                                <td valign="top">
                                    <p class="big">@Html.TextBoxFor(model => model.name, new { id = "nameTxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.reference, new { id = "referenceTxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.description, new { id = "descriptionTxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.address1, new { id = "address1TxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.address2, new { id = "address2TxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.address3, new { id = "address3TxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.address4, new { id = "address4TxtBx", @readonly = "true" })</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.address5, new { id = "address5TxtBx", @readonly = "true" })</p><br />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td>
                    <div>
                        <table style="width:100%;height:100%">
                            <tr>
                                <td valign="top">
                                    <p class="big">Custom 1:</p><br />
                                    <p class="big">Custom 2:</p><br />
                                </td>
                                <td valign="top">
                                    <p class="big">@Html.TextBoxFor(model => model.custom1)</p><br />
                                    <p class="big">@Html.TextBoxFor(model => model.custom2)</p><br />
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>

<span id="my-label">Custom</span>
@Html.TextBoxFor(m => m.Custom, new { id="custom-tb", style="display: none" })  

$('#my-label').on('click', function () {
  $(this).hide();
  var $tb = $('#custom-tb');
  $tb.show();
  $tb.focus();
});

$('#custom-tb').focusout(function () {
  $(this).hide();
  $('#my-label').show();
});