Javascript 带内联编辑器的MVC表格积垢

我有一张桌子：

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

#
位置
行动
@foreach（模型中的var项目）{
@DisplayFor（modelItem=>item.LocationID）
@DisplayFor（modelItem=>item.LocationName）
}
@ActionLink（“新建”、“创建”）

---

“编辑”、“删除”和“添加”按钮都在工作，但它们将我带入一个新页面，以执行“编辑”、“添加”和“删除”操作。当我单击“编辑”时，是否可能相应的行变为可编辑，而“编辑”按钮变为“保存”按钮以将其发布/保存到数据库？有人能告诉我是怎么做的，或者告诉我在哪里可以看到一些例子吗？我是网络开发新手。

有很多方法可以实现你的目标。我的首选方法是使用对话框进行新建/编辑，而不是内联，但我已经多次使用内联。这取决于有多少个输入-如果只是LocationName，那么内联就可以了

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

更改此项：

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

（同样，生产代码应该使用正确的名称空间）

然后需要发布编辑-在EditorFor旁边添加一个小的保存按钮，并使用Ajax发布或添加

标记

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

为什么不使用JqGrid？

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

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

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