在点击 - 让@ Html.DisplayFor可编辑文本字段 [英] On Click - Make @Html.DisplayFor an editable text field

问题描述

所以我有一个炼功点我做打，我想尝试一种功能，可以让我选择表中的任何数据值，编辑它，然后将其保存到数据库中。

So I am playing with a practice site I made and I want to attempt a feature that will allow me to select any data value in the table, edit it, then save it to the Database.

现在我有一个编辑按钮，运行在控制器自动生成的编辑方法，有它自己的编辑和保存视图，但我想索引视图中尝试此编辑功能（或至少通过这个索引视图中的数据来编辑功能）

Right now I have an "Edit" button that runs an auto-generated Edit method in the controller and that has its own View for editing and saving, but I want to attempt this edit function within the Index View (or at least pass the data to the edit function within this Index view)

下面是页面的外观，现在

Here is how the page looks right now

我也有显示我也想编辑的一些额外的一行信息，展开脚本。 （都在同一个视图）

I also have a row-expand script that display some additional information that I also want to be editable. (all in same view)

查看code代表的 Index.cshtml 的

View Code for 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")

控制器code代表的电影的

Controller code for Movie

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 =＆GT的都做索引视图中; item.INSERT_ITEM_NAME）：标题，发布日期，说明，MovieID，占位符），并打开相应的选项，在文本字段中进行编辑。

Yea so generally I click the "Edit" button, I go to a new View and then I make changes and save it to the DB. But I would like to do that all within the Index View by just clicking on the data itself (@Html.DisplayFor(modelItem => item.INSERT_ITEM_NAME): Title, Release Date, Description, MovieID, Placeholder) and turn the respective option into a text field for editing.

参考：我也有一个保存在此期间，钮出现的实际保存将取代编辑和删除，直到编辑完成的更改

Reference: I would also have a "Save" button appear during this time to actually save the changes that would replace the Edit and Delete until the editing finished.

同样，我不知道这是完全有可能的，但是任何和所有帮助将不胜AP preciated！

Again I am not sure if this is entirely possible, but any and all help would be greatly appreciated!

推荐答案

在你的剃须刀模板，您将需要一个都 @ Html.DisplayFor（...）和一个 @ Html.EditorFor（... ）。文本字段应该被隐藏，并在单击显示文本，JavaScript需要隐藏显示文本和显示文本字段，然后将焦点设置到它：

In your Razor template, you will need both an @Html.DisplayFor(...) and an @Html.EditorFor(...). The text field should be hidden, and upon clicking the display text, JavaScript needs to hide the display text and show the text field, then set focus to it:

<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的好措施：

And some jQuery for good measure:

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

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

在pressing上的文本字段中输入，它会隐藏字段，显示画面，再加上更新显示。

When pressing ENTER on the text field, it will hide the field and show the display, plus update the display.

这篇关于在点击 - 让@ Html.DisplayFor可编辑文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！