Ajax请求编辑mvc字段

Question

我使用的是mvc 4，我想通过单击"编辑"链接来编辑项目字段。我希望这些字段变为可编辑的文本框，而不需要完整的回复。遗憾的是，可编辑字段显示在空白页上。这是索引视图：

    [HttpGet]
    public ActionResult Edit(int id)
    {
        Item it = Items.Find(i=> i.ItemId == id);
        return PartialView("_Editor", it);
    }
    [HttpPost]
    public ActionResult Edit(Item item)
    {
        if (ModelState.IsValid)
        {
            Item it = Items.Find(i => i.ItemId == item.ItemId);
            it.ItemName = item.ItemName;
            it.ItemCategory = item.ItemCategory;
            it.ItemDescription = item.ItemDescription;
            it.ItemPrice = item.ItemPrice;
            return RedirectToAction("Index");
        }
        return HttpNotFound();
    }
    //
    // GET: /Restaurant/
    public ActionResult Index()
    {
        var model = Items;
        return View(model);
    }

这是索引视图：

    @model IEnumerable<RestoItemTes.Models.Item>
    @{
    }
    @foreach (var item in Model)
    {
        Html.RenderPartial("_Reader", item);
        @:<br style="clear: both;" />
    }

部分视图阅读器（_R）：

    @model RestoItemTes.Models.Item
    <div id="@Model.ItemId" style="border: 1px solid #777; margin: 5px auto; width: 50%;">
        <div class="name">
            @Html.DisplayFor(m => m.ItemName)
            <span class="category">@Html.DisplayFor(m => m.ItemCategory)</span>
        </div>
        <p class="editor-multiline-field">@Html.DisplayFor(m => m.ItemDescription)</p>
            <span class="price">$ @Html.DisplayFor(m => m.ItemPrice)</span>
            <br />
        <p>
        @Ajax.ActionLink("Edit", "Edit", "Restaurant", new { id = @Model.ItemId },
                                                   new AjaxOptions
                                                    {
                                                        UpdateTargetId = @Model.ItemId.ToString()
                                                    }) |
        @Html.ActionLink("Delete", "Delete", new { id = @Model.ItemId })
       </p>
    </div>

编辑器视图：

    @model RestoItemTes.Models.Item
    @using (Html.BeginForm("Edit", "Restaurant", FormMethod.Post,
                new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST",
                    UpdateTargetId = @Model.ItemId.ToString()
                }))
    {
        <div class="name">
           @Html.EditorFor(m => m.ItemName)
           <span class="category">@Html.EditorFor(m => m.ItemCategory)</span>
        </div>
        <p class="editor-multiline-field">@Html.EditorFor(m => m.ItemDescription)</p>
        <span class="price">$ @Html.EditorFor(m => m.ItemPrice)</span>
        <br />
        <input type="submit" value="Save" />
    }

如有任何建议或意见，我们将不胜感激。P

Answer 1

您可以将class属性设置为"editTextBox"，然后在js文件Ready方法中，您可以使用以下代码：

$('.editTextBox').click(function(){
    $(this).hide();
    $(this).prev().hide();
    $(this).next().show();
    $(this).next().select();
});

我在这里找到了这个代码：

http://www.tonylea.com/2010/jquery-easy-editable-text-fields/

希望这能有所帮助。