Question

我在MVC中有一个gridview，当我点击编辑时，特定行变成文本框但数据没有更新。我点击标签后输入的数据没有保存或输入以前的记录。我需要更改代码才能获得结果？

我的jQuery代码是：

<script type="text/javascript">
        $(document).ready(function() {
            $('a.edit').click(function () {
                var dad = $(this).parent().parent();
                dad.find('.displaytext').hide();
                dad.find('input[type="text"]').show();
            });

        $('input[type=text]').focusout(function() {
            var dad = $(this).parent();
            $(this).hide();
            dad.find('.displaytext').show();
        });
        });
    </script>

我的编辑控制器代码是

[HttpGet]
        public ActionResult Edit(int id = 0)
        {
            tbl_HolidayList tbl_holidaylist = db.tbl_HolidayList.Find(id);
            if (tbl_holidaylist == null)
            {
                return HttpNotFound();
            }
            return View(tbl_holidaylist);
        }

        //
        // POST: /Holiday/Edit/5

        [HttpPost]
        public ActionResult Edit(tbl_HolidayList tbl_holidaylist)
        {
            if (ModelState.IsValid)
            {
                db.Entry(tbl_holidaylist).State = EntityState.Modified;
                db.SaveChanges();
                TempData["Msg"] = "Data has been updated succeessfully";
                return RedirectToAction("Index");
            }
            return View(tbl_holidaylist);
        }

html代码

<table>
        <tr>
@*            <th>
                @Html.Label("ID")
            </th>*@
            <th>
                @Html.Label("Name")
            </th>
            <th>
                @Html.Label("Description")
            </th>
            <th>
                 @Html.Label("Date")
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model) {
        <tr>
           @* <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Id, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Id)
                </div>
            </td>*@
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Name, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Name)
                </div>
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_Description, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_Description)
                </div>
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Holiday_date, new { style = "display: none; width:170px; height:15px" })
                <div class="displaytext">
                    @Html.DisplayFor(modelItem => item.Holiday_date)
                </div>
            </td>
            <td>
                <a id="edit" class="edit" href="#">Edit</a> |
                @*@Html.ActionLink("Edit", "Edit", new { id = item.Holiday_Id }, new { @class = "lnkEdit" }) |*@
               @* @Html.ActionLink("Details", "Details", new { id = item.Holiday_Id}, new { @class = "lnkDetail" }) |*@
                @Html.ActionLink("Delete", "Delete", new { id = item.Holiday_Id }, new { @class = "lnkDelete" })
                @*<a id="edit" class="edit" href="#">Edit</a> |
                @Html.ActionLink("Delete", "Delete", "Holiday")*@
            </td>
        </tr>
    }

    </table>

Answer 1

您当前的代码不会在显示文本和输入值之间传输值

如果没有看到html，你可以尝试以下内容：

$('a.edit').click(function () {
    var dad = $(this).parent().parent();
    var $display = dad.find('.displaytext').hide();
    /* get recent text */
    var txt = $display.text();
    /* use val() to update input */
    dad.find('input[type="text"]').val(txt).show();
});

$('input[type=text]').focusout(function () {
    var dad = $(this).parent();
    $(this).hide();
    /* use input value to update text */
    var val = this.value;
    /* do ajax here to update server if needed */
    dad.find('.displaytext').text(val).show();
});

Answer 2

前一段时间我创建了一个基于内联网格编辑页面的插件，以下是我的工作原理 -

