MVC部分在模态发布错误的模型

时间:2016-02-17 12:33:13

标签: asp.net-mvc asp.net-ajax

我的部分视图加载到我的索引页面上的引导程序部分,应该是发布类型Announcement,但是将索引页面模型的类型AnnouncementViewModel发布到Create控制器。

我的_Layout中指定了#modal-container,它按预期工作。

不确定控制器 - 它们看起来是正确的,问题源于我的ajax帖子我相信但我不知道是什么问题。我在POST后收到错误,但是数据库确实正确地更新了模型,但之后我得到了以下错误。

我已指定$('#create-container') / $('form')作为序列化并发送回控制器的表单。

为什么这样做?

错误:

The model item passed into the dictionary is of type 'AnnouncementsViewModel', but this dictionary requires a model item of type 'Announcement'.

索引:

@model AnnouncementsViewModel
<h2>Announcements</h2>
<div>
    @Html.ActionLink("Create", "Create", "Announcements", null, new { @class = "modal-link btn btn-sm" })
    <div class="announcementTable">
        <div id="announcementList">
            @{Html.RenderPartial("List", Model.AnnouncementList);}
        </div>
    </div>
</div>

部分:

@model Announcement
@section Scripts {
    <script type="text/javascript">
        $(function () {
            $('#btn-create').click(function () {
                $.ajax({
                    url: '@Url.Action("Create","Announcements")',
                    type: 'POST',
                    contentType: 'application/json',
                    data: $('#create-container').serialize(),
                    success: function (data) {
                        if (data.success == true) {
                            $('#modal-container').modal('hide');
                            location.reload(false)
                        } else {
                            $('#modal-container').html(data);
                        }
                    }
                })
            });
            $('#btn-close').click(function () {
                $('#modal-container').modal('hide');
            });
        });
    </script>
}
<div class="create-container">
    @using (Html.BeginForm())
    {
        <div class="newAnnouncementTableRow1">
            <div>@Html.LabelFor(m => m.Title)</div>
            <div>@Html.EditorFor(m => m.Title)</div>
            <div>@Html.LabelFor(m => m.Details)</div>
            <div>@Html.EditorFor(m => m.Details)</div>
        </div>
        <div class="newAnnouncementTableRow2">
            <div>@Html.LabelFor(m => m.StartDT)</div>
            <div>@Html.EditorFor(m => m.StartDT)</div>
            <div>@Html.LabelFor(m => m.ExpiryDT)</div>
            <div>@Html.EditorFor(m => m.ExpiryDT)</div>
            <div>@Html.LabelFor(m => m.Enabled)</div>
            <div>
                @Html.RadioButtonFor(m => m.Enabled, 1)Yes
                @Html.RadioButtonFor(m => m.Enabled, 0, new { @checked = "checked" })No
            </div>
        </div>
        <div>
            <button type="submit" id="btn-create" class="btn btn-sm">Save</button>
            <button type="button" class="btn btn-default modal-close-btn" data-dissmiss="modal">Cancel</button>
        </div>
    }
</div>

控制器:

[HttpGet]
        public ActionResult Index()
        {
            var avm = new AnnouncementsViewModel
            {
                AnnouncementList = new List<Announcement>()
            };
            avm.AnnouncementList = GetAnnouncementList();
            return View(avm);
        }
[HttpGet]
        public ActionResult Create()
        {
            return PartialView("Create");
        }

        [HttpPost]
        public ActionResult Create(Announcement a)
        {
            db.DbAnnouncement.Add(a);
            db.SaveChanges();
            return Index();
        }

1 个答案:

答案 0 :(得分:1)

您将contentType: 'application/json'设置为您的.ajax()电话,但从控制器返回视图。将contentType更改为html或更改控制器以返回JsonResultreturn Json("yourData");

我建议你改变你的ajax电话:

$.ajax({
    /* other data */
    dataType : "html",
    contentType: "application/json; charset=utf-8",
    /* other data */
    success: function (data) {
        $('#modal-container').modal('hide');
        location.reload(false)
    },
    error: function (jqXHR, textStatus, errorThrown )
    {
        $('#modal-container').html(data);
    }
    /* other data */
});

在您的情况下服务器的响应总是成功,但它返回 html 而不是 json ,所以你根本就没有data.success。< / p>

评论中提到的另一个问题是控制器正在重定向到一个它不能的动作方法。

return Index();更改为return RedirectToAction("Index", "Announcements");解决了错误,并使用return View();重定向到了创建部分页面。