Simple MVC4 unobtrusive ajax not working

Question

I am writing a very simple MVC4 test page and unobtrusive Ajax does not seem to be working. When I click my submit Button the page is not submitted.

I have a breakpoint is VS and can tell there is no request.

I am using Firefox and when I click the submit button the Web Console shows this JavaScript error:
--- Empty string passed to getElementById()

Which occurs at line 16 in.
--- jquery.unobtrusive-ajax.js

I setup ajax Options as follows:

AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "officeList", Confirm = "Are you sure?", Url = Url.Action("GetOfficeData") };

Here is my AjaxForm:

@using (Ajax.BeginForm("GetOfficeData", ajaxOpts))
{
    <div>
        @Html.DropDownList("orgList", new SelectList(Model.Organizations, "ORGID", "ORGNAME"));

        <button type="submit" id="btnSubmit">Submit</button> 
    </div>
}

I do get the 'Are you sure prompt' when I click the submit button (as defined in the ajax options).

If I change Ajax.BeginForm to:

@using (Html.BeginForm())
...

Then there is a request, my breakpoints get hit, and there as no JS errors.

I have used NuGet to get the latest version of both jQuery and unobtrusive-ajax. Here are my script tags from view source (all of them – in order):

<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>

Here is the form that gets rendered:

<form action="/Selectee/GetOfficeData" data-ajax="true" data-ajax-confirm="Are you sure?" data-ajax-mode="replace" data-ajax-update="#officeList" data-ajax-url="/Selectee/GetOfficeData" id="form0" method="post">            
   <div>
      /*--my drop down .....
      <br />
      <button type="submit" id="btnSubmit">Submit</button> 
   </div>
</form>  

Any ideas?

Answer 1

I have it working.

I did not have an Html.BeginForm(), only the Ajax.BeginForm(). Is that valid?

I added an Html.BeginForm() with an Ajax.BeginForm() and all my controls inside that form and it started working.

I thought Ajax.BeginForm() took the place of Html.BeginForm, but it appears I need both. Is that correct?