<script type="text/javascript">
    function siblingsEditor(ele) {
        $(ele).parent().parent('tr').siblings().children('td').not(':first-child').not(':last-child').each(function () {
            var values;
            if ($(this).children().is('input[type="text"]')) {
                values = $(this).children('input').val();
            }
            else {
                values = $(this).children('label').text();
            }
            var nameofthiselement = $(this).attr('data-target');
            $(this).html('<label for="' + nameofthiselement + '">' + values + '</label>');
        });
    }

    function Edit(element, id) {
        siblingsEditor(element);
        $(element).hide();
        $(element).next().show();
        $(element).next().next().show();
        $(element).parent().parent('tr').children('td').not(':first-child').not(':last-child').each(function () {
            var nameofthiselement = $(this).children().attr('for');
            $(this).html('<input type="text" class="form-control" name="' + nameofthiselement + '" value="' + $(this).children('label').html() + '"></input>');
        });
    }
    function Cancel(element, id) {
        $(element).hide();
        $(element).prev().show();
        $(element).next().hide();
        $(element).prev().prev().show();
        $(element).parent().parent('tr').children('td').not(':first-child').not(':last-child').each(function () {
            var values;
            if ($(this).children().is('input[type="text"]')) {
                values = $(this).children('input').val();
            }
            else {
                values = $(this).children('label').text();
            }
            var nameofthiselement = $(this).attr('data-target');
            $(this).html('<label for="' + nameofthiselement + '">' + values + '</label>');
        });
    }
    function Update(element, id) {
        $.ajax({
            url: '/Controller/Action?ID=' + id,
            type: 'POST',
            data: $('#form').serialize(),
            success: function (data) {
                $(element).hide();
                $(element).prev().hide();
                $(element).prev().prev().show();
                $(element).parent().parent('tr').children('td').not(':first-child').not(':last-child').each(function () {
                    var values;
                    if ($(this).children().is('input[type="text"]')) {
                        values = $(this).children('input').val();
                    }
                    else {
                        values = $(this).children('label').text();
                    }
                    var nameofthiselement = $(this).attr('data-target');
                    $(this).html('<label for="' + nameofthiselement + '">' + values + '</label>');
                });
            }
        });
    }
    function Delete(element, id) {
        $.post({'/controller/Actiion?ID=' + id,function (data) {
            $(element).parent().parent().fadeOut();
        }
        });
    }
</script>

注意 - 我将表限制在特定结构中，其中for属性必须与表列的data-target匹配 -

<form id="form"> <table class="table"> <tr> <th>S.NO. </th> <th>header1 </th> <th>header2 </th> <th>Actions</th> </tr> <tbody> <tr> <td>column1</td> <td data-target="samename1"> <label for="samename1">some html</label> </td> <td data-target="samename2"> <label for="samename2">some html</label> </td> <td> <a href="javacript:;" onclick="Edit(this,1)"><i class="fa fa-pencil"></i></a> <a href="javacript:;" style="display:none" onclick="Cancel(this,'idofthisrow')"><i class="fa fa-times"></i></a> <a href="javacript:;" style="display:none" onclick="Update(this,'idofthisrow')"><i class="fa fa-refresh"></i></a> <a href="javacript:;" onclick="Delete(this,1)"><i class="fa fa-trash-o"></i></a> </td> </tr> </tbody> </table> </form>

然后列出那些我不想编辑的列，我将它们放在jQuery .not中。

尝试一下，让我知道它是否有效

Answer 3

在控制器中试试

     [HttpPost]
    public ActionResult Edit(tbl_HolidayList tbl_holidaylist)
    {
        if (ModelState.IsValid)
        {

               List<tbl_HolidayList > holitemp = new List<tbl_HolidayList >();
            foreach (tbl_HolidayList item in objedit.tbl_HolidayList )
            {
                 if (item.Holiday_Name== null || item.Holiday_Name.Trim() == "")
                {
                    if (item.Holiday_Id!= 0)
                    {
                        db.Entry(item).State = EntityState.Modified;
                    }
                    else
                        holitemp .Add(item);
                }
                else if (item.Holiday_Id== 0)
                    db.tbl_HolidayList .Add(item);

                else
                    db.Entry(item).State = EntityState.Modified;


            }

            foreach (tbl_HolidayList item in holitemp)
            {
                if (item.Holiday_Name== 0 || item.Holiday_Name== null)
                {
                    objedit.tbl_HolidayList .Remove(item);
                }
            }

编辑后数据未保存在数据库中 - MVC

3 个答案: