Частичное представление не отображается в основном представлении (вместо этого оно отображается на своей странице)?

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 View:

@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

Метод Html.RenderPartial фактически рендерится непосредственно в поток ответов.Это специальный метод, который доступен по соображениям производительности и не должен использоваться в повседневных сценариях рендеринга страниц.Вместо этого вы должны использовать метод Html.Partial, как показано ниже:

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

Html.Partial возвращает MvcString, который вы можете вывести непосредственно на ваше представление.

Answer 2

У вас, должно быть, отсутствует сценарий include.В этом контексте вам понадобятся jquery и jquery.unobtrusive-ajax.min ajax для правильного отображения частичного представления.

Answer 3

Я бы удалил DisplayFor и использовал бы вместо него @ item.Name; как это;

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

Это сработало для меня.