Question

以下是我要做的事情：

我的目标是在页面加载时从页面模型中显示趋势意见列表（自定义模型）。如果用户单击“显示更多趋势意见”按钮，它将使用ajax调用控制器上的方法，然后该控制器将检索其他数量的项目，返回页面并显示它们。然后再说20多个。然后他们可以重复这个过程并再次点击它等等。

当您在项目列表上单击“显示更多”时，与普通网站完全相同。

如果我接近这个的方式不正确，你知道任何教程（或者只是在脑海中）显示在MVC 4中执行此操作的正确方法，请告诉我。我现在的态度并不是死的，这只是我找到的“最正确的”方式。

我按照类似问题回答：How to Update List<Model> with jQuery in MVC 4

然而，进入我的控制器的数据不正确，我无法弄清楚问题是什么。

让我尽可能多地提供信息，因为我不知道错误可能在哪里。

页面模型（OpinionModel有一些公共属性）：

 public class IndexModel
{
      public IList<OpinionModel> TopTrendingOpinions { get; set; }
}

视图：

<div id="TrendingOpinions">

            <p>What is trending at the moment</p>

            @using (Html.BeginForm("LoadMoreTrendingOpinions", "AjaxHelper",
             method: FormMethod.Post,
             htmlAttributes: new { @class = "form-horizontal", id = "LoadTrendingOpinionsForm" }))
         {
            @Html.EditorFor(x => x.TopTrendingOpinions)
            <input type="submit" value="Load More Trending Opinions" />  
         }

        <script type="text/javascript">
            $('#LoadTrendingOpinionsForm').submit(function () {
                   $.ajax({
                        url: this.action,
                        type: this.method,
                        data: {
                            topTrendingOpinions: $(this).serialize()
                        },
                        success: function (result) {
                            alert(result);
                        }
                    });

                return false;
            });
</script>
</div>

**我的模型还有一个EditorTemplate。

控制器：**

   [HttpPost]
    public ActionResult LoadMoreTrendingOpinions(IList<MyGoldOpinionMVC.Models.OpinionModel> topTrendingOpinions)
    {
       var dataHelper = new Data.DataHelper();
        var moreTrendingOpinions = dataHelper.LoadMoreTrendingOpinions(topTrendingOpinions.LastOrDefault().Id);

       // var partialView = PartialView("../PartialViews/_ListOfPostedOpinion", moreTrendingOpinions);
        return View(moreTrendingOpinions);
    }

所以这是事件的顺序： 运行站点时，表单显示OpinionModel列表（使用编辑器模板显示正确的数据）。当我单击SUBMIT按钮时，它将转到控制器（我有一个断点），“topTrendingOpinions”参数的数据是一个List，其中包含一个项目，但该项目为null。换句话说，它没有通过明确用于填充表单的列表。

Answer 1

我能够获得列表回发给控制器的唯一方法是使用jquery手动构建它。我的理解是this.serialize在一个表单点击将尝试序列化整个将变得非常难看。我将如何做到这一点

<input type="button" class="btnMore" value="Load More Trending Opinions" /> 

$('.btnMore').on('click', function () {
           $.ajax({
                url: '@Url.Action("LoadMoreTrendingOpinions", "AjaxHelper")',
                type: 'post',
                contentType: 'application/json; charset=utf-8',
                data: {
                    Id: '@ViewBag.Id'
                },
                success: function (result) {
                    //add results to your table
                }
            });
    });

并设置通过控制器上的视图包发送的最后一条记录的ID，这样您就可以参考下拉动下一个块。如果您有任何问题，请告诉我

Answer 2

发布列表时，您必须非常小心，您的输入才能正确命名。如果不是，则默认模型绑定器在发布时无法将它们解析为类，从而导致控制器中的对象为空。

在您的情况下，您要在模型中发布模型列表，但不是整个模型。我使用PartialView而不是editortemplate，只是为了更容易使用字段名称。在我的示例中，我们发布了IndexModel

中包含的FooModel列表

模型

public class FooModel
{
    public string Foo { get; set; }
    public string Bar { get; set; }
}
public class IndexModel
{
    public IList<FooModel> Foos { get; set; }
}

查看

@using (Html.BeginForm("LoadMoreTrendingOpinions","AjaxHelper",
         method: FormMethod.Post,
         htmlAttributes: new { @class = "form-horizontal", id = "LoadTrendingOpinionsForm" }))
     {
        @Html.Partial("FooModelsPartial", Model.Foos)
        <input type="submit" value="Load More Trending Opinions" />  
     }

FooModelsPartial

@model IList<FooModel>

@for (int i = 0; i < Model.Count(); i++)
{
    @Html.EditorFor(model => model[i].Foo)
    @Html.EditorFor(model => model[i].Bar)
}

注意我们如何使用而不是foreach循环。这是因为foreach循环中的编辑器未正确命名。在这种情况下，我们希望我们的字段为[0] .Foo，[0] .Bar，[1] .Foo，[1]。酒吧等。

控制器：

    [HttpPost]
    public ActionResult LoadMoreTrendingOpinions(IList<FooModel> topTrendingOpinions)
    {
        // do something with toptrending thingy

        var model = new IndexModel();
        model.Foos = topTrendingOpinions;

        return View("Index", model);
    }

现在我认为真正的问题是你真的想要发布整个模型列表以获得与其中一个相关的一堆新模型吗？发布你想要阅读更多的意见的id会不会更方便，返回包含所请求的更多趋势意见的partialview并将其附加到jquery视图中的某个元素？

HTML：

@using (Html.BeginForm("LoadMoreTrendingOpinions","AjaxHelper",
         method: FormMethod.Post,
         htmlAttributes: new { @class = "form-horizontal", id = "LoadTrendingOpinionsForm" }))
     {
        <div id="more">@Html.Partial("FooModelsPartial", Model.Foos)</div>
        <input type="submit" value="Load More Trending Opinions" />  
     }

使用Javascript：

 $('#LoadTrendingOpinionsForm').submit(function () {
               $.ajax({
                    url: this.action,
                    type: this.method,
                    data: {
                        id: 1 /* The id of trending item you want to read more of */
                    },
                    success: function (result) {
                        $("#more").html(result)
                    }
                });

            return false;
        });

控制器：

    [HttpPost]
    public ActionResult LoadMoreTrendingOpinions(int id)
    {
        var moreTrendingOpinions = dataHelper.LoadMoreTrendingOpinions(id);

        return PartialView("FooModelsPartial", moreTrendingOpinions);
    }

JQuery AJAX Post to Controller数据不正确

2 个答案: