Question

我目前正在做这个教程http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/。

我的问题是它不呈现页面，而是将我重定向到具有新表单的新Action。我想念什么以及如何解决它？这是代码。

型号：

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">（并将其设置为链接，如果这是您想要的样子）。

旁注

您的POST方法必须是public ActionResult Index(IEnumerable<Gift> g)（您回复收藏品）
帮助者需要@using (Html.BeginCollectionItem(""))（不是BeginCollectionItem("gifts")，这会将前缀“gift”添加到控件，但您的模型没有名为gifts）的属性
.live已弃用 - 请改用.on，但无论如何都要使用$('#editorRows').on('click', '.deleteRow', function() {... 需要{{1}}

Answer 2

我认为你应该试试这个

Html.RenderPartial("GiftEditorRow", Model);

而不是

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

在GiftEditorRow.cshtml页面上循环浏览模型中的所有项目。

Answer 3

检查您发出的html中的@Html.ActionLink("Add Gift", "BlankEditorRow", null, new { id = "addItem" })元素。这可能会创建一个导致重定向的<a href="/BlankEditor">Add Gift</a>元素。

尝试创建按钮元素<button type="button" id="addItem" />

然后你的js将创建onClick事件

ASP.NET MVC4渲染部分视图

3 个答案: