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

    }

提案やコメントをいただければ幸いです。P

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 に答える