JQuery AJAX发送到控制器的数据不正确

以下是我要做的：

 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>

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

与正常站点在项目列表上单击“显示更多”时所做的完全相同

如果我的方法是不正确的，你知道任何教程（或只是在你的头脑中）显示了正确的方法来做这件事在MVC4，请让我知道。我现在并不是一意孤行，这只是我找到的最“正确”的方式

---

我接着回答了一个类似的问题：

但是，发送到控制器的数据不正确，我无法找出问题所在

让我把尽可能多的信息，因为我不知道哪里可能是错误

页面模型（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>

公共类索引模型
{
公共IList TopTrendingOpinions{get；set；}
}

视图：

 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>

目前的趋势是什么

@使用（Html.BeginForm（“LoadMoreTrendingPionions”、“AjaxHelper”，
方法：FormMethod.Post，
htmlAttributes:new{@class=“form horizontal”，id=“LoadTrendingOpinionsForm”}）
{
@EditorFor（x=>x.TopTrendingOpinions）
}
$（'LoadTrendingOpinionsForm'）。提交（函数（）{
$.ajax({
url:this.action，
类型：this.method，
数据：{
TopTrendingOffices:$（this）.serialize（）
},
成功：功能（结果）{
警报（结果）；
}
});
返回false；
});

**我的模型还有一个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);
    }

[HttpPost]
公共行动结果加载更多趋势齿轮（IList Top趋势齿轮）
{
var dataHelper=new Data.dataHelper（）；
var moreTrendingOpinions=dataHelper.LoadMoreTrendingOpinions（topTrendingOpinions.LastOrDefault（）.Id）；
//var partialView=partialView（“../partialView/_postdopinion列表”，更多趋势小齿轮）；
返回视图（更多趋势小齿轮）；
}

---

下面是事件的顺序：

---

运行站点时，表单将显示OpinionModel的列表（使用显示正确数据的编辑器模板）。当我单击SUBMIT按钮时，它会转到控制器（我有一个断点），并且“topTrendingOpinions”参数的数据是一个列表，其中有一个项目，但该项目为空。因此，换句话说，它并没有通过明显用于填充表单的列表。

我能够获取列表以发回控制器的唯一方法是使用jquery手动构建它。我的理解是这样的。在表单上序列化单击将尝试序列化整个表单，这将变得非常丑陋。我将如何做到这一点是

<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
                }
            });
    });

$（'.btnMore'）。在（'click'，函数（）{
$.ajax({
url:'@url.Action（“LoadMoreTrendingPionions”，“AjaxHelper”），
键入：“post”，
contentType:'application/json；charset=utf-8'，
数据：{
Id:“@ViewBag.Id”
},
成功：功能（结果）{
//将结果添加到表中
}
});
});

---

并设置通过控制器上的查看包发送的最后一条记录的id，这样您就有了一个用于提取下一个数据块的引用。如果您在发布列表时有任何问题，请告诉我，您必须非常小心，确保输入的内容命名正确。如果不是，则默认模型绑定器在发布时无法将它们解析为类，从而导致对象在控制器中为null

在您的情况下，您发布的是模型内部的模型列表，而不是整个模型。我会使用PartialView而不是editortemplate，只是为了更容易地使用字段名。在我的示例中，我们发布了IndexModel中包含的FooModels列表

模型

控制器：

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

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

        return View("Index", model);
    }

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

        return PartialView("FooModelsPartial", moreTrendingOpinions);
    }

---

关于你的问题，我更喜欢只发布一个Id，然后返回另一个结果块。我遇到的问题是每次都要维护最后一个Id。我尝试使用ViewBag，但它似乎无法从返回的区块中保存最新的项目（因此我知道下次单击“更多”时从何处开始）。我喜欢你的想法，并且在一定程度上实现了。它与我最初加载页面时设置的ViewBag Id一起工作，但在我对控制器的ajax调用中，我尝试将Id设置为新Id，但它从未将其保存在视图中，下一个ajax调用只使用最初设置的Id。在这种情况下，我会将I'd保存到表单上的一个隐藏字段，而不是视图包，并查看该帮助是否有助于在成功返回第一个ajax调用后执行另一个ajax调用？我将返回一个PartialView，其中包含新项目的列表，因此它不允许我从第一个ajax调用中获取Id。您可以将Id添加到传递给partial的模型中，并以这种方式设置隐藏字段吗？

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

        return PartialView("FooModelsPartial", moreTrendingOpinions);
    }