title: Cannot update database entry and refresh dynamic WebGrid using jQuery - ASP.Net MVC
body: <p>I am successfully dynamically displaying a WebGrid based on selected item of a DropDownList. If I select another item in the DropDownList, I will see a different WebGrid. Before stating what I am trying to do next, here is how I have achieved the above (with plenty of help from people like you).</p>
  
  <p>Here is my Index view:</p>
  
  <pre><code>@model BarClients.Models.BarClientsViewModel
  
  @{
      ViewBag.Title = "Index";
  }
  
  &lt;h2&gt;Enter Client Information&lt;/h2&gt;
  &lt;br /&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th align="left"&gt;
              @Html.DisplayNameFor(model =&gt; model.BAR_Clients.ClientId)
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th valign="top"&gt;
              &lt;div id="MeditechDropDown"&gt;
                  @Html.DropDownListFor(model =&gt; model.BAR_Clients.ClientId, Model.MeditechClientID, "-- Select --", new { style = "width:170px" })
              &lt;/div&gt;
          &lt;/th&gt;
          &lt;th&gt;
              @{Html.RenderAction("EmailAddressGrid", "Home");}
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is my EmailAddressGrid view:</p>
  
  <pre><code>@model BarClients.Models.BarClientsViewModel
  
  @{
      WebGrid grid = null;
      if (Model.EmailAddressesOfChosenClient.Count&lt;string&gt;() != 0)
      {
          grid = new WebGrid(Model.EmailAddressesOfChosenClient, ajaxUpdateContainerId: "gridContent");
      }
  }
  
  &lt;div id="gridContent"&gt;
  @{ if (grid != null)
     {
         &lt;table&gt;
             &lt;tr&gt;
                 &lt;td&gt;
                 @grid.GetHtml(           
                  columns: grid.Columns(
                  grid.Column("Email Addresses", format: item =&gt; item)))
                 &lt;/td&gt;
                 &lt;td valign="top"&gt;
                     @Html.DisplayFor(model =&gt; model.InvoiceMode)
                 &lt;/td&gt;
             &lt;/tr&gt;
         &lt;/table&gt;     
     }
  }
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jQuery I am using to dynamically display a WebGrid based on selection of the DropDownList (clientID):</p>
  
  <pre><code>jQuery(document).ready(function () {
      $("#MeditechDropDown").change(function () {
          var id = $(this).find(":selected").val()
          var clientID = { "clientID": id }
          $.ajax({
              url: "/Home/PopulateEmailAddressUI",
              data: JSON.stringify(clientID), // Send value of the drop down change of option
              type: 'POST',
              datatype: 'html',
              contentType: 'application/json; charset=utf-8',
              success: function (response) {
                  $('#gridContent').html(response)
              }
          });
      });
  });
  </code></pre>
  
  <p>Here is the controller action PopulateEmailAddressUI that returns the asynchronous WebGrid:</p>
  
  <pre><code>[HttpPost]
  public PartialViewResult PopulateEmailAddressUI(string clientID)
  {
      _clientModel = InitialiseBarClientsModel();
  
      _clientModel.FindEmailAddresses(from client in eFormsDB.BAR_Clients where client.ClientId == clientID select client);
  
      return PartialView("~/Views/Home/EmailAddressGrid.cshtml", _clientModel);
  }
  </code></pre>
  
  <p>So far so good. My next task is to be able to enter a new email address on an Editor. I would then hit an "Add Email" button which would then add it to a database table record identified by the currently selected item of the DropDownList mentioned above. To accomplish this, I have an extra table inside the "gridContent" div ID where the code for the WebGrid resides:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;th align="left"&gt;
              @Html.EditorFor(model =&gt; model.NewEmailAddress)
          &lt;/th&gt;
          &lt;th&gt;
              @Html.DropDownListFor(model =&gt; model.BAR_Clients.InvoiceMode, Model.InvoiceOptions, new { style = "width:70px" })
          &lt;/th&gt;
          &lt;th&gt;
              &lt;div id="AddEmail"&gt;
                  &lt;button&gt;Add Email&lt;/button&gt;
              &lt;/div&gt;
          &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th align="left"&gt;
              @Html.Raw("Enter New Email Address")
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I (unsuccessful) attempt at having the email address added and the WebGrid reloaded through jQuery is as follows:</p>
  
  <pre><code>jQuery(document).ready(function () {
      var addEmail = $('#AddEmail');
      addEmail.on('click', function () {
          var id = $("#MeditechDropDown").find(":selected").val()
          var clientID = { "clientID": id }
          $.ajax({
              url: "/Home/AddEmailAddress",
              data: JSON.stringify(clientID), // Send value of the drop down change of option
              type: 'POST',
              datatype: 'html',
              contentType: 'application/json; charset=utf-8',
              success: function (response) {
                  $('#gridContent').html(response)
              }
          });
      });
  });
  </code></pre>
  
  <p>My controller action AddEmailAddress looks like:</p>
  
  <pre><code>[HttpPost]
  public PartialViewResult AddEmailAddress(string clientID)
  {
      // Code to update database omitted
  
      return PartialView("~/Views/Home/EmailAddressGrid.cshtml", _clientModel);
  }
  </code></pre>
  
  <p>Basically after entering a new email address and clicking on the "Add Email" button, nothing is happening (controller action AddEmailAddress never gets called). What am I doing wrong? Things that could be getting in the way are the fact that AddEmail div ID is inside the gridContent div ID. Many thanks for any pointers.</p>