0

私は次のインデックスを持っています：

<div id='addProduct'>
   @{ Html.RenderPartial("Create", new BoringStore.Models.Product()); }
</div>

<div id='productList'>
    @{ Html.RenderPartial("ProductListControl", Model.Products); }
</div>

部分的な作成ビューには、新しい製品を作成するために使用される非表示のdivが含まれています。そうすると、部分ビューProductListControlが更新されます。

今度は編集機能でやりたいです。問題：現時点では、ユーザーがどの製品を編集したいかわからないため、インデックスの読み込み中に編集ページを統合することはできません。

私の考え：ユーザーが変更を実行できるように、既存の編集ビューをjqueryモーダル（問題ではありません）で呼び出したいと思います。保存後、モーダルは閉じられ（まだ問題はありません-これを処理できます）、ProductListControlが更新されます（これが私の問題です... :(）。

どうすればそうできますか？いくつかのチュートリアルを見てきましたが、できるだけクリーンで簡単なものにしたいと思います。それらのほとんどは、dom操作を使用しており、JsonResultによってサーバー（コントローラー）からフィードバックを取得します。可能であれば、純粋なJavaScriptやjqueryではなく、かみそりの構文に固執したいと思います。可能であれば、JsonResultsを避けたいと思います。

4

1 に答える 1

0

1つの方法は、製品の作成ビューにAjax.BeginFormを使用することです。

Ajax.BeginFormは、いくつかのAjaxOptionsを受け入れます。1つはUpdateTargetId（DOM ID、この場合はproductlist div）です。詳細については、こちらをご覧ください。

次に、製品コントローラーコードで、製品リストとともに部分ビューを返すことができます。したがって、たとえば：

Index.cshtml

@using (Ajax.BeginForm("AjaxSave", "Product", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "productList", InsertionMode = InsertionMode.Replace }))
{ 
    // your form
    <p>
        <input type="submit" value="Save" />
    </p>
}

...

<div id="productList">...
</div>

ProductController.cs

[HttpGet]
public ActionResult AjaxSave(Product product)
{
    if (ModelState.IsValid)
    {
        // save products etc..
    }

    var allProducts = _productService.GetAllProducts();

    return PartialView("ProductListControl", allProducts);

}

これについての素晴らしい記事がここにあります。

于 2013-02-24T14:58:19.630 に答える