javascript - MVC 更改 html 帮助程序类型

Question

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

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

我的 View 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>

Answer 1

总是使用@Html.TextBoxFor怎么样，给它们全部一个@class，这样你就可以用JS定位它们，然后给它们html属性@ readonly = true 当你查看它时，然后你可以使用一些 jQuery，如 $('.TheClassYouMade').attr('readonly', false); 来更改它们更改按钮的同时。

我认为值得一提的是，一般来说，创建和编辑 View 的最佳实践是不同的。请参阅this post有关为什么“创建”和“编辑”不应位于同一 View 中的讨论。