Question

所以我有这张桌子：

<table class="table table-bordered">
    <tr>
        <th style="width: 10px">#</th>
        <th>Location</th>
        <th style="width: 20px">Actions</th>
    </tr>@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.LocationID)</td>
        <td>@Html.DisplayFor(modelItem => item.LocationName)</td>
        <td>
            <a href="@Url.Action(" Edit ", new { id = item.LocationID})">
                <i class="glyphicon glyphicon-edit"></i>
                <span class="sr-only">Edit</span>
            </a>
            <a href="@Url.Action(" Delete ", new { id = item.LocationID})">
                <i class="glyphicon glyphicon-erase"></i>
                <span class="sr-only">Edit</span>
            </a>

        </td>
    </tr>}
    <tr>
        <td><i class="glyphicon-plus"></i>
        </td>
        <td colspan="2">@Html.ActionLink("Create New", "Create")</td>
    </tr>
</table>

编辑，删除和添加按钮都可以正常工作，但是他们带我进入新页面来执行编辑，添加和删除。是否有可能当我单击编辑时，相应的行变为可编辑，编辑按钮变为保存按钮以将其发布/保存到数据库？任何人都可以告诉我它是如何完成的，或者指出我在哪里可以看到一些新的Web开发实例。

Answer 1

有很多方法可以实现你所追求的目标。我首选的方法是使用一个新的/编辑对话而不是内联，但我已经多次使用内联。这取决于有多少输入 - 如果只是LocationName然后内联是好的。

一种简单的方法是在视图中包含编辑器，然后根据需要显示/隐藏它。

改变这个：

<td>@Html.DisplayFor(modelItem => item.LocationName)</td>

为：

<td>
    <div class='inline-view'>
        @Html.DisplayFor(modelItem => item.LocationName)
    </div>
    <div class='inline-edit' style='display:none;'>
        @Html.EditorFor(modelItem => item.LocationName)
    </div>
</td>

并更改编辑按钮以调用某些javascript

<div class='inline-view'>
    <a href='#' onclick='startEdit();return false;'>edit</a> 
</div>
<div class='inline-edit' style='display:none;'>
    <a href='#' onclick='cancelEdit();return false;'>cancel</a>
</div>

（当然，是纯粹主义者并通过javascript添加点击事件，仅用于说明目的）
你也不需要所有的div - 只是为了清晰起见而添加。

然后添加一些js：

function startEdit() {
    // you could use fadeOut/fadeIn or slide etc to make it a bit nicer here
    // maybe flash the background of the input to show something's changed
    // etc
    $(".inline-view").hide();
    $(".inline-edit").show();
}

function cancelEdit() {
    $(".inline-edit").hide();
    $(".inline-view").show();
}

（同样，生产代码应使用适当的名称空间）

然后您需要发布编辑 - 在EditorFor旁边添加一个小保存按钮，并使用Ajax发布或添加<form>标签。

另一种方法是在单击编辑按钮时加载内联表单 - 为编辑表单创建PartialView并使用ajax调用将其加载并替换现有的表行/单元 - 在保存时，加载PartialView对于视图部分和覆盖。 ajax方法可确保您编辑最新数据，但有点复杂。

使用内联编辑器的MVC表CRUD

1 个答案: