Question

我有查看和修改帐户的视图。这有＆＃34;编辑＆＃34;按钮和＆＃34;保存＆＃34;按钮。

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

我的视图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然后你可以使用像$('.TheClassYouMade').attr('readonly', false);这样的jQuery在你改变按钮的同时改变它们。

我认为值得一提的是，创建和编辑视图的最佳做法通常是不同的。有关“创建和编辑”不应位于同一视图中的原因的讨论，请参阅this post。

Answer 2

你可以隐藏这种逻辑并在点击时显示文本框。

HTML

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

js

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

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

MVC改变了html助手类型

2 个答案: