title: ASP.NET core MVC Popup Modal with data from model from view
body: <p>Goal:
  I'm trying to make a page that has the user enter in an address, then click a button that will verify it with a FedEx API. With the new verified address (now with the extra postal code from FedEx), I want to have the user verify that the new address is correct using a modal popup all without reloading the page.</p>
  <p>Problem: I've gotten most of the way, but I've gotten stuck getting the data from the view to the controller. It passes a null model instead of what the user input into the fields.</p>
  <p>This is the form the user will fill out:
  <a href="https://i.stack.imgur.com/nr670.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nr670.png" alt="Form" /></a></p>
  <p>Here's the controller: <a href="https://i.stack.imgur.com/fMaNY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fMaNY.png" alt="Controller" /></a></p>
  <p>Here's the view:</p>
  <pre><code>@model AirmotionEcommerceWebsite.Models.Home.DeliveryAddressModel
  
  @{
      ViewBag.Title = &quot;Shipping Address&quot;;
      Layout = &quot;~/Views/Shared/_Layout.cshtml&quot;;
  }
  
  &lt;br /&gt;
  &lt;div class=&quot;container&quot;&gt;
      @Html.AntiForgeryToken()
  
  &lt;div class=&quot;form-horizontal&quot;&gt;
      &lt;h4&gt;Shipping Address&lt;/h4&gt;
      &lt;hr /&gt;
  
          @Html.ValidationSummary(true, &quot;&quot;, new { @class = &quot;text-danger&quot; })
  
      &lt;div id=&quot;PlaceHolderHere&quot;&gt;&lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;Name&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strName, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strName, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;Attention To&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strAttnTo, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strAttnTo, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;Street&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strStreet1, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strStreet1, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;Street 2&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strStreet2, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strStreet2, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;City&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strCity, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strCity, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          @{
              IEnumerable&lt;SelectListItem&gt; dataItems = ViewBag.states;
          }
          &lt;div class=&quot;form-group&quot;&gt;
              &lt;h5&gt;State&lt;/h5&gt;
              &lt;div class=&quot;col-md-10&quot;&gt;
                  @Html.DropDownListFor(model =&gt; model.State.IntStateId, dataItems, &quot;-- Select --&quot;, new { @class = &quot;form-control&quot; })
                  @Html.ValidationMessageFor(model =&gt; model.State.IntStateId, &quot;&quot;, new { @class = &quot;text-danger&quot; })
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;h5&gt;Zip&lt;/h5&gt;
          &lt;div class=&quot;col-md-10&quot;&gt;
              @Html.EditorFor(model =&gt; model.strZip, new { htmlAttributes = new { @class = &quot;form-control&quot; } })
              @Html.ValidationMessageFor(model =&gt; model.strZip, &quot;&quot;, new { @class = &quot;text-danger&quot; })
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;div class=&quot;col-md-offset-2 col-md-10&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-ajax-method=&quot;get&quot; data-toggle=&quot;ajax-modal&quot; data-target=&quot;#ValidateAddress&quot; 
                      data-url=&quot;@Url.Action(&quot;GetValidationOnAddress&quot;, new { model = Model })&quot;&gt;Verify Address&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  
  
      $(function () {
          var PlaceHolderElement = $('#PlaceHolderHere');
          $('button[data-toggle=&quot;ajax-modal&quot;]').click(function (event) {
              var url = $(this).data('url');
              var $j = jQuery.noConflict();
              $j.get(url).done(function (data) {
                  PlaceHolderElement.html(data);
                  PlaceHolderElement.find('.modal').modal('show');
              })
          })
  
          //PlaceHolderElement.on('click', '[data-save=&quot;modal&quot;]', function (event) {
          //  var form = $(this).parents('.modal').find('form');
          //  var actionUrl = form.attr('action');
          //  var sendData = form.serialize();
          //})
      })
  
  &lt;/script&gt;
  </code></pre>