title: How to populate a whole form after ajax GET request?
body: <p>I am working on ASP.NET MVC project and have an empty form rendered by MVC controller. Right after it's been rendered, I make an AJAX GET request, and receive JSON data to populate the form. </p>
  
  <p>Everything works fine when I populate each individual field (please see code below), but I have a feeling that there is a better/righter way of how to populate the entire form in one shot. Please help.</p>
  
  <p>In my $.get request, I tried:</p>
  
  <pre><code>$("#content").html(data);
  </code></pre>
  
  <p>It simply empties my form (all fields disappear).</p>
  
  <p>Then I tried:</p>
  
  <pre><code>$("#content").val(data);
  </code></pre>
  
  <p>Here, all fields stay blank.</p>
  
  <p>Anyways, here is the code that I have (please see below).</p>
  
  <p>Here is my view (.cshtml file):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@model ViewModels.ProductDetailsViewModel
  
  &lt;form asp-controller="ApiProduct" asp-action="Post" id="content"&gt;
  
      &lt;div class="form-group"&gt;
          &lt;label asp-for="Name" class="control-label"&gt;Name&lt;/label&gt;
          &lt;input asp-for="Name" type="text" class="form-control" id="js-name" /&gt;
          &lt;span asp-validation-for="Name" class="text-danger"&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label asp-for="Description" class="control-label"&gt;Description&lt;/label&gt;
          &lt;textarea asp-for="Description" rows="5" cols="40" class="form-control" id="js-description"&gt;&lt;/textarea&gt;
          &lt;span asp-validation-for="Description" class="text-danger"&gt;&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group"&gt;
          &lt;input type="submit" value="Save" class="btn btn-default" /&gt;
      &lt;/div&gt;
  
  &lt;/form&gt;
  
  @section Scripts {
      &lt;script&gt;
        
        var id = @Model.Id;
        
          $.get("/apiproduct/get/?id=" + id, function (data) {
            
              $("#js-name").val(data.name);
              $("#js-description").val(data.description);
           
            });
        
      &lt;/script&gt;
  }
  ​</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my API controller:</p>
  
  <pre><code>[HttpGet("{id}")]
      public IActionResult Get(int id)
      {
          var product = _repository.GetProductById(id);
  
          return Ok(product);
      }
  </code></pre>
  
  <p>Here is my MVC controller:</p>
  
  <pre><code>  public IActionResult Details(int id)
      {
          var vm = new ProductDetailsViewModel()
          {
              Id = id;
          };
          return View(vm);
      }
  </code></pre>