ASP.NET MVC Using Partial Views as Dialogs
<p>I have an ASP.NET MVC app. This app has a view that shows a list of records. I want to let my users add a record to this list. To do that, I've created a dialog that the user can enter information into. At this time, this dialog is a partial. I'm willing to change the implementation. I just need a dialog for adding. At this time, my views look like this:</p>

<p><strong>Index.cshtml</strong></p>

<pre><code>&lt;table class="table"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;First Name&lt;/th&gt;
      &lt;th&gt;Last Name&lt;/th&gt;
      &lt;th&gt;Email address&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;

  &lt;tbody&gt;
    @foreach (var user in Model.Users)
    {
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;@user.FirstName&lt;/td&gt;
        &lt;td&gt;@user.LastName&lt;/td&gt;
        &lt;td&gt;@user.Email&lt;/td&gt;
      &lt;/tr&gt;
    }
  &lt;/tbody&gt;
&lt;/table&gt;
&lt;br /&gt;
&lt;button type="button" class="btn btn-default" onclick="addPerson()"&gt;Add Person&lt;/button&gt;

@* Add Person dialog *@
&lt;div id="addPersonModal" class="modal"&gt;
  &lt;div class="modal-dialog"&gt;
    @{Html.RenderAction("Add", "Person");}
  &lt;/div&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  function addPerson() {
    $('#addPersonModal').modal('show');
  }
&lt;/script&gt;
</code></pre>

<p><strong>Add.cshtml</strong></p>

<pre><code>@model MyApp.Models.AddPersonModel
@{ Layout = null; }

&lt;div class="modal-content"&gt;
@using(Html.BeginForm("Add", "Person", FormMethod.Post))
{
  &lt;div class="modal-header"&gt;
    &lt;h4 class="modal-title"&gt;Add New Person&lt;/h4&gt;
  &lt;/div&gt;

  &lt;div class="modal-body"&gt;
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    &lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
        @Html.TextBoxFor(m =&gt; m.FirstName)
      &lt;/div&gt;

      &lt;div class="col-md-6"&gt;
        @Html.TextBoxFor(m =&gt; m.LastName)
      &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
        @Html.TextBoxFor(m =&gt; m.Email)
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="modal-footer"&gt;
    &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
    &lt;button type="submit" class="btn btn-primary"&gt;Create&lt;/button&gt;
  &lt;/div&gt;
  @Html.AntiForgeryToken()
}
&lt;/div&gt;
</code></pre>

<p><strong>PersonController.cs</strong></p>

<pre><code>namespace MyApp.Controllers
{
  public class PersonController : Controller
  {
    public ActionResult Index()
    {
      var model = new IndexModel();
      return View(model);
    }

    public ActionResult Add()
    {
      var model = new AddPersonModel();
      return View(model);
    }

    [HttpPost]
    public ActionResult Add(AddPersonModel model)
    {
      if (ModelState.IsValid)
      {
        model.Save();    
      }
      else 
      {
        // I'm stuck here.
      }    

      var listModel = new IndexModel();
      return View("~/Views/Person/Index.cshtml", listModel );
    }
  }
}
</code></pre>

<p>Everything works except for validation. If the user enters some invalid data, the view reloads the entire screen and the data is lost. The dialog is also closed. I need to be able to show the values the user entered and the validation summary in the dialog window if the data is invalid. Yet, I'm not sure how to do this. </p>