Question

Web Config:

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

JavaScript referenced files:

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js") type="text/javascript"></script>

CSHTML page:

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "result", LoadingElementId = "progress", InsertionMode = InsertionMode.Replace }))
{
    <div class="form">
        <div class="emailBox">
            <input id="email" name="email">
            <input type="submit" value="Join Us">
        </div>

        <div id="result">
        </div>
        <div id="progress" style="display:none;">
            <img src= "@Url.Content("~/Content/images/Ajax-loader-bar.gif") ">
        </div>
    </div>
}

Controller.cs:

    [HttpPost]
    public string Index(SignUpModel model)
    {
        return "Hello";
    }

What’s the reason when i click on the SUBMIT button, the entire page gets replace with a white page that says “hello”. I was under the impression that Ajax.BeginForm would replace the content of the DIV RESULT.

What am I doing wrong??

Also, the LoadingElementID
Would it HIDE automatically when the AJAX call will return its value?

=========================
ANSWER
Firebug showed that one of the Referenced JS files was NOT FOUND.
After I fixed that ..it all worked as expected.

Thanks guys

Answer 1

Make sure that you have jquery, Jquery.unobtrusive-ajax script files added on your page where you are using Ajax.BeginForm. Furthermore, check in firebug (or any debugger tool) for presence of javascript errors that might be causing ajax to fail and triggering full post back of the entire page. And yes, the loadingelement should hide automatically when the result of ajax post comes back.
Also make sure that your web.config contains following setting

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