title: Unobtrusive Ajax Form for partial view
body: <p>I'm having trouble using unobtrusive ajax to post data from a contact us form.</p>
  
  <p>My Partial View is like this:</p>
  
  <pre><code>@model site.ViewModel.Home.ContactUsViewModel 
  
  @using (Ajax.BeginForm("_ContactUsPartial", "Home", 
                         new AjaxOptions { UpdateTargetId = "result" }))
          {
              &lt;fieldset&gt;
                  &lt;legend&gt;Contact Us&lt;/legend&gt;
                  @Html.ValidationSummary(true)
                  &lt;div id="result"&gt;&lt;/div&gt;
                  &lt;div class="editor-label"&gt;
                   @Html.LabelFor(m =&gt; m.FullName)
                   @Html.ValidationMessageFor(m =&gt; m.FullName)&lt;/div&gt;
                  &lt;div class="editor-field"&gt;@Html.TextBoxFor(m =&gt; m.FullName)&lt;/div&gt;
                  &lt;!-- other fields from model --&gt;
                  &lt;input type="submit" value="Submit"/&gt;
              &lt;/fieldset&gt;
          }
  </code></pre>
  
  <p>My Partial View is placed on another page like this:</p>
  
  <pre><code>@Html.Partial("_ContactUsPartial", new ContactUsViewModel());
  </code></pre>
  
  <p>My Home Controller like this:</p>
  
  <pre><code>[HttpPost]
  public ActionResult _ContactUsPartial(ContactUsViewModel viewModel)
  {
      if (ModelState.IsValid)
      {
         try
         {
             //send email
             return Content("Thanks for your message!");
         }
         catch (Exception ex)
         {
            return Content("Problem sending the email.");
         }
      }
  
              return Content("oops. invalid model");
  }
  </code></pre>
  
  <p>What I'm expecting to happen, is that when I press submit the controller will return some text content that will be placed in the div with an id of "result".</p>
  
  <p>What is actually happening is when I press submit, I am getting redirected to /Home/_ContactUsPartial with the text content being the only thing that is displayed.</p>
  
  <p>I don't understand what is going on here...and I have tried to look around at examples online only to find myself digging deeper into this hole.</p>
  
  <p>I do have unobtrusive javascript enabled in my Web.config and I also have a reference to  jquery.unobtrusive-ajax.min.js. </p>
  
  <p>In my Scripts folder I have the following that may be relevant:</p>
  
  <ul>
  <li>jquery.unobtrusive-ajax.min.js</li>
  <li>jquery.validate.unobtrusive.min.js</li>
  <li>MicrosoftMvcAjax.js</li>
  </ul>
  
  <p>In my _Layout.cshtml  tag I have the following declared:</p>
  
  <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/bootstrap.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>In my Global.asax.cs Application_Start I have this line:</p>
  
  <pre><code>BundleConfig.RegisterBundles(BundleTable.Bundles);
  </code></pre>
  
  <p>RegisterBundles looks like this:</p>
  
  <pre><code>bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                          "~/Scripts/jquery-{version}.js"));
  
  bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                          "~/Scripts/jquery-ui-{version}.js"));
  
  bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                          "~/Scripts/jquery.unobtrusive*",
                          "~/Scripts/jquery.validate*"));
  </code></pre>
  
  <p>Not sure what bundles do and how they work because I seem to have it configured to bring them in via this ScriptBundle...but then I also have them configured manually in the head of the _Layout.cshtml....</p>
  
  <p>Any idea what I'm doing wrong? I'd really appreciate some help with this!</p>