call an c# mvc controller method from jquery using $.getJson Method

Question

I'm clearly missing something but can't for the life of me see what it is so would appreciate if anyone could point out my error.

I have a simple details page with a form to add comments to the selected detail.

I have a view with the following formed contained within it:

@using (Html.BeginForm("Details", "Home", FormMethod.Post, new { id ="commentForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.NewComment.Name);
        @Html.TextBoxFor(model => model.NewComment.Name, new { @class = "form-control" })
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.NewComment.Body);
        @Html.TextAreaFor(model => model.NewComment.Body, new { @class = "form-control" })
    </div>

    <input type="submit" class="btn btn-primary" value="Add Comment" />
}

This view then calls the following c# controller method:

        [HttpPost]
        public ActionResult Details(int id,DetailsViewModel model)
        {

            if (!ModelState.IsValid)
                return View(model);

            var content =_data.First(c => c.Id == id);

            content.Comments.Add(model.NewComment);

            return View(new DetailsViewModel(content));
        }

If I use the form without adding any additional code to catch the submit with jquery then this all works correctly.

When i add the following JQuery code to the page then the above server code is not executed (I know i am not actually returning any json in the above method but if the method is not executed that seems redundant for now?):

    $(document).ready(function () {

        $("#commentForm").submit(function (event) {
            event.preventDefault();

            var url = $(this).attr('action');

            $.getJSON(url, $(this).serialize(), function (comment) {
                alert(comment)
            });
        });
    });

If is also worth noting that if i add any alerts around the getjson call then these all fire correctly.

Does anyone have any ideas about what i'm doing wrong?

Charles Ouellet · Accepted Answer · 2013-12-17 18:14:29Z

1

When you are using .getJSON it makes a GET request, and your Details method only answers POST requests.

Try this instead:

$.ajax({
  type: "POST",
  url: url,
  data: $(this).serialize(),
  success: function(comment) {
    alert(comment);
  }
});

answered Dec 17, 2013 at 18:14

Charles Ouellet

6,5364 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chuck Conway · Accepted Answer · 2013-12-17 18:17:28Z

1

Try posting to the controller.

$.getJSON is performing a http get under the covers. Your controller endpoint is expecting a post and will not accept a http get.

Here is a function(blog reference) that will provide the same functionality:

(function ($) {

    $.postJSON = function (url, data) {

        var o = {
            url: url,
            type: "POST",
            dataType: "json",
            contentType: 'application/json; charset=utf-8'
        };

        if (data !== undefined) {
            o.data = JSON.stringify(data);
        }

        return $.ajax(o);
    };

} (jQuery));

Simply add this somewhere after your jQuery include.

edited Dec 17, 2013 at 18:17

answered Dec 17, 2013 at 18:12

Chuck Conway

16.5k11 gold badges62 silver badges102 bronze badges

Comments

Pascalz · Accepted Answer · 2013-12-17 18:14:35Z

0

use $.post() instead, when you use FormMethod.Post : http://api.jquery.com/jQuery.post/

answered Dec 17, 2013 at 18:14

Pascalz

2,3581 gold badge24 silver badges25 bronze badges

Collectives™ on Stack Overflow

call an c# mvc controller method from jquery using $.getJson Method

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related