带有ajax帖子的空模型

时间:2016-09-02 15:38:24

标签: c# jquery ajax asp.net-mvc

我正在尝试使用ajax帖子将模型传递给控制器​​,但每次我这样做时,模型都为null并且我丢失了我试图保留的所有数据。

ajax电话:

$('#next').click(function (e) {
    e.preventDefault();
    var url = '@Url.Action("Manage")'
    var _model = JSON.stringify(@Html.Raw(Json.Encode(Model)));
    var _page = @(Model.pager.CurrentPage + 1);

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: url,
        data: JSON.stringify({ 'model': _model, 'page': _page }),
        success: function(result) {
            console.log(result);
        }
    });
});

当我查看序列化对象时,它看起来像一个格式正确的JSON对象,在开发者控制台中没有抛出任何错误。

触发此jQuery调用的链接只是一个基本操作链接:

@Html.ActionLink(">", "Manage", "Announcements", null, new { id = "next" })

我的模型有点复杂......

public class ManageViewModel : IEnumerable<EditViewModel>
{
    [Display(Name="Start Date")]
    [DataType(DataType.DateTime)]
    public DateTime? StartDate { get; set; }

    [Display(Name="End Date")]
    [DataType(DataType.DateTime)]
    public DateTime? EndDate { get; set; }

    public string SearchString { get; set; }

    public Pager pager { get; set; }

    public List<EditViewModel> Data { get; set; }
    public List<CategoryViewModel> Categories { get; set; }

    public ManageViewModel()
    {
        Data = new List<EditViewModel>();
        Categories = new List<CategoryViewModel>();
    }

    public IEnumerator<EditViewModel> GetEnumerator()
    {
        return Data.GetEnumerator();
    }

    IEnumerator IEnumerable.GetEnumerator()
    {
        return Data.GetEnumerator();
    }
}

public class Pager
{
    public int TotalItems { get; private set; }
    public int CurrentPage { get; private set; }
    public int PageSize { get; private set; }
    public int TotalPages { get; private set; }
    public int StartPage { get; private set; }
    public int EndPage { get; private set; }

    public Pager(int totalItems, int? page, int pageSize = 10)
    {
        int totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
        int currentPage = page ?? 1;
        int startPage = currentPage - 5;
        int endPage = currentPage + 4;

        if(startPage <= 0)
        {
            endPage -= (startPage - 1);
            startPage = 1;
        }

        if(endPage > totalPages)
        {
            endPage = totalPages;
            if(endPage > 10)
            {
                startPage = endPage - 9;
            }
        }
        TotalItems = totalItems;
        TotalPages = totalPages;
        CurrentPage = currentPage;
        PageSize = pageSize;
        EndPage = endPage;
        StartPage = startPage;
    }
}

我无法将链接转换为表单,因为这会打破分页。或者我可能只是不了解这里的全貌。

以下是视图中显示分页的部分

if (Model.pager.EndPage > 1)
{
    <div style="color:#337AB7; padding-bottom: 0px;">Page @Model.pager.CurrentPage of @Model.pager.TotalPages</div>
    <ul class="pagination">
        @if (Model.pager.CurrentPage > 1)
        {
            <li>
                @Html.ActionLink("<<", "Manage", new { model = Model, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
            </li>
            <li>
                @Html.ActionLink("<", "Manage", new { model = Model, page = Model.pager.CurrentPage - 1, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
            </li>
        }
        @for (var _page = Model.pager.StartPage; _page < Model.pager.EndPage + 1; _page++)
        {
            <li class="@(_page == Model.pager.CurrentPage ? "active" : "")">
                @Html.ActionLink(_page.ToString(), "Manage", new { model = Model, page = _page, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
            </li>
        }
        @if (Model.pager.CurrentPage < Model.pager.TotalPages)
        {
            <li> 
                @Html.ActionLink(">", "Manage", "Announcements", null, new { id = "next" })
            </li>
            <li>
                @Html.ActionLink(">>", "Manage", new { model = Model, page = Model.pager.TotalPages, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
            </li>
        }
    </ul>
}

尝试通过该模型的操作链接显然不起作用,但我离开了它们,因为我专注于让一个工作,前面列出的那个,然后才能配置所有其他配置。

我查看了以下SO帖子并且没有运气:
Post an MVC model with AJAX?
Model properties null on Ajax post from list box change event
How to send a model in jQuery $.ajax() post request to MVC controller method
Pass Model To Controller using Jquery/Ajax
How to pass model in ajax post request?

关于我如何能够做到这一点的任何想法?我需要模型数据持续进行搜索/过滤,这是通过表单完成的。提前感谢您查看并提供您的见解!

1 个答案:

答案 0 :(得分:0)

您需要为模型包括无参数构造函数。从您发送的屏幕截图来看,似乎没有用于公共Pager模型的无参数构造函数。