隐藏和显示 ActionLink 并将数据保存在数据库中 - MVC

Question

我正在开发一个 MVC 应用程序，当用户单击 Edit 时，我必须将标签转换为文本框，这工作正常，但在单击 Edit 并显示文本框后，Edit 应该隐藏并且 Save 应该出现并且单击Save 时，数据应保存在数据库中，并应在页面上刷新。 但是Edit ActionLink 没有隐藏，Save ActionLink 没有出现。并且编辑的数据也没有保存在数据库中。

jQuery 代码：

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

        $('a.Save').click(function() {
            var dad = $(this).parent();
            //$(this).hide();
            $('a.edit').show();
            $('a.save').hide();
            dad.find('.displaytext').show();
            url = $(this).attr('href');
            $(this).load(url);
        });
        });
    </script>

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)
    {
        if (Convert.ToDateTime(item.Holiday_date).Year.ToString() == DateTime.Now.Year.ToString())
        {
            <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>
               @Html.ActionLink("Edit", "Edit", new { id = item.Holiday_Id }, new { @class = "Edit", Href="#" })
               @Html.ActionLink("Save", "Save", new { id = item.Holiday_Id}, new { @class = "Save", Href = "#", style = "display:none" } ) |
               @Html.ActionLink("Delete", "Delete", new { id = item.Holiday_Id }, new { @class = "lnkDelete" })
            </td>
        </tr>
        }

    }

    </table>

控制器代码：

[HttpGet]
        public ActionResult Edit(int id = 0)
        {
            tbl_HolidayList tbl_holidaylist = db.tbl_HolidayList.Find(id);
            if (tbl_holidaylist == null)
            {
                return HttpNotFound();
            }
            return PartialView(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 PartialView(tbl_holidaylist);
        }

谁能告诉我我的错误？

Answer 1

Html 类区分大小写，您的类使用大写名称。

代替：

$('a.edit').hide();
$('a.save').show();

使用：

$('a.Edit').hide();
$('a.Save').show();

您还可以合并代码中的大量重复项：

$(document).ready(function () {
    function toggleEditability() {
        $(this).closest('tr')
               .find('a.Edit, a.Save, .displayText, input[type=text]')
               .toggle();
    }

    $('a.Edit').click(toggleEditability);

    $('a.Save').click(function() {
        toggleEditability.call(this);
        var url = $(this).attr('href');
        $(this).load(url);
    });
});

Answer 2

看起来这可能只是您的 jquery 选择器的问题。你的类是用大写的第一个字符定义的，但在你的选择器中你用小写的第一个字母查询它。