title: ASP.NET MVC - Using a Form in a Bootstrap Modal to call an Action from a Controller
body: <p>I have a Form that creates an entry into my database. I am trying to add an additional form via a modal that will allow the user to populate the first form by searching a property on the webservice. </p>
  
  <p>What I need is for when the user types hits search in the modal it will call an action on  controller that then runs my web service client that then returns a list of appropriate information. I then want this list displayed as a table on the page. The user can then select which search result they want to use to which will then populate the original form. I think I can figure most of this out but wasnt sure of the best way to kick off the search from the modal. Code is as follows. </p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model *******
  
  @{
      ViewBag.Title = "Create";
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  &lt;!-- Trigger the modal with a button --&gt;
  &lt;button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Search"&gt;Populate From Service&lt;/button&gt;
  &lt;!-- Modal --&gt;
  &lt;div id="Search" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Search By Property&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form class="form-horizontal"&gt;
                      &lt;p&gt;blah blah blah&lt;/p&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="API14" class="control-label col-md-2"&gt;API&lt;/label&gt;
                          &lt;div class ="col-md-10"&gt;
                              &lt;input type="text" class="form-control" id="API14" aria-describedby="API14" placeholder="Enter API"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="col-md-offset-2 col-md-10"&gt;
                          &lt;input type="submit" value="Search" class="btn btn-success" /&gt;
                          &lt;input type="button" value="Close" data-dismiss="modal" class="btn btn-danger" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  @using (Html.BeginForm()) 
  {
      @Html.AntiForgeryToken()
  
      &lt;div class="form-horizontal"&gt;
  
          &lt;hr /&gt;
  
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.API14, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.API14, new { htmlAttributes = new { @class = "form-control"} })
                  @Html.ValidationMessageFor(model =&gt; model.API14, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.PROP_NO, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.PROP_NO, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.PROP_NO, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.PROP_NM, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.PROP_NM, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.PROP_NM, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ENTITY, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10 "&gt;
  
                  @Html.EditorFor(model =&gt; model.ENTITY, new { htmlAttributes = new { @class = "form-control" } } ) 
                  @Html.ValidationMessageFor(model =&gt; model.ENTITY, "", new { @class = "text-danger" })
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.PROD_ZONE_NM, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.PROD_ZONE_NM, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.PROD_ZONE_NM, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.LEASE_NAME, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.LEASE_NAME, new { htmlAttributes = new { @class = "form-control"  } })
                  @Html.ValidationMessageFor(model =&gt; model.LEASE_NAME, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.WELL_NO, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.WELL_NO, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.WELL_NO, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-success" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
  }
  </code></pre>