부분보기가 포함 된 기본보기 내에서 부분보기가 렌더링되지 않습니다 (대신 자체 페이지에서 렌더링 됨).

Question

간단한 색인보기에 포함 된 부분보기가 있습니다. 모델에 새 객체를 추가하고 기존 객체와 함께 새 객체를 표시하기 위해 부분 뷰를 업데이트하려고하면 부분 뷰가 포함 된 페이지 외부로 렌더링됩니까?

부분보기를 업데이트하는 데 AJAX를 사용하고 있는데 다음 코드는 무엇이 잘못 되었습니까?

모델 :

public class Product 
{ 
    public int ID { get; set; } 
    public string Name { get; set; } 

    [DataType(DataType.Currency)] 
    public decimal Price { get; set; } 
} 

public class BoringStoreContext 
{ 
     List<Product> results = new List<Product>(); 

     public BoringStoreContext() 
     { 
      Products = new List<Product>(); 
      Products.Add(new Product() { ID = 1, Name = "Sure", Price = (decimal)(1.10) }); 
      Products.Add(new Product() { ID = 2, Name = "Sure2", Price = (decimal)(2.10) }); 
     } 
     public List<Product> Products {get; set;} 
} 

public class ProductIndexViewModel 
{ 
    public Product NewProduct { get; set; } 
    public IEnumerable<Product> Products { get; set; } 
} 

Index.cshtml보기 :

@model AjaxPartialPageUpdates.Models.ProductIndexViewModel 

@using (Ajax.BeginForm("Index_AddItem", new AjaxOptions { UpdateTargetId = "productList" })) 
{ 
    <div> 
     @Html.LabelFor(model => model.NewProduct.Name) 
     @Html.EditorFor(model => model.NewProduct.Name) 
    </div> 
    <div> 
     @Html.LabelFor(model => model.NewProduct.Price) 
     @Html.EditorFor(model => model.NewProduct.Price) 
    </div> 
    <div> 
     <input type="submit" value="Add Product" /> 
    </div> 
} 

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

ProductListControl.cshtml 부분보기

@model IEnumerable<AjaxPartialPageUpdates.Models.Product> 

<table> 
    <!-- Render the table headers. --> 
    <tr> 
     <th>Name</th> 
     <th>Price</th> 
    </tr> 
    <!-- Render the name and price of each product. --> 
    @foreach (var item in Model) 
    { 
     <tr> 
      <td>@Html.DisplayFor(model => item.Name)</td> 
      <td>@Html.DisplayFor(model => item.Price)</td> 
     </tr> 
    } 
</table> 

컨트롤러 :

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     BoringStoreContext db = new BoringStoreContext(); 
     ProductIndexViewModel viewModel = new ProductIndexViewModel 
     { 
      NewProduct = new Product(), 
      Products = db.Products 
     }; 
     return View(viewModel); 
    } 

    public ActionResult Index_AddItem(ProductIndexViewModel viewModel) 
    { 
     BoringStoreContext db = new BoringStoreContext(); 
     db.Products.Add(viewModel.NewProduct); 

     return PartialView("ProductListControl", db.Products); 
    } 
} 

,

Answer 1

스크립트 포함이 누락되어 있어야합니다. 이 컨텍스트에서는 부분 뷰를 올바르게 렌더링하려면 jquery 및 jquery.unobtrusive-ajax.min ajax가 필요합니다.

Answer 2

메소드 Html.RenderPartial은 실제로 응답 스트림에 직접 렌더링됩니다. 이는 성능상의 이유로 사용할 수있는 특별한 방법이며 일상적인 페이지 렌더링 시나리오에서는 사용해서는 안됩니다. 아래 그림과 같이 대신에 당신은 Html.Partial 방법을 사용한다 :

<div id='productList'> 
    @Html.Partial("ProductListControl", Model.Products) 
</div> 

Html.Partial은 당신이 할 수있는 출력을 직접 볼 수있는 MvcString를 반환

.

Answer 3

DisplayFor를 제거하고 대신 @ item.Name을 사용합니다. 이런 식으로.

@foreach (var item in Model) 
{ 
    <td>@item.Name</td> 
} 

이것은 나를 위해 일했습니다.