Question

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

这是我的查看代码。每个<td>都是一列，我正在为各自切换范围项目显示和项目字段可见性.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

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

您需要来自EditorFor的.val（）的输入。
然后你需要把它放在你的DisplayFor

所以对于我的场景

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

将EditorFor的值设置为JQuery中的DisplayFor值

1 个答案: