ASP.NET MVC4 рендеринг частичных просмотров

Question

В настоящее время я делаю этот учебник http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/.

Проблема с моей заключается в том, что она не отображает страницу, а перенаправляет меня на новое действие с новой формой. Что мне не хватает и как это исправить? Вот код.

Модель:

namespace MvcPartialsExample.Models 
{ 
    public class Gift 
    { 
     public string Name { get; set; } 
     public double Price { get; set; } 
    } 
} 

Контроллер

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     var initialData = new[] { 
      new Gift { Name = "Tall Hat", Price = 39.95 }, 
      new Gift { Name = "Long Cloak", Price = 120.00 }, 
     }; 
     return View(initialData); 
    } 

    [HttpPost] 
    public ActionResult Index(Gift g) 
    { 
     return View(); 
    } 

    [HttpGet] 
    public ViewResult BlankEditorRow() 
    { 
     return View("GiftEditorRow" , new Gift()); 
    } 
} 

Index.cshtml:

@model IEnumerable<MvcPartialsExample.Models.Gift> 

<script src="~/Scripts/listEditor.js"></script> 

@using(Html.BeginForm()) { 
    <div class="editorRows"> 
     @foreach (var item in Model) 
     { 
      Html.RenderPartial("GiftEditorRow", item); 
     } 
    </div> 
    <p> 
     @Html.ActionLink("Add Gift", "BlankEditorRow", null, new { id = "addItem" }) 
     <input type="submit" value="Create" /> 
    </p> 
}  

GiftEditorRow.cshtml

@model MvcPartialsExample.Models.Gift 

<div ="editorRow"> 
    @using (Html.BeginCollectionItem("gifts")) { 
     @Html.ValidationSummary(true) 
     @Html.LabelFor(model => model.Name) 
     @Html.EditorFor(model => model.Name) 
     @Html.LabelFor(model => model.Price) 
     @Html.EditorFor(model => model.Price) 
     <a href="#" class="deleteRow">delete</a> 
    } 
</div> 

скрипт

<script type="text/javascript"> 
    $("#addItem").click(function() { 
     $.ajax({ 
      url: this.href, 
      cache: false, 
      success: function (html) { $("#editorRows").append(html); } 
     }); 
     return false; 
    }); 

    $("a.deleteRow").live("click", function() { 
     $(this).parents("div.editorRow:first").remove(); 
     return false; 
    }); 
</script> 

Answer 1

Предположим, что ваш сценарий $("#addItem").click(function() { находится в файле Scripts/listEditor.js, вам нужно переместить его в нижней части страницы или обернуть сценарий в $(document).ready(). В настоящее время его в верхней части страницы и элемент с id="addItem" еще не существует. Сценарий никогда не будет вызываться, а ссылки просто выполняют обычную перенаправление.

Было бы лучше сделать элемент <button type="button"> (и назовите его ссылкой, если это то, что вы хотите, чтобы оно выглядело).

Боковые ноты

1. Ваш метод POST должен быть public ActionResult Index(IEnumerable<Gift> g) (ваша проводка назад коллекция)
2. Помощник должен быть @using (Html.BeginCollectionItem("")) (не BeginCollectionItem("gifts") который добавит префикс «подарки» для управления , но ваша модель не имеет свойство с именем gifts)
3. .live было обесценился - использовать .on вместо этого, но в любом случае это должно быть $('#editorRows').on('click', '.deleteRow', function() {...

Answer 2

Я думаю, вы должны попробовать это

Html.RenderPartial("GiftEditorRow", Model); 

Вместо

@foreach (var item in Model) 
{ 
    Html.RenderPartial("GiftEditorRow", item); 
} 

На вашей странице GiftEditorRow.cshtml Переберите все элементы в модели.

Answer 3

Проверьте свой элемент @Html.ActionLink("Add Gift", "BlankEditorRow", null, new { id = "addItem" }) в своем излучаемом html. Вероятно, это создает элемент <a href="/BlankEditor">Add Gift</a>, который вызовет перенаправление.

Попытка создать элемент кнопки вместо <button type="button" id="addItem" />

Ваш JS будет создать событие OnClick