title: MVC4 - Ajax.BeginForm and Partial view gives 'undefined'
body: <p>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.</p>
  
  <p>Here is what I have so far (I took out all the structure and styling so its easier to read):</p>
  
  <p><strong>Main View - Activities</strong></p>
  
  <pre><code>@model Project.Models.ActivityModel
  &lt;div id="AjaxTest"&gt;&lt;/div&gt;
  
  @using (Ajax.BeginForm(new AjaxOptions
    {
     UpdateTargetId = "AjaxTest",
     InsertionMode = InsertionMode.Replace, 
     HttpMethod = "POST"
    }))
  
    {
      @Html.ValidationSummary(true)
        @Html.TextBoxFor(x =&gt; x.Activity_CityName)
          &lt;div class="editor-label"&gt;   
              &lt;strong&gt;@Html.LabelFor(x =&gt; x.Activity_StartDate)&lt;/strong&gt;
          &lt;/div&gt; 
          &lt;div class="editor-field"&gt;
              &lt;input id="checkin" type="text" name="Activity_StartDate" /&gt;
          &lt;/div&gt;
        @Html.TextBoxFor(x =&gt; x.Activity_EndDate)
        @Html.DropDownListFor(x =&gt; x.Activity_NumAdults, AdultNum)
        @Html.DropDownListFor(x =&gt; x.Activity_NumChildren)
        @Html.DropDownListFor(x =&gt; x.Activity_ChildAge1, ChildAge)
        @Html.DropDownListFor(x =&gt; x.Activity_ChildAge2, ChildAge)
        @Html.DropDownListFor(x =&gt; x.Activity_ChildAge3, ChildAge)
  
       &lt;div class="submitbutton"&gt; 
          &lt;input data-inline="true"type="submit" id="activity_search" value="Search" /&gt;
      &lt;/div&gt; 
    }
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>[HttpPost]
      public ActionResult Activities(ActivityModel activitysubmission) {
         return PartialView("PartialActivities_Success", activitysubmission);
      }
  </code></pre>
  
  <p><strong>Partial View - PartialActivities_Success</strong></p>
  
  <pre><code>@model Project.Models.ActivityModel
  
  &lt;p&gt;City: @Model.Activity_CityName&lt;/p&gt;
  &lt;p&gt;StartDate: @Model.Activity_StartDate&lt;/p&gt;
  &lt;p&gt;EndDate: @Model.Activity_EndDate&lt;/p&gt;
  
  &lt;div&gt;
      &lt;p&gt;&lt;strong&gt;Ticket&lt;/strong&gt;&lt;/p&gt;
      &lt;p&gt;Number of Adults: @Model.Activity_NumAdults&lt;/p&gt;
      &lt;p&gt;Number of Children: @Model.Activity_NumChildren&lt;/p&gt;
      &lt;p&gt;Child 1 age: @Model.Activity_ChildAge1&lt;/p&gt;
      &lt;p&gt;Child 2 age: @Model.Activity_ChildAge2&lt;/p&gt;
      &lt;p&gt;Child 3 age: @Model.Activity_ChildAge3&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Scripts in Layout Page</strong></p>
  
  <pre><code>  &lt;script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"&gt; &lt;/script&gt;
      &lt;script src="../../Scripts/xdate.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="../../Scripts/xdate.i18n.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(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.
          });
      &lt;/script&gt;    
  </code></pre>