单击时 - 使 @Html.DisplayFor 成为可编辑的文本字段

Question

所以我正在玩我制作的练习网站，我想尝试一个功能，让我可以选择表中的任何数据值，对其进行编辑，然后将其保存到数据库中。

现在我有一个“编辑”按钮，它在控制器中运行自动生成的编辑方法，并且有自己的用于编辑和保存的视图，但我想在索引视图中尝试这个编辑功能（或至少将数据传递给此索引视图中的编辑函数）

这是页面现在的样子

我还有一个行扩展脚本，它显示一些我也希望可编辑的附加信息。 （都在同一个视图中）

查看Index.cshtml的代码

@model IEnumerable<WebApplication2.Entities.Movie>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
    table tr button {
        opacity: 0.5;
        float: right;
    }

    table tr:hover button {
        opacity: 1;
    }
</style>

<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-film"></span>Movies</span></span>
    </div>

    <div class="col-lg-offset-8 col-lg-4">
        <button type="button" style="margin:3px" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;"><span style="font-size:larger"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>

    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">
        <tr>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Title</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h4>
            </th>
            <th>
                <h4 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Description)</span></h4>
            </th>
            <th>
                @using (Html.BeginForm("Index", "Movie"))
                {
                    <div class="dropdown">
                        <select class="btn btn-group-lg btn-default col-lg-4" style="margin-top: 15px; height: 36px; opacity: 1" data-toggle="dropdown" name="Filter">
                            <option value="0" disabled selected>Filter By...</option>
                            <option value="1">Movie Name</option>
                            <option value="2">Description</option>
                        </select>
                    </div>

                    <input type="text" name="searchString" class="col-lg-6" style="margin-top: 16px; text-align:center; height:35px; font-size:20px" placeholder="enter text" />
                    <button type="submit" class="btn btn-group-lg btn-primary col-lg-2 glyphicon glyphicon-arrow-right" style="margin-top: 15px; height:36px; opacity:1" value="" />
                }
            </th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Name)</span>
                </td>
                <td class="col-lg-3">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.ReleaseDate)</span>
                </td>
                <td class="col-lg-3">
                    <span style="font-size: 17px; font-style:italic">@Html.DisplayFor(modelItem => item.Description)</span>
                </td>
                <td class="col-lg-3 col-lg-offset-1">
                    <button type="button" class="btn btn-warning col-lg-4" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.ID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
                    <button type="button" class="btn btn-danger col-lg-4 col-lg-offset-4" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.ID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </td>
            </tr>
            <tr>
                <td colspan="12">
                    <p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
                        Movie ID: @Html.DisplayFor(modelItem => item.ID)
                        <br />
                        Placeholder
                    </p>
                </td>
            </tr>
        }
    </table>
    <span style="font-style: italic; font-size: 15px; font-family: 'Roboto', sans-serif; padding-top:0px" />click for details</span>
</div>

<script>

    $(function () {
        $("td[colspan=12]").find("p").hide();
        $("td[colspan=12]").addClass("nopadding");

        $("tr").click(function () {
            var $target = $(this);
            var $detailsTd = $target.find("td[colspan=12]");
            if ($detailsTd.length) {
                $detailsTd.find("p").slideUp();
                $detailsTd.addClass("nopadding");
            } else {
                $detailsTd = $target.next().find("td[colspan=12]");
                $detailsTd.find("p").slideToggle();
                $detailsTd.toggleClass("nopadding");
            }
        });
    });

</script>
@Scripts.Render("~/bundles/myscript")

电影的控制器代码

namespace WebApplication2.Controllers
{
    public class MovieController : Controller
    {
        private MoviesEntities db = new MoviesEntities();

        // GET: /Movie/
        public ActionResult Index(string Filter, string searchString)
        {

            if (String.IsNullOrEmpty(searchString) || (Int32.Parse(Filter) == 0))
            {
                return View(db.Movies.ToList());
            }
            else
            {
                var parameter = Int32.Parse(Filter);
                return View(db.Movies.Where(x => (parameter == 1 && x.Name.Contains(searchString)) || (parameter == 2 && x.Description.Contains(searchString))).Distinct().ToList().OrderBy(x => x.Name));
            }

        }

        // GET: /Movie/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Movie movie = db.Movies.Find(id);
            if (movie == null)
            {
                return HttpNotFound();
            }
            return View(movie);
        }

        // GET: /Movie/Create
        public ActionResult Create()
        {
            return View();
        }

        // POST: /Movie/Create
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create([Bind(Include = "ID,Name,ReleaseDate,Description")] Movie movie)
        {
            if (ModelState.IsValid)
            {
                db.Movies.Add(movie);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(movie);
        }

        // GET: /Movie/Edit/5
        public ActionResult Edit(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Movie movie = db.Movies.Find(id);
            if (movie == null)
            {
                return HttpNotFound();
            }
            return View(movie);
        }

        // POST: /Movie/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Edit([Bind(Include = "ID,Name,ReleaseDate,Description")] Movie movie)
        {
            if (ModelState.IsValid)
            {
                db.Entry(movie).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(movie);
        }

        // GET: /Movie/Delete/5
        public ActionResult Delete(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Movie movie = db.Movies.Find(id);
            if (movie == null)
            {
                return HttpNotFound();
            }
            return View(movie);
        }

        // POST: /Movie/Delete/5
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public ActionResult DeleteConfirmed(int id)
        {
            Movie movie = db.Movies.Find(id);
            db.Movies.Remove(movie);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

是的，所以通常我单击“编辑”按钮，转到新视图，然后进行更改并将其保存到数据库。但我想在索引视图中完成所有这些操作，只需单击数据本身（@Html.DisplayFor(modelItem => item.INSERT_ITEM_NAME)：标题、发布日期、描述、电影 ID、占位符）并将相应的选项转换为文本字段进行编辑。

参考：在此期间我还会出现一个“保存”按钮，以实际保存将替换编辑和删除的更改，直到编辑完成。

再次，我不确定这是否完全可能，但我们将不胜感激！

Answer 1

在您的 Razor 模板中，您将需要 @Html.DisplayFor(...) 和 @Html.EditorFor(...)。文本域应该是隐藏的，点击显示文本后，JavaScript 需要隐藏显示文本并显示文本域，然后设置焦点：

<span class="item-display">
    @Html.DisplayFor(modelItem => modelItem.Description)
</span>
<span class="item-field">
    @Html.EditorFor(modelItem => modelItem.Description)
</span>

一些 CSS：

.item-field: {
    display: none;
}

还有一些 jQuery 可以很好地衡量：

$(document.documentElement)
    .on("click", "span.item-display", function(event) {
        $(event.currentTarget)
            .hide()
            .next("span.item-field")
            .show()
            .find(":input:first")
            .focus()
            .select();
    })
    .on("keypress", "span.item-field", function(event) {
        if (event.keyCode != 13)
            return;

        event.preventDefault();

        var $field = $(event.currentTarget),
            $display = $field.prev("span.item-display");

        $display.html($field.find(":input:first").val());
        $display.show();
        $field.hide();
    });

JSFiddle：http://jsfiddle.net/A3bg6/1/

在文本字段上按 ENTER 时，它将隐藏字段并显示显示，并更新显示。