Question

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

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

这就是表格的样子

enter image description here

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

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

尝试明确指定参数，任何想法？

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

Answer 2

您可以使用jEditable http://www.appelsiini.net/projects/jeditable并将其与您的桌子一起使用。

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

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

2 个答案: