How to insert data by a partial view in MVC

Question

I want to insert data using partial view for this action method which I have mentioned below.

The problem is that when I submit the Form it doesn't gave me any response.

What can I do with that post the comments and redirect to this page when comment is post?

And my partial view is located in a shared folder.

    [HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult Comments([Bind(Include = "CommentId,UserComments,UserId")] Comment comment)
    {
        if (ModelState.IsValid)
        {
            db.Comments.Add(comment);
            db.SaveChanges();
            return Json(comment, JsonRequestBehavior.AllowGet);
        }
        ViewBag.UserId = new SelectList(db.UserAccounts, "UserId", "FirstName", comment.UserId);
        return Json(JsonRequestBehavior.AllowGet);
    }

Rendering partial view in layout.

 @Html.Partial("_Comments", new OnlineTaxiReservationSystem.Models.Comment())

and the partial view is here:

  @model OnlineTaxiReservationSystem.Models.Comment

 <script type="text/javascript">
$(document).on('click', '.btnSubmit', function () {
    $.ajax({
        url: '@Url.Action("Comments", "Home")',
        cache: false,
        async: true,
        data: {
            //put the data that you want to save from the partial here
            UserId: $('#userId').val(),
            UserComments: $('#content').val()
        },
        success: function (_result) {
            window.location.href = "Home/Index";
        }
    });
});

  @if (Session["user"] != null)
     {
   using (Html.BeginForm())
   {
      @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Your Feedback</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group" style="margin-left: 9%">
            @Html.LabelFor(model => model.UserId, "User Name", htmlAttributes: new { @class = "control-label col-md-2" })
            @*@Html.Label(Session["UserName"].ToString(), htmlAttributes: new { @class = "control-label label-primary col-md-1" })*@
            <div class="col-md-4">
                @Html.Editor("UserId", null, new { htmlAttributes = new { @class = "form-control", @id = "userId" } })
                @Html.ValidationMessageFor(model => model.UserId, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.UserComments, htmlAttributes: new { @class = "control-label col-md-1" })
            <div class="col-lg-12">
                @Html.TextAreaFor(model => model.UserComments, new { htmlAttributes = new { @class = "form-control", @id = "content"} })
                @Html.ValidationMessageFor(model => model.UserComments, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-1 col-md-10">
                <input type="submit" value="Submit" id="btnSubmit" class="btn btn-primary" />
            </div>
        </div>
    </div>
  }

  <div>
    @Html.ActionLink("Back to List", "Index")
  </div>
  }

Answer 1

I think you are making a call to the wrong URL:

You need to add e.preventDefault(); if you are not going to submit by button but from javascript instead:

$(document).on('click', '.btnSubmit', function () {
    e.preventDefault(); //cancel the default behavior
    //do this instead (the ajax call):
    $.ajax({
        url: '@Url.Action("Comments", "Home")',
        cache: false,
        async: true,
        data: {
            //put the data that you want to save from the partial here
            UserId: $('#userId').val(),
            UserComments: $('#content').val()
        },
        success: function (_result) {
            window.location.href = "Home/Index";
        }
    });
});

If you can provide the full details of your 404 call, I can be more spesific.