Javascript 在JQuery中将EditorFor value设置为DisplayFor value

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

这是我的视图代码。每个

都是一列，我正在为各自的DisplayFor和EditorFor字段切换范围项目显示和项目字段可见性.hide（）和.show（）

            <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>

@DisplayFor（modelItem=>item.Name）
@EditorFor（modeleItem=>item.Name）
@DisplayFor（modelItem=>item.ReleaseDate）
@EditorFor（modeleItem=>item.ReleaseDate）
@DisplayFor（modelItem=>item.Description）
@EditorFor（modeleItem=>item.Description）
@DisplayFor（modeleItem=>item.ID）
编辑
拯救
删除

这是我的JQuery，现在它只是将我的DisplayFor转换为EditorFor，然后根据按钮点击返回DisplayFor（编辑并保存）

函数编辑函数（元素）{
$（元素）。最近的（“span”）.hide（）；
$（元素）。最近的（“td”）.find（“span.item保存按钮”）.show（）；
$（元素）。最近的（“td”）.find（“span.item删除按钮”）.hide（）；
$（元素）。最近的（“td”）.prev（“td”）.find（“跨度项目显示”）
.hide（）
.next（“跨度项目字段”）
.show（）；
$（元素）.最近的（“td”）.prev（“td”）.prev（“td”）.find（“跨度项目显示”）
.hide（）
.next（“跨度项目字段”）
.show（）；
$（元素）.最近的（“td”）.prev（“td”）.prev（“td”）.prev（“td”）.find（“跨度项目显示”）
.hide（）
.next（“跨度项目字段”）
.show（）；
}
函数保存函数（元素）{
$（元素）。最近的（“span”）.hide（）；
$（元素）。最近的（“td”）.find（“span.item编辑按钮”）.show（）；
$（元素）。最近的（“td”）.find（“span.item删除按钮”）.show（）；
$（元素）。最近的（“td”）.prev（“td”）.find（“跨度项目显示”）
.show（）
.next（“跨度项目字段”）
.hide（）；
$（元素）.最近的（“td”）.prev（“td”）.prev（“td”）.find（“跨度项目显示”）
.show（）
.next（“跨度项目字段”）
.hide（）；
$（元素）.最近的（“td”）.prev（“td”）.prev（“td”）.prev（“td”）.find（“跨度项目显示”）
.show（）
.next（“跨度项目字段”）
.hide（）；
var newID=$（element.closest（“td”）.find（“span.ID”）.text（）；
var newName=$（元素）.testest（“td”）.prev（“td”）.prev（“td”）.prev（“td”）.find（“span.item display”）.text（）；
var newRelease=$（元素）。最近的（“td”）.prev（“td”）.prev（“td”）.find（“span.item display”）.text（）；
var newDescription=$（元素）。最近的（“td”）.prev（“td”）.find（“span.item display”）.text（）；
警报（“\n”+newID+“\n”+newName+“\n”+newRelease+“\n”+newDescription）；
@*美元邮政(
@Url.Action（“UpdateTitle”、“Movie”），
{
“id”：newID，
“名称”：新名称
},
函数（数据）{}，
“json”
);*@
}

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

---

谢谢

我似乎偶然发现了寻找答案的人的答案。你必须有一些我不知道的事情

您需要来自EditorFor的.val（）的输入

然后需要将其放在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具有类似于“set”的

.html

，然后我将其设置为EditorFor的

.val（）

，然后隐藏编辑器并显示显示

一个简化的版本大概是这样的。（仅将EditorFor转换为具有EditorFor值的DisplayFor）

@DisplayFor（modelItem=>item.someItem）
@EditorFor（modelItem=>item.someItem）
函数myFunction（元素）{
$（元素）.find（“span.CLASS\u NAME\u DISPLAYFOR”）.html（$（元素）.find（“span.CLASS\u NAME\u EDITORFOR”）.find（“：input:first”）.val（））；
$（元素）.find（“span.CLASS\u NAME\u DISPLAYFOR”）
.show（）
.next（“跨度项目字段”）
.hide（）；
}

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

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