title: ASP.NET MVC Partial View issue when Submitting a Form
body: <p>I am trying to display a Partial View inside a master (Index) View:</p>
  
  <p>Steps:</p>
  
  <ol>
  <li>User selects a Dropdown item from the Index View. <br>
  
  <ul>
  <li>This displays a Partial View that has a search Form.</li>
  </ul></li>
  <li>User fills the search Form and then clicks the Submit button.</li>
  <li>If the search Form is valid, a new page (Results View) is displayed.</li>
  <li>Else, the search Form Partial View should be re displayed with errors INSIDE the master View</li>
  </ol>
  
  <p>I'm having a problem with number 4 because when the search Form submits, it only displays <br> the partial View in a new window. I want to display the whole page : Index View + Partial View with errors.</p>
  
  <p>Suggestions? This is what I have:</p>
  
  <p>Image</p>
  
  <p><img src="https://i.stack.imgur.com/kFaeU.png" alt="enter image description here"></p>
  
  <p>Controller</p>
  
  <pre><code>public class AppController : Controller
  {
      public ActionResult Index()
      {
          return View(new AppModel());
      }
  
      public ActionResult Form(string type)
      {
          if (type == "IOS")
              return PartialView("_IOSApp", new AppModel());
          else
              return PartialView("_AndroidApp", new AppModel());
      }
  
      public ActionResult Search(AppModel appModel)
      {
          if (ModelState.IsValid)
          {
              return View("Result");
          }
          else // This is where I need help
          {
              if (appModel.Platform == "IOS")
                  return PartialView("_IOSApp", appModel);
              else
                  return PartialView("_AndroidApp", appModel);
          }
      }
  }
  </code></pre>
  
  <p>Model</p>
  
  <pre><code>public class AppModel
  {
      public string Platform { get; set; }
      [Required]
      public string IOSAppName { get; set; }
      [Required]
      public string AndroidAppName { get; set; }        
      public List&lt;SelectListItem&gt; Options { get; set; }
  
      public AppModel()
      {
          Initialize();
      }
  
      public void Initialize()
      {
          Options = new List&lt;SelectListItem&gt;();
  
          Options.Add(new SelectListItem { Text = "IOS", Value = "I" });
          Options.Add(new SelectListItem { Text = "Android", Value = "A"});
      }
  }
  </code></pre>
  
  <p>Index.cshtml</p>
  
  <pre><code>@{ ViewBag.Title = "App Selection"; }
  
  &lt;h2&gt;App Selection&lt;/h2&gt;
  
  @Html.Label("Select Type:")
  @Html.DropDownListFor(x =&gt; x.Platform, Model.Options)
  
  &lt;div id="AppForm"&gt;&lt;/div&gt; // This is where the Partial View goes
  </code></pre>
  
  <p>_IOSApp.cshtml</p>
  
  <pre><code>@using (Html.BeginForm("Search", "App"))
  {
      @Html.Label("App Name:")
      @Html.TextBoxFor(x =&gt; x.IOSAppName)
      &lt;input id="btnIOS" type="submit" value="Search IOS App" /&gt;
  }
  </code></pre>
  
  <p>AppSearch.js</p>
  
  <pre><code>$(document).ready(function () {
  
  $("#Platform").change(function () {
  
      value = $("#Platform :selected").text();
  
      $.ajax({
          url: "/App/Form",
          data: { "type": value },
          success: function (data) {
              $("#AppForm").html(data);
          }
      })
  });
  
  });
  </code></pre>