MVC更改HTML帮助程序类型

Question

I have a view for viewing and editing accounts. This has an "edit" button and a "save" button.

I would like the view to display the information as labels and change this to textboxes when edit is clicked. How can I change the lables to textboxes and vice versa? I currently have a javascript function to hide/show the save button when edit is clicked, presumably I can achieve the result in javascript also?

My view html is below (currently using textbox not label)

<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

What about always using @Html.TextBoxFor , giving them all a @class so you can target them with JS and then giving them the html attribute @readonly = true when you you're viewing it and then you can use some jQuery like $('.TheClassYouMade').attr('readonly', false); to change them at the same time you change the button.

I think it is worth saying that the best practice, generally, for Create and Edit views are different. See this post for a discussion on why Create and Edit should not be in the same view.

Answer 2

You could you this kind of logic hide and show the textbox on click.

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();
});