在索引视图的表格中编辑内联答案

【问题标题】：Edit inline in table in index view在索引视图的表格中编辑内联
【发布时间】：2014-06-02 21:53:03
【问题描述】：

我使用下面的代码来显示表格行对于每一行都有编辑和删除按钮，我想做的是当我单击特定行的编辑时，将行从仅显示更改到可编辑的行（而不是导航到其他页面进行编辑），我应该怎么做？

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.checkBox1)
        </th>

        <th></th>
    </tr>

    <tbody id="data-table">
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.checkBox1)
                </td>

                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.Id })
                </td>
            </tr>
        }
    </tbody>

这就是表格的样子

我尝试将代码更改为类似的内容，但出现以下错误：

     <tbody id="data-table">

        @for (var i = 0; i < Model.Count(); i++)
{
            <tr>
                if (Model[i].Id == ViewBag.SelectedID)
                {
                <td>
                    @Html.EditorFor(model=> model[i].name)
                </td>
                <td>
                    @Html.EditorFor(m=> m[i].checkBox1)
                </td>

                <td>
                    <button type="submit" name="submit" value="save">Save</button>
                    <button type="submit" name="submit" value="cancel">Cancel</button>
                </td>
                }
                }
                else
                {
                <td>
                    @Html.DisplayFor(m => m[i].name)
                </td>
                <td>
                    @Html.DisplayFor(m=> m[i].checkBox1)
                </td>

                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }) |
                    @Html.ActionLink("Delete", "Delete", new { id = Model.Id })
                </td>
                }
            </tr>
}

错误在语句中：

@Html.EditorFor(m => m[i].name) and

 @Html.EditorFor(m=> m[i]checkBox1)

尝试明确指定参数，知道吗？

【问题讨论】：

你有没有尝试过？使用 jQuery，您可以用输入替换所有文本，但您所要求的并不是一项简单的任务。
@cale_b- 这就是我打开此消息以获取一些可以提供帮助的示例的原因，因为我在网络上没有找到任何类似的示例...

标签： javascript jquery css asp.net asp.net-mvc

【解决方案1】：

试试下面的代码

下面的函数使行可编辑

var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
    nCurrentEdit = $(this).attr("id");

    var oTR = $(this).parents("tr").first();

    var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
    oTR.find("td:nth-child(1)").html(sText);
    oTR.find(":disabled").prop("disabled", false);

    if (oTR.find("#btnsubmit").length == 0)
        oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");

    oTR.find("td:last a").hide();

    event.preventDefault();
});

以下函数更新记录并将行从可编辑模式转换为正常。

$('#data-table').on('click', '#btnUpdate', function () {
    var postData = {
        id : nCurrentEdit,
        name: $("#name").val(),
        checkBox1: $("#checkBox1").val(),
        checkBox2: $("#checkBox2").val(),
        checkBox3: $("#checkBox3").val()
    };

    $.post('@Url.Action("AjaxEdit", "Roles")', postData, null);

    var sNewText = $(this).parents("tr").first().find("td:first input").val();
    $(this).parents("tr").first().find("td:first").append(sNewText);
    $(this).parents("tr").first().find("td:first input").remove();
    $(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);

    $(this).parent().find("a").show();
    $(this).hide();
});

【讨论】：

【解决方案2】：

您也许可以使用 jEditable http://www.appelsiini.net/projects/jeditable 并将其与您的表格相结合。

如果它适合您的项目，也许您也可以将 DataTables 与 jEditable 一起使用，例如 http://datatables.net/release-datatables/examples/server_side/editable.html

【讨论】：