Partial view- Controller receive null object

Question

I have following controllers and it works properly for _GetForSession and CommentForm controllers. but when hit the _Submit parameter comment object is null. My controller class as follows:

public class CommentController : Controller
    {
        //
        // GET: /Comment/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult _GetForSession(string isbnNo )
        {
            ViewBag.ISBN_No = isbnNo;
            List<CommentModel> comments = CommentFacade.GetAllCommentsOnIsbn(isbnNo);
            return PartialView("_GetForSession", comments);
        }

        [ChildActionOnly]
        public PartialViewResult _CommentForm(string isbnNo)
        {
            CommentModel comment = new CommentModel() { ISBN_No = isbnNo };
            return PartialView("_CommentForm", comment);
        }

        [ValidateAntiForgeryToken]
        public PartialViewResult _Submit(CommentModel comment)
        {
            CommentFacade.SaveComment(comment);
            List<CommentModel> comments = CommentFacade.GetAllCommentsOnIsbn(comment.ISBN_No);
            ViewBag.ISBN_No = comment.ISBN_No;
            return PartialView("_GetForSession", comments);
        }

    }

My Views are as follows:

view -_GetForSession

@model IEnumerable<LibraryManagementWeb.Models.CommentModel>
<div id="comments">
    <ul>
        @foreach (var comment in Model)
        {
            <li>@comment.Comment</li>
        }
    </ul>


    @using (Ajax.BeginForm("_Submit", "Comment", new AjaxOptions() { UpdateTargetId="comments"}))
    {
        @Html.AntiForgeryToken()
        @Html.Action("_CommentForm", new {  isbnNo= ViewBag.ISBN_No })
    }
</div>

view - _CommentForm

@model LibraryManagementWeb.Models.CommentModel

<h2>_CommentForm</h2>

@Html.HiddenFor(model => model.ISBN_No)
<div>
    @Html.EditorFor(model => model.ISBN_No)
    <br />
    @Html.LabelFor(model => model.Comment)
    @Html.EditorFor(model => model.Comment)
</div>
<button type="submit">Submit Comment</button>

I tried every possible things, but couldn't find solution for this. What I missed in here?

Edit: fiddler out put:

fidler

fiddler raw view is as follows:

<html><head><title>Object moved</title></head><body>
<h2>Object moved to <a href="/Account/Login?ReturnUrl=%2fBook%2fDetails%2f7">here</a>.</h2>
</body></html>

You aren't submitting any `CommentModel` properties, that's probably why it's `null`. — James, Dec 17 '13 at 15:15
there are no fields inside the form to post, I am posting an answer. — James, Dec 17 '13 at 15:17
Ah wait, I thought the issue was you weren't rendering the `_CommentForm` but I just realised it's a child action...Can you check the request using a HTTP debugger like [Fiddler](http://fiddler2.com/) and see if the fields are being posted? — James, Dec 17 '13 at 15:19
@James when i try to run fidller it's not caught the request — DevT, Dec 17 '13 at 16:02
@DevT probably because by default Fiddler doesn't capture local traffic. See this [question](http://stackoverflow.com/questions/826134/how-to-display-localhost-traffic-in-fiddler-while-debugging-an-asp-net-applicati). — James, Dec 17 '13 at 16:08

Lin · Accepted Answer · 2013-12-17T19:07:56.450

I think the problem is you're passing different models in your partial views. You need to create a ViewModel, then pass the same ViewModel to your view and different partial views. Below is an example, hope it will give you a good idea.

ViewModel

public class CommentViewModel
{
    public List<CommentModel> CommentModels { get; set; }
    public CommentModel CommentModel { get; set; }
}

Controller

public class CommentController : Controller
{
    public ActionResult Index()
    {
        var model = new CommentViewModel()
        {
            CommentModels = listComments
        };
        return View(model);
    }

    public PartialViewResult _GetForSession(string isbnNo)
    {
        ViewBag.ISBN_No = isbnNo;
        var model = new CommentViewModel
        {
            CommentModels = CommentFacade.GetAllCommentsOnIsbn(isbnNo);
        };
        return PartialView("_GetForSession", model);
    }


    [ChildActionOnly]
    public PartialViewResult _CommentForm(string isbnNo)
    {
        var model = new CommentViewModel()
        {
            CommentModel = new CommentModel() {ISBN_No = isbnNo}
        };
        return PartialView("_CommentForm", model);
    }

    [ValidateAntiForgeryToken]
    public PartialViewResult _Submit(CommentViewModel model)
    {
        CommentFacade.SaveComment(comment);
        List<CommentModel> comments = CommentFacade.GetAllCommentsOnIsbn(comment.ISBN_No);
        ViewBag.ISBN_No = comment.ISBN_No;
        return PartialView("_GetForSession", model);
    }
}

_GetForSession

@model  Demo.Models.CommentViewModel

<div id="comments">

    @using (Ajax.BeginForm("_Submit", "Home", new AjaxOptions() { UpdateTargetId = "comments" }))
    {
        @Html.AntiForgeryToken()
        @Html.Action("_CommentForm", new { isbnNo = ViewBag.ISBN_No })
    }
</div>

_CommentForm

@model Demo.Models.CommentViewModel

<h2>_CommentForm</h2>

 @*@Html.HiddenFor(model => model.ISBN_No)*@
<div>
    @Html.EditorFor(model => model.ISBN_No)
    <br />
    @Html.LabelFor(model => model.Comment)
    @Html.EditorFor(model => model.Comment)
</div>

<input type="submit" value="Submit Comment" />

score 1 · Answer 2 · answered Dec 17 '13 at 19:01

1

Your _Submit Controller method needs to be marked as an [HttpPost]. Otherwise, it won't read the data from the form that is being submitted.

answered Dec 17 '13 at 19:01

krillgar

12,596
6
50
86

1

That's fine. The `[HttpPost]` is one of those things that is easy to forget, but is absolutely vital to getting the data off of the page. I did a cursory look for it in Lin's answer, and did not see it, so I wanted to make sure you were aware that you needed that as well. – krillgar Dec 18 '13 at 13:34

score 0 · Answer 3 · answered Feb 20 '20 at 15:42

Dont stringify the data in ajax before passing just pass it in json format without stringifying.

function saveAttachments(surveyAttachments, surveyId) {
            var data = new FormData();
            var _files = $(surveyAttachments).prop("files");
            console.log(_files);
            for (i = 0; i < _files.length; i++) {
                data.append(surveyId, _files[i]);
            }
            console.log(data);
            $.ajax({
                type: "POST",
                url: _URLSaveAttachments,
                dataType: "json",
                data: data,
                contentType: false,
                processData: false,
                success: function (response) {

                },
                failure: function (response) {
                    //alert(response.responseText);
                },
                error: function (response) {
                    //alert(response.responseText);
                }
            });
        }

Partial view- Controller receive null object

3 Answers3