title: Jquery and Ajax inside ASP.NET How to update div with model
body: <p>In my app I am sending post request with string value with Jquery, then in controller, passed string value is used to get some data from API.</p>
  
  <p>Next controller returns a view and model with data from API inside. That data from model I want to put inside values of few textboxes.   </p>
  
  <p>The main problem is that I dont know how to refresh that div with model values. When I used post form without jquery and ajax it works but I want to do it asynchronous.</p>
  
  <p>Js script with post request:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      $(document).ready(function () {
  
          $('#btn').click(function () {
  
              var data1 = $('#textBox').val();
  
              $.ajax({
                  url: '/Home/Fill',
                  type: 'POST',
                  dataType: 'string',
                  data: { number:data1 },
                  success: function (data) {
  
                  }
  
              });
  
          });
      });
  </code></pre>
  
  <p></p>
  
  <p>Controller:</p>
  
  <pre><code>[HttpPost]
      public ActionResult Fill(string number)
      {
  
          CompanyInfo Info = new CompanyInfo();
  
          //Here some API actions
  
          return View("Index",Info);
      }
  </code></pre>
  
  <p>Div with model values inside the Index view:</p>
  
  <pre><code>&lt;div id="target"&gt;
  
      &lt;h1&gt;Number:&lt;/h1&gt;
      &lt;input type="text" value="@Html.DisplayFor(m =&gt; m.Num)" id="Number" /&gt;
  
      &lt;br /&gt;
  
      &lt;h1&gt;Company name:&lt;/h1&gt;
      &lt;input type="text" value="@Html.DisplayFor(m=&gt;m.CompanyName)" id="CompanyName" /&gt;
  
      &lt;br /&gt;
  
      &lt;h1&gt;Street Address&lt;/h1&gt;
      &lt;input type="text" value="@Html.DisplayFor(m=&gt;m.StreetAddress)" id="Address" /&gt;
  
  &lt;/div&gt;
  </code></pre>