Getting parameters for a Json controller method

Question

I'm trying to get and pass my ViewModel to my Json method doing the stuff like this :

In my view :

<input type="button" id="suggestionBtn" title="Suggestion" onclick ="location.href='@Url.Action("GetNextAppointment", "Home", new { svm = Model })'" />

In my Controller :

public JsonResult GetNextAppointment(SuggestionViewModel svm)
{
     return Json(svm, JsonRequestBehavior.AllowGet);
    //this is just for testing
}

While debugging, I found out that my svm is null. I tried to replace it by a string parameter and hard coding the value in my view and this works. So, I don't know very much where is the problem.

Any idea guys?

EDIT : Code edited to use jQuery AJAX

My view's now like this :

@model AstellasSchedulerV2.Models.SuggestionViewModel

<div class="rightPanel">



        @using (Html.BeginForm("NewAppointment", "Home", FormMethod.Post, new { @id = "form_ValidateAppointment" }))
        {
            @Html.Hidden("stringParam","")
            <fieldset>
                <div>
                   Patch Anti-douleur Corps @Html.CheckBoxFor(s => s.PADC, new { @class = "checkbox", @id = "chbxPADC" })
                </div>
                <br />
                <div>
                   Patch Anti-douleur Pied @Html.CheckBoxFor(s => s.PADP, new { @class = "checkbox", @id = "chbxPADP" })
                </div>
                <br />
                <a href="#" id="ClickMe">Click me</a>

            </fieldset>
        }
    </div>

    <script type ="text/javascript">
        $(document).ready(function () {


            $("#ClickMe").click(function () {
                var o = new Object();
                o.PADC = $("#chbxPADC").val();
                o.PADP = $("#chbxPADP").val();

                jQuery.ajax({
                    type: "POST",
                    url: "@Url.Action("GetJson")",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(o),
                    success: function (data) { alert(data.PADC); },
                    failure: function (errMsg) { alert(errMsg); }
                });
            });
    </script>

Answer 1

Here goes the solution, Lets say you have your viewmodel this way -

public class SuggestionViewModel
{
    public bool PADC { get; set; }
    public bool PADP { get; set; }
}

Then you have a View in the following way. Here I used JQuery to make a POST request to GetJson Controller Action. I constructed a JavaScript Object and then serialized it to Json. Then finally passed the Json string to Controller Action.

<fieldset>
    <div>
        Patch Anti-douleur Corps @Html.CheckBoxFor(s => s.PADC, new { @class = "checkbox", @id = "chbxPADC" })
    </div>
    <br />
    <div>
        Patch Anti-douleur Pied @Html.CheckBoxFor(s => s.PADP, new { @class = "checkbox", @id = "chbxPADP" })
    </div>
    <br />

</fieldset>

This is the JQuery part -

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        $("#ClickMe").click(function () {
            var chk = $('#chbxPADC').is(':checked');
            var chk1 = $('#chbxPADP').is(':checked');

            var o = new Object();
            o.PADP = chk1;
            o.PADC = chk;

            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("GetJson")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(o),
                success: function (data) { alert(data.PADP); },
                failure: function (errMsg) { alert(errMsg); }
            });
        });
    });
</script>
<a href="#" id="ClickMe">Click me</a>

And when you click the button, it will hit following controller -

    public JsonResult GetJson(SuggestionViewModel svm)
    {
        return Json(svm, JsonRequestBehavior.AllowGet);
    }

And when you inspect the parameter using breakpoint, you will have parameters passed -

And as the response, you will have following output -

Answer 2

1. You can't post complex objects as parameter.
2. If you want to get json result, you should call an ajax request.

You should post your model in an ajax request. (you can use jquery .ajax metod), because you cant get values from controller action metod if you use location.href