2

我正在使用 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;" />
    }

部分视图_Reader：

    @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" />

    }

任何建议或意见将不胜感激。磷

4

1 回答 1

0

您可以将类属性设置为“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/

希望这可以帮助。

于 2013-08-06T04:38:12.070 回答