Update частичного вида после редактирования

Question

У меня есть следующий индекс:

<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.

Answer 1

Одним из способов может быть использование Ajax.BeginForm для вашего вида продукта.

Ajax.BeginForm принимает несколько AjaxOptions, один из которых является UpdateTargetId (ваш DOM-идентификатор, в данном случае ваш список товаров), больше информации here.

После этого в коде контроллера продукта вы можете вернуть частичный вид с помощью списка продуктов. Так, например:

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); 

} 

Существует хорошая статья на об этом here.