title: Edit Record using Partial View, JQuery and Bootstrap Modal
body: <p>I have a table on which there's an <code>Edit</code> button for every record at the last column.</p>
  
  <p>My goal is to have an editable form on a modal for the record on which the user pressed the <code>Edit</code> button.</p>
  
  <p>In order to accomplish that, I've created a Partial View which i want to be loaded on the modal, but after tons of tries, i cannot get it working. The JS created to compose the partial view URL and loading into the modal seems to have no effect and it's raising the following error:</p>
  
  <blockquote>
    <p>VM364 ESa31501901:361 Uncaught ReferenceError: ESa31501901 is not
    defined
        at HTMLAnchorElement.onclick</p>
  </blockquote>
  
  <p><strong>Note:</strong> ESa31501901 is the first parameter passed into the JS function.</p>
  
  <p>This is my intention:</p>
  
  <p>a) <code>Edit()</code> : This method will return all records.</p>
  
  <p>b) <code>EditClientFeature(string ClientID, string WorkProcessID)</code>: This method will return a partial view containing the record of a particular client. This method is called when we start editing a client record. The client record is displayed in modal (popup). </p>
  
  <p>c) <code>EditClientFeature(ClientFeatureViewModel model)</code>: This method will update the client record.</p>
  
  <p><strong>ClientFeature ViewModel</strong></p>
  
  <pre><code>public class ClientFeatureViewModel
  {
      public string ClientID { get; set; }
      public string WorkProcessID { get; set; }
      public int? Certification { get; set; }
      public bool? TrackingActive { get; set; }
      public string ClientCode { get; set; }
      public string ContractNo { get; set; }
      public string ProductCode { get; set; }
  }
  </code></pre>
  
  <p><strong>Edit.cshtml</strong></p>
  
  <pre><code>[...]
  
  &lt;tbody&gt;
  @foreach (var feature in Model.ClientFeatures)
  {
   &lt;tr&gt;
       &lt;td style="text-align:center"&gt;&lt;strong&gt;@feature.WorkProcessId&lt;/strong&gt;/td&gt;
       &lt;td style="text-align:center"&gt;@feature.Certificate&lt;/td&gt;
       &lt;td style="text-align:center"&gt;@feature.TrackingActive&lt;/td&gt;
       &lt;td style="text-align:center"&gt;@feature.ClientCode&lt;/td&gt;
       &lt;td style="text-align:center"&gt;@feature.ContractNo&lt;/td&gt;
       &lt;td style="text-align:center"&gt;@feature.ProductCode&lt;/td&gt;
       &lt;td&gt;
         &lt;a href="#" class="btn btn-success" onclick="EditCF(@Model.Piva, @feature.WorkProcessId)"&gt;&lt;i class="glyphicon glyphicon-pencil"&gt;&lt;/i&gt;&lt;/a&gt;                                                                                                                                                                
      &lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/tbody&gt;
  
  [...]
  
      &lt;div class="modal fade" id="ModalClientFeatures"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;a href="#" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/a&gt;
                      &lt;h3 class="modal-title"&gt;Edit&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" id="ModalBodyDiv"&gt;
  
                    &lt;!-- Here's where i want to show the partial view--&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  [...]
  
  &lt;script&gt;    
          function EditCF(ClientID, WorkProcessID) {
  
              var url = "/Admin/EditClientFeature?ClientID=" + ClientID + "?WorkProcessID=" + WorkProcessID;
  
              $("#ModalBodyDiv").load(url, function () {
                  $("#ModalClientFeatures").modal("show");
  
              })
  
          }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>ClientFeaturepartialView.cshtml</strong></p>
  
  <pre><code>@model Project.Models.ClientFeatureViewModel
  
  &lt;script src="~/Scripts/jquery-3.3.1.js"&gt;&lt;/script&gt;
  
  @using (Html.BeginForm())
  {
      @Html.AntiForgeryToken()
  
  &lt;form id="myForm"&gt;
  
      &lt;div class="form-horizontal"&gt;
          &lt;h4&gt;ClientFeatureViewModel&lt;/h4&gt;
          &lt;hr /&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          @Html.HiddenFor(model =&gt; model.ClientID)
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.WorkProcessID, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.WorkProcessID, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.WorkProcessID, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Certification, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Certification, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.Certification, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.TrackingActive, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  &lt;div class="checkbox"&gt;
                      @Html.EditorFor(model =&gt; model.TrackingActive)
                      @Html.ValidationMessageFor(model =&gt; model.TrackingActive, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ClientCode, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ClientCode, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ContractNo, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ContractNo, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ContractNo, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.ProductCode, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.ProductCode, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.ProductCode, "", 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="Save" class="btn btn-default" /&gt;
                  &lt;a href="#" id="btnSubmit" class="btn btn-success btn-block"&gt;
                      &lt;span&gt;Update&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/form&gt;
  }
  </code></pre>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>    public ActionResult EditClientFeature(string ClientID, string WorkProcessID)
      {
          PMEntities db = new EntityConn().Db;
  
          ClientFeatures ClientFeature = db.ClientFeatures.Where(cf =&gt; cf.ClientId == ClientID &amp;&amp; cf.WorkProcessId == WorkProcessID).SingleOrDefault();
  
          if (ClientFeature != null) {
  
              ClientFeatureViewModel model = new ClientFeatureViewModel
              {
                  ClientID = ClientFeature.ClientId,
                  WorkProcessID = ClientFeature.WorkProcessId,
                  Certification = ClientFeature.Certificate,
                  TrackingActive = ClientFeature.TrackingActive,
                  ClientCode = ClientFeature.ClientCode,
                  ContractNo = ClientFeature.ContractNo,
                  ProductCode = ClientFeature.ProductCode,
  
              };
  
              return PartialView("ClientFeaturePartialView", model);
          }
          else { return View("Error"); }      
  
      }
  
      [HttpPost]
      public ActionResult EditClientFeature(ClientFeatureViewModel model)
      {
          try
          {
              PMEntities db = new EntityConn().Db;
  
              if (model.ClientID != null)
              {
                  //update
                  ClientFeatures ClientFeature = db.ClientFeatures.Where(cf =&gt; cf.ClientId == model.ClientID &amp;&amp; cf.WorkProcessId == model.WorkProcessID).SingleOrDefault();
  
                  ClientFeature.Certificate = model.Certification;
                  ClientFeature.ClientCode = model.ClientCode;
                  ClientFeature.ContractNo = model.ContractNo;
                  ClientFeature.ProductCode = model.ProductCode;
                  ClientFeature.TrackingActive = model.TrackingActive;
  
                  db.SaveChanges();
  
              }
          }
          catch (Exception ex)
          {
              throw ex;
          }
  
      }
  </code></pre>