javascript - 在 JQuery 中将 EditorFor 值设置为 DisplayFor 值

Question

现在我有一个函数可以将一行 DisplayFor 转换为 EditorFor 。我现在尝试将 EditorFor 恢复为 DisplayFor，但使用新值。

这是我的查看代码。每个<td>是一列，我正在切换跨度 item-display 和 item-field 可见性 .hide() 和 .show() 各自的 DisplayFor 和 EditorFor 字段。

            <td class="col-lg-2">
                <span class="item-display">
                    <span style="font-size: 17px;">
                    @Html.DisplayFor(modelItem => item.Name)
                    </span>
                </span>
                <span class="item-field">
                    @Html.EditorFor(modelItem => item.Name)
                </span>

            </td>


            <td class="col-lg-3">
                <span class="item-display">
                    <span style="font-size: 17px;">
                    @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </span>
                </span>
                <span class="item-field">
                    @Html.EditorFor(modelItem => item.ReleaseDate)
                </span>
            </td>


            <td class="col-lg-3">
                <span class="item-display">
                    <span style="font-size: 17px; font-style:italic">
                    @Html.DisplayFor(modelItem => item.Description)
                    </span>
                </span>
                <span class="item-field">
                    @Html.EditorFor(modelItem => item.Description)
                </span>
            </td>


            <td class="col-lg-3 col-lg-offset-1">
                <span style="visibility:hidden" class="ID">@Html.DisplayFor(modelItem => item.ID)</span>

                <span class="item-edit-button">
                    <button type="button" onclick="editFunction(this)" class=" btn btn-warning col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
                </span>

                <span class="item-save-button">
                    <button type="button" onclick="saveFunction(this)" class="btn btn-success col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Save</button>
                </span>

                <span class="item-delete-button">
                    <button type="button" class="btn btn-danger col-lg-4"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </span>
            </td>
        </tr>

这是我的 JQuery，现在它只是将我的 DisplayFor 转换为 EditorFor，然后根据按钮单击(编辑和保存)返回 DisplayFor。

<script>
    function editFunction(element) {

        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-save-button").show();
        $(element).closest("td").find("span.item-delete-button").hide();


        $(element).closest("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

        $(element).closest("td").prev("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

        $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
            .hide()
            .next("span.item-field")
            .show();

    }

    function saveFunction(element) {
        $(element).closest("span").hide();
        $(element).closest("td").find("span.item-edit-button").show();
        $(element).closest("td").find("span.item-delete-button").show();


        $(element).closest("td").prev("td").find("span.item-display")
            .show()
            .next("span.item-field")
            .hide();

        $(element).closest("td").prev("td").prev("td").find("span.item-display")
            .show()
            .next("span.item-field")
            .hide();

        $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display")
            .show()
            .next("span.item-field")
            .hide();

        var newID = $(element).closest("td").find("span.ID").text();
        var newName = $(element).closest("td").prev("td").prev("td").prev("td").find("span.item-display").text();
        var newRelease = $(element).closest("td").prev("td").prev("td").find("span.item-display").text();
        var newDescription = $(element).closest("td").prev("td").find("span.item-display").text();


        alert("\n" + newID + "\n" + newName + "\n" + newRelease + "\n" + newDescription);



        @*$.post(
            '@Url.Action("UpdateTitle", "Movie")',
             {
                 'id': newID,
                 'name': newName
             },
            function (data) { },
            "json"
        );*@


    }
</script>

如何捕获 EditorFor 值并将其放入我的 DisplayFor 中？

谢谢!

Answer 1

看来我偶然发现了那些寻找答案的人。你一定有一些我不知道的事情。

1. 您需要来自 EditorFor 的 .val() 的输入。

2. 然后您需要将其放入 DisplayFor 的 .html 中

对于我的场景

$(element).closest("td").prev("td").find("span.item-display").html(
$(element).closest("td").prev("td").find("span.item-field").find(":input:first").val());

            $(element).closest("td").prev("td").find("span.item-display")
                .show()
                .next("span.item-field")
                .hide();

所以我的 DisplayFor 有 .html ，就像“set”，然后我将它设置为我的 EditorFor 的 .val() ，然后隐藏编辑器并显示显示屏。 ;)

简化版本会是这样的。 (仅将 EditorFor 转换为具有 EditorFor 值的 DisplayFor)

<span class="CLASS_NAME_DISPLAYFOR">
       @Html.DisplayFor(modelItem => item.someItem)
</span>
<span class="CLASS_NAME_EDITORFOR">
       @Html.EditorFor(modelItem => item.someItem)
</span>

    <button type="button" onclick="myFunction(this)">

            function myFunction(element) {
                $(element).find("span.CLASS_NAME_DISPLAYFOR").html($(element).find("span.CLASS_NAME_EDITORFOR").find(":input:first").val());
                $(element).find("span.CLASS_NAME_DISPLAYFOR")
                    .show()
                    .next("span.item-field")
                    .hide();
            }