Run Controller Method when Button is clicked MVC4 C#

Question

I am making a simple application using visual studio 2013, MVC4 and C#. This web app has a table with multiple checkboxes and an Update button disbaled by default. When one or more checkboxes are clicked I activate the button.

The idea here, is to send all the information of the checkboxes (which ones are on or off) to the server when the UPdate button is clicked and then to save those changes in the DB.

To achieve this I am trying to use ajax via jquery, but unfortunatly I am not succeding, because when I click the button nothing happens.

This is the cshtml file that I use to generate the view for the client:

<input type="submit" value="Save Checkbox Changes" class="btn btn-primary disabled" id="SaveCheckboxChanges" />

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.RequiresSetup)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Disabled)
        </th>
    </tr>

    @{
        foreach (var item in Model)
        {

            <tr>
                <td>
                    @Html.EditorFor(modelItem => item.RequiresSetup)
                </td>
                <td>
                    @Html.EditorFor(modelItem => item.Disabled)
                </td>
            </tr>
        }
}
</table>

The javascript code that I have for the button SaveCheckboxChanges is the following:

$("#SaveCheckboxChanges").click(function (event) {
        if (!$("#SaveCheckboxChanges").hasClass("disabled")) {

            $.ajax({
                url: '/Material/UpdateCheckBoxes',
                type: 'POST',
                data: {bla: "bdsjdnjsdnsnd"

                },
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert(data.success);
                },
                error: function () {
                    alert("error");
                }
            });
        }

    });

And in my materials controller, I have the following:

[HttpPost]
public ActionResult UpdateCheckBoxes(string bla)
{
    return Content("Working!" +  bla);
}

What I expect, is that after clicking the button, the page shows the "Working" string, meaning that the function in the controller was executed correctly.

However, this is not happening, and all I see is the javascript alert saying "error".

How can I make this ajax request work? What am I missing?

Do you get a 404 or 500 when viewing the network transaction in Fiddler or DevTools? — beauXjames, Nov 06 '14 at 16:49
yeah...that means that you are, in fact, hitting your controller but there is a problem...and there is no data.success to alert...debug your data object being returned from the ajax call — beauXjames, Nov 06 '14 at 17:21
I changed the code a litte bit basing myself on another dicussion:http://stackoverflow.com/questions/13019778/make-an-ajax-request-using-ajax-in-mvc-4 Now I have the "error" message again =( — Flame_Phoenix, Nov 06 '14 at 17:59

score 1 · Answer 1 · answered Nov 06 '14 at 16:48

1

Your controller method returns nothing...

Convert it to the following ::

public String Material()
{
    return "Working!";
}

answered Nov 06 '14 at 16:48

beauXjames

8,222
3
49
66

score 1 · Answer 2 · answered Nov 06 '14 at 16:49

That's not how things work. When you call Response.Write in response to an AJAX request, then the actual AJAX response is the string "Working!". Nothing will ever be written to the page, unless you take that string and add it to the DOM somewhere yourself.

score 1 · Answer 3 · answered Nov 06 '14 at 16:50

1

I've seen 3 incorrect things in your code.

1) [ValidateAntiForgeryToken] You don't implement it in your ajax call, so you should remove it in your controller. (I don't know how to use it with JQuery).

2) If your controller is called "MaterialController.cs" and if you haven't changed your route configuration, the URL to use is : '/Material/Material'.

3) Your function returns "void". Replace your void by string, or ActionResult. Then, replace your "Response.write" by return "some string".

answered Nov 06 '14 at 16:50

Deblaton Jean-Philippe

11,188
3
49
66

1. removed the token, 2. changed it, 3. string is not of type ActionResult, so i cannot do that :S – Flame_Phoenix Nov 06 '14 at 17:04
the route configuration was not changed, and the controller is called MaterialController.cs The path is correct. This is opened when seing the main page for that controler. The main page is at localhost:xxxx/Material, and not at localhost:xxxx/Material/Material. – Flame_Phoenix Nov 06 '14 at 17:12
You certainly have a "get" action into the MaterialController. When you don't specify the action, the default action (get) is set for you. What happens when you but a breakpoint into this action? – Deblaton Jean-Philippe Nov 07 '14 at 12:23

score 0 · Accepted Answer · answered Nov 24 '14 at 12:30

The problem was in the Ajax call. Here is the solution:

$.ajax({
                url: "Controler/Action",
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                traditional: true,
                data: JSON.stringify({ requiresSetupArray: requiresSetupArray, disabledArray: disabledArray }),
                success: function (data) {
                    button.attr('value', 'Save Checkbox Changes');
                    button.addClass('disabled');
                },
                error: function () {
                    alert("error");
                }
            });

A few things to notice:

Stringify is important. Without it, nothing works
careful with contentType
Carefuly check parameters that the controller is exepecting !

Hope it helps someone in the future!

Run Controller Method when Button is clicked MVC4 C#

4 Answers4