How to populate a whole form after ajax GET request?
<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>