ASP.NET MVC 3 AJAX request returns 404 Not Found error

Question

Here's my code (question found below):

VIEW

// This function is called by another function when radioButtonGroup.change().
var requestValues = function (form) {
    var option = form.find("input:radio:checked").attr("value");

    // This seemingly shows the correct url for the action method desired.
    alert("Form Action: " + form[0].action + "\nForm Method: " + form[0].method);

    if (form.valid()) {
        $.ajax({
            url: form[0].action,
            type: form[0].method,
            data: option,
            success: function (result) {
                alert("Had success.");
                $('#createForm').replaceWith(result);
            },
            error: function (xhr) {
                alert("An error occurred: " + xhr.status + " " + xhr.statusText);
            }
        });
    }
    return false;
}

...(other code here)...

@using (Html.BeginForm("CreateForm", "MyController", FormMethod.Post, 
                        new { @id = "optionForm" }))
{
    <div id="options">
        @foreach (MyOption op in Model.GetOptions()) {
            <div class="editor-field">
            @Html.RadioButton("formOption", op.OptionType, false, 
                new { @id = op.ID, @title = @op.Description })
            <label for="@op.ID">@op.Name</label>
            </div>
        }
    </div>
    <input type="submit" value="Select" style="display:none;" />
}

CONTROLLER

[HttpPost]
public PartialViewResult CreateForm(MyOptionType formOption) {
    MyViewModel model = new MyViewModel();
    model.ApplyOptionValues(formOption);
    return PartialView("_CreateForm", model);
}

REGISTER ROUTES

// Default
routes.MapRoute(
    "Default", // Route name
    "{controller}/{action}/{id}", // URL with parameters
     new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
);

My issue is that when I click a radio button, the AJAX request executes but I get a "404 Not Found" error (even though the alert in the jQuery function seems to show the appropriate url). I spent all day yesterday on this, and I cannot figure out what the heck is wrong. I'm running ASP.NET MVC 3 app on IIS Express, and I'm not using Areas (that I know of anyway). Anyone have any suggestions on how to fix this? Thanks.

EDIT

The alert box shows the following message:

Form Action: https://localhost:44300/MyController/CreateForm

Form Method: post

EDIT

Here is an entire test view and test controller that recreates the error:

VIEW

<h2>TestAction</h2>

<script type="text/javascript">
    $(document).ready(function () {
        $("#optionForm input[name='radioOption']").change(function () {
            requestValues($(this).closest("form"));
        });

        var requestValues = function (form) {
            var option = form.find("input:radio:checked").attr("value");

            alert("Form Action: " + form[0].action + "\nForm Method: " + form[0].method);

            if (form.valid()) {
                $.ajax({
                    url: form[0].action,
                    type: form[0].method,
                    data: option,
                    success: function (result) {
                        alert("AJAX success.");
                        //$('#createForm').replaceWith(result);
                    },
                    error: function (xhr) {
                        alert("An error occurred: " + xhr.status + " " + xhr.statusText);
                    }
                });
            }
            return false;
        }
    });
</script>

@using (Html.BeginForm("CreateForm", "Test", FormMethod.Post, new { @id = "optionForm" })) {
    @Html.RadioButton("radioOption", "value1", false, new { @id = "radioButton1" })
    <label for="radioButton1">Radio Button 1</label>
    @Html.RadioButton("radioOption", "value2", false, new { @id = "radioButton2" })
    <label for="radioButton2">Radio Button 2</label>
    @Html.RadioButton("radioOption", "value3", false, new { @id = "radioButton3" })
    <label for="radioButton3">Radio Button 3</label>

    <input type="submit" value="Select" style="display:none;" />
}

<div id="createForm"></div>

CONTROLLER

public class TestController : Controller {
    public ActionResult TestAction() {
        return View();
    }

    [HttpPost]
    public ActionResult CreateForm(string option) {
        return View("TestAction");
    }
}

Suggest you use a tool like Fiddler, or the Network tool in Chrome (Ctrl Shift I) - the 404 will be highlighted in Red and you can see what the offending URL is. — StuartLC
Is MyController the real name of the controller? Can you give us a bit more detail to attempt reproducing your problem? — Simon Whitehead
Are you sure using https and port 44300? I guess your iis express misconfigured. — sigurd

Darin Dimitrov Darin Dimitrov · Accepted Answer · 2012-08-14T09:08:43

@using (Html.BeginForm("CreateForm", "MyController", FormMethod.Post, new { id = "optionForm" }))

should be:

@using (Html.BeginForm("CreateForm", "My", FormMethod.Post, new { id = "optionForm" }))

Remember that in ASP.NET MVC helpers you should not pass the Controller suffix. It is assumed.

So the correct url should be:

https://localhost:44300/My/CreateForm

and not:

https://localhost:44300/MyController/CreateForm

where you obviously have the MyController class:

public class MyController: Controller
{
    public ActionResult CreateForm(MyOptionType formOption)
    {
        ...
    }
}

ASP.NET MVC 3 AJAX request returns 404 Not Found error

1 Answers