Asp.net Mvc html form is posted to wrong controller action

Question

I have a controller with 2 actions:

public class OrganizationUnitsController : Controller
{
    public ActionResult Create()
    {
        // return empty form
        return View();
    }

    [HttpPost]
    public ActionResult Save(OrganizationUnitViewModel unitViewModel)
    {
        // Save the new unit to the DB
        return View();
    }
}

The Create.cshtml is:

@using (Html.BeginForm("Save", "OrganizationUnits", FormMethod.Post, new { @id = "form", @class = "form-horizontal" }))
{

    <!-- Some inputs -->

    <a href="" class="btn btn-primary">Save</a>
}

$('#form')
.on('submit',function (e) {
        e.stopPropagation();

        $.ajax({
            url: '@Url.Action("Save", "OrganizationUnits")',
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                      Name: $('#Name').val(),
                      Admin: JSON.stringify({ 'FullDescription': $('#Admin').val() }),
                      Members: JSON.stringify( $('#users_list_box').val() )
            });
});

The problem is when i click the save button, the javascript code which makes the unitViewModel and pass the form to Save action not invoked and the Create action is invoked.

Changing the controller action in the @Html.BeginForm() to null doesn't solved the problem.

How can i fix it?

How does your form tag looks like in the generated html? Post the html generated by the create action method. — Thangadurai, Apr 10 '18 at 06:45
Also check the Network tab (IE Dev tools) and observe the URL requested when you click the button. — Sam Axe, Apr 10 '18 at 06:46
You do not have a submit button (just a link that makes a GET) — , Apr 10 '18 at 06:46
Just a tip, use $('#yourFormId').serialize() instead of JSON.strigify({}). Makes your life a lot easier and code easier to maintain — JustLearning, Apr 10 '18 at 06:47
Possible duplicate of [MVC.NET Custom Root Handler Wrong action in Html:BeginForm](https://stackoverflow.com/questions/18249789/mvc-net-custom-root-handler-wrong-action-in-htmlbeginform) — FJT, Apr 10 '18 at 06:49
This line is invalid `url: '@Url.Action("Save", "OrganizationUnits")',`. You can't use the Razor html helper inside the JS script file. — Thangadurai, Apr 10 '18 at 06:50
@Thangadurai, Its perfectly fine (the script is not in an external file) — , Apr 10 '18 at 06:50
@Thangadurai the Save link address is `OrganizationUnit/Create`, despite i set the href to empty — Ehsan Toghian, Apr 10 '18 at 06:51
@StephenMuecke, will it work even if the JS file is an external file? — Thangadurai, Apr 10 '18 at 06:52
@StephenMuecke The reason i used is i wanted to process some inputs and make the argument when invoking the Save action — Ehsan Toghian, Apr 10 '18 at 06:53
@Thangadurai, No, but that is irrelevant in this case (OP script is never executed anyway because the form does not have a submit button - just a `` which makes a GET back to the same method that generated the view) — , Apr 10 '18 at 06:53
@ehsantoghian - making it a `` or a submit button makes no difference in regard to that - you can still process whatever you want — , Apr 10 '18 at 06:55
ok, then probably your script is not at all executed as mentioned by @StephenMuecke. You need to include a 'submit' button instead of the tag — Thangadurai, Apr 10 '18 at 06:55
@Thangadurai you where right. When i change the url to '/OrganizationUnit/Save' the right action is invoked as well. But it makes the code fragile. Is there a better solution to not hard code it? — Ehsan Toghian, Apr 10 '18 at 07:01
@ehsantoghian, Your last comment has nothing to do with the issue. — , Apr 10 '18 at 07:04

manish · Accepted Answer · 2018-04-10T07:14:42.803

Stephen Muecke's correct <a href="" class="btn btn-primary">Save</a> is problematic, and click on it causes a GET, try replacing it with submit input type.

<input type="submit" class="btn btn-primary" value="Save" />

and use e.preventDefault(); because stopPropagation stops the event from bubbling up the event chain, whereas preventDefault prevents the default action the browser makes on that event.

$('#form').on('submit',function (e) {
    var actionUrl = this.action;
    e.stopPropagation();
    e.preventDefault();
    $.ajax({
        url: actionUrl,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify({
                  Name: $('#Name').val(),
                  Admin: JSON.stringify({ 'FullDescription': $('#Admin').val() }),
                  Members: JSON.stringify( $('#users_list_box').val() )
        });
});

Your answer is almost right, the issue is the wrong ajax url. If you correct it the problem is solved completely — Ehsan Toghian, Apr 10 '18 at 07:10

score 0 · Answer 2 · answered Jan 30 '22 at 15:26

0

This may not be YOUR cause, but I encountered the same problem.

My problem was that there was an [Authorize] attribute on the controller but the action called did not have the [AllowAnonymous] attribute.

answered Jan 30 '22 at 15:26

Mike

419
4
6

Asp.net Mvc html form is posted to wrong controller action

2 Answers2