MVC4 - Ajax.BeginForm and Partial view gives 'undefined'

Question

I'm working on an activity booking and I'm having trouble using ajax.beginform with a partial view. When I click submit, it just goes to a new page and there is an 'undefined' in the top left corner. I have "../../Scripts/jquery.unobtrusive-ajax.min.js" in my layout page. What I want to do is when the user submits the form, the div "AjaxTest" gets updated with the partial view and the form is under the search results.

Here is what I have so far (I took out all the structure and styling so its easier to read):

Main View - Activities

@model Project.Models.ActivityModel
<div id="AjaxTest"></div>

@using (Ajax.BeginForm(new AjaxOptions
  {
   UpdateTargetId = "AjaxTest",
   InsertionMode = InsertionMode.Replace, 
   HttpMethod = "POST"
  }))

  {
    @Html.ValidationSummary(true)
      @Html.TextBoxFor(x => x.Activity_CityName)
        <div class="editor-label">   
            <strong>@Html.LabelFor(x => x.Activity_StartDate)</strong>
        </div> 
        <div class="editor-field">
            <input id="checkin" type="text" name="Activity_StartDate" />
        </div>
      @Html.TextBoxFor(x => x.Activity_EndDate)
      @Html.DropDownListFor(x => x.Activity_NumAdults, AdultNum)
      @Html.DropDownListFor(x => x.Activity_NumChildren)
      @Html.DropDownListFor(x => x.Activity_ChildAge1, ChildAge)
      @Html.DropDownListFor(x => x.Activity_ChildAge2, ChildAge)
      @Html.DropDownListFor(x => x.Activity_ChildAge3, ChildAge)

     <div class="submitbutton"> 
        <input data-inline="true"type="submit" id="activity_search" value="Search" />
    </div> 
  }

Controller

[HttpPost]
    public ActionResult Activities(ActivityModel activitysubmission) {
       return PartialView("PartialActivities_Success", activitysubmission);
    }

Partial View - PartialActivities_Success

@model Project.Models.ActivityModel

<p>City: @Model.Activity_CityName</p>
<p>StartDate: @Model.Activity_StartDate</p>
<p>EndDate: @Model.Activity_EndDate</p>

<div>
    <p><strong>Ticket</strong></p>
    <p>Number of Adults: @Model.Activity_NumAdults</p>
    <p>Number of Children: @Model.Activity_NumChildren</p>
    <p>Child 1 age: @Model.Activity_ChildAge1</p>
    <p>Child 2 age: @Model.Activity_ChildAge2</p>
    <p>Child 3 age: @Model.Activity_ChildAge3</p>
</div>

Scripts in Layout Page

  <script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"> </script>
    <script src="../../Scripts/xdate.js" type="text/javascript"></script>
    <script src="../../Scripts/xdate.i18n.js" type="text/javascript"></script>
    <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
    <script>
        $(document).bind("mobileinit", function() {
            // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
            // when navigating from a mobile to a non-mobile page, or when clicking "back"
            // after a form post), hence disabling it.
            $.mobile.ajaxEnabled = true; // originally false.
        });
    </script>

I suspect it could be issue of referencing the javascript files. Can you show us how you are referencing the javascript files in your page — Hari Gillala, Jun 14 '12 at 16:04
I have updated my question. You can see the scripts now in the order i put them — J-Y, Jun 14 '12 at 16:18
Don't mix the bundling and direct script references. Try either one. — VJAI, Jun 14 '12 at 16:30
Ok, I took out the bundle and added all the scripts individually. I'm still getting an "undefined" in the top left corner. — J-Y, Jun 14 '12 at 16:45
your partial view has an extra closing div at the end. Is that a typo? — Wiz, Jun 14 '12 at 19:29
yes, that's a typo sorry about that. My original code doesn't have that. — J-Y, Jun 15 '12 at 13:38
If this really is "all" your scripts then you are missing the main jquery script. — Snives, Aug 29 '12 at 00:31

score 1 · Answer 1 · answered Jun 14 '12 at 17:31

1

I noticed one mistake in the code. Your div has an id Ajaxtest but the parameter you are passing to BeginRequest is AjaxTest the T is capital

answered Jun 14 '12 at 17:31

Wiz

477
5
17

ah ty for the correction. Unfortunately, I still get a blank page with undefined in the top left corner. I really appreciate the help though – J-Y Jun 14 '12 at 18:19

score 1 · Answer 2 · answered Jul 09 '12 at 17:53

Are you using MVC 4? I would make sure that UnobtrusiveJavaScriptEnabled is set to true in your WebConfig file. I believe it is by default, though. The only other thing I can think of is to verify that you have your other jQuery files and that they're being loaded in the right order. If you load your unobrusive jQuery file before the main one then it won't work.

score 0 · Answer 3 · answered Nov 14 '12 at 13:46

You haven't specified which action to call when posting the Ajax form. Try changing it to this:

@using (Ajax.BeginForm("Activities", new AjaxOptions
  {
    UpdateTargetId = "AjaxTest",
    InsertionMode = InsertionMode.Replace, 
    HttpMethod = "POST"
  }))

MVC4 - Ajax.BeginForm and Partial view gives 'undefined'

3 Answers3