Why is Ajax.BeginForm not working?

Question

I looked at several similar questions, but I can't get it working.

I have some radio buttons in a form. Instead of selecting the option and clicking the submit button, I want to submit the form when the user clicks a radio button.

So I hid the submit button and placed a javascript function that emulates the click of the button (I also tried to get it working with the button click, but this doesn't seem to be the problem).

In my View I have:

<script type="text/javascript" src="/Scripts/jquery-1.9.1/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="/Scripts/jquery-1.9.1/jquery.unobtrusive-ajax.min.js"></script>

<script type="text/javascript">
    function change() {
        $('#buttonradio').click();
    }
</script>

<h2>Dashboard</h2>

<div class="Dashboard" id="itemsDshBrd" style="overflow:auto;height:97%;">

    <div id="DshBrdRadioGroup" style="float:right;font-size:small">   

        <% using (Ajax.BeginForm("Index", "DshBrd", new { value = 1 }, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "stations" })) { %>

            <input class="radioclass" id="r1" name="radiogroup" type="radio" value="1" onclick="change()" checked/> A
            <input class="radioclass" id="r2" name="radiogroup" type="radio" value="2" onclick="change()"/> B     
            <input class="radioclass" id="r3" name="radiogroup" type="radio" value="3" onclick="change()"/> C
            <input class="radioclass" id="r4" name="radiogroup" type="radio" value="4" onclick="change()"/> D

            <input id="buttonradio" type="submit" value="Submit" style="visibility:hidden"/>

        <% } %>        

    </div>   

    <div id="stations">
        <% Html.RenderPartial("~/Views/DshBrd/Stations.ascx"); %>
    </div>

</div>

*I know that I'm sending value = 1.

In my controller I have:

[HttpPost]
public ActionResult Index(int value)
{
    if (Request.IsAjaxRequest())
    {
        return PartialView("~/Views/DshBrd/Stations.aspx");
    }

    return View("~/Views/DshBrd/Index.aspx");
}

Where Request.IsAjaxRequest() is never true.

My Web.Config is also OK:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

Any ideas?

Answer 1

I don't think you're submitting the form correctly.

Try removing the submit button altogether, and replacing your change code with:

function change() {
    $("#DshBrdRadioGroup form").submit();
}

It also sounds like your unobtrusive ajax isn't working correctly. Check the following:

• ClientValidationEnabled is true in your web.config app settings.
• UnobtrusiveJavaScriptEnabled is true in your web.config app settings.
• Your referencing jquery.unobtrusive-ajax.min.js script on your page somewhere.

Answer 2

I thinks this issue with your module binder . change you variable name value to radiogroup on your action.

Answer 3

First, you are trying to do a regular post not through AJAX from what you are describing. It will never be true .

So, you need to use something like http://malsup.com/jquery/form/ which makes it easy to do it from AJAX.

Once you are using AJAX to do your submits, you really don't have to use onclick in each radio button element. I would have done it like the following assuming those radio buttons are the only radio buttons using the class radioclass :

$('.radioclass').click(function () {
    $(this).parents('form:first').trigger('submit');
});