title: Refresh updated data in MVC partial view
body: <p>I have a partial view that allows me to retrieve and edit data from a database using a strongly typed view.</p>
  
  <p>My model:</p>
  
  <pre><code>  public partial class Associate
  {
      public Associate()
  
      public int ID { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
  ....
  </code></pre>
  
  <p>and</p>
  
  <pre><code>public Associate GetRow(int count)
      {
          Associate a = new Associate();
          var query = from rows in db.Associates orderby rows.ID select rows;
          if (count &gt; 0)
          {
              foreach (var row in query.Skip(count - 1).Take(1))
              {
                  a = row;
              }
              return a;
          }
  ....
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code> public ActionResult GetRow(int count)
      {
          return PartialView("Edit", new MVC.Models.Associate().GetRow(count));
      }
  
      [HttpPost]
      public ActionResult Edit(Associate associate)
      {
          if (ModelState.IsValid)
          {
              db.Entry(associate).State = EntityState.Modified;
              db.SaveChanges();
              return PartialView("Edit",associate);
          }
          return RedirectToAction("../Error");
      }
  </code></pre>
  
  <p>My Index view:</p>
  
  <pre><code>   &lt;script&gt;
      $(document).ready(function () {
       $('#record').change(function () {
      if (/^[0-9]+$/.test($("#record").val()) == true) {
          $.ajax({
              type: "POST",
              url: "Associate/GetRow",
              data: { count: $('#record').val() },
              success: function (data) {
                  $('#FormContainer').html(data)
              },
              error: function (result) {
                  alert(result.responseText);
              }
          });
      }
  })  
     });
     &lt;/script&gt;
  
  &lt;div id="FormContainer"&gt;
  &lt;/div&gt;
  &lt;input type=text id="record" style="width:3em; top:-0.7em;position:relative" /&gt;
  </code></pre>
  
  <p>and my Partial View:</p>
  
  <pre><code>  @model MVC.Models.Associate
  
  
   &lt;script type="text/javascript" &gt;
  .....
   var form = $('#form1');
                  $.ajax({
                      type: form.attr('method'),
                      url: form.attr('action'),
                      data: form.serialize(),
                      success: function (data) {
                      },
                      error: function (result) {
                          alert(result.responseText);
                      }
                  });
  ....
  &lt;/script&gt;
   @using (Html.BeginForm("Edit", "Associate", FormMethod.Post, new { id = "form1" }))
  {
  @Html.ValidationSummary(true)
  &lt;fieldset&gt;
      &lt;legend&gt;Contacts&lt;/legend&gt;
      @Html.HiddenFor(model=&gt;model.ID)
          &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.FirstName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.FirstName)
          @Html.ValidationMessageFor(model =&gt; model.Type)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
          @Html.LabelFor(model =&gt; model.LatName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
          @Html.EditorFor(model =&gt; model.LastName)
          @Html.ValidationMessageFor(model =&gt; model.LastName)
          &lt;/div&gt;
  .....
  </code></pre>
  
  <p>When I enter a new value into the #record input on the index form the Associates/GetRow returns the correct associate - this is working. The ajax function to update the record is called when the form loses the focus(code not shown). When I edit a field on the form and move the focus the underlying data in the database is changed to the new value - so both retrieving records and updating records is working.</p>
  
  <p>However when I edit one record then move to the next record and then back to the edited record the updated values in the edited record are not shown. So the Associates/GetRow action returns the old values rather than getting the new values from the database. Or if I edit a field then manually or by code refresh the entire page or the partial view the new value is replaced with the old value even though the new value is stored in the underlying database.</p>
  
  <p>I've tried 
          [OutputCache(Duration=0)] in my controller with no success.</p>
  
  <p>Any suggestions would be much appreciated.</p>
  
  <p>UPDATE 1:</p>
  
  <p>The response headers are:</p>
  
  <p>server: asp.net development server/10.0.0.0</p>
  
  <p>date: sun, 08 sep 2013 19:21:16 gmt</p>
  
  <p>x-aspnet-version: 4.0.30319</p>
  
  <p>x-aspnetmvc-version: 3.0</p>
  
  <p>cache-control: private</p>
  
  <p>content-type: text/html; charset=utf-8</p>
  
  <p>content-length: 2910</p>
  
  <p>connection: close</p>
  
  <p>If I close the browser window and clear cached web pages including form input and even Ctrl and F5 on my project to rebuild the web page the old data is still shown.  The only way I have found to show the new data is to make a change to the project and save the change then rebuild the project. Then the new data is shown.</p>
  
  <p>UPDATE 2:</p>
  
  <p>I have found another way to display the new data which might show what's going on. I have changed my Index View to include:</p>
  
  <pre><code> &lt;div id="FormContainer"&gt;
   @Html.Partial("Edit", new MVC.Models.Associate().GetRow(1))
   &lt;/div&gt;
  </code></pre>
  
  <p>and then edit the first record.
  When I edit the first record then move to a new record and back using the #record input the old values are still displayed. However if I manually refresh the page the new values are now displayed for the first record. </p>
  
  <p>When I include the code you suggested in the GetRow function the new values are not displayed even if I refresh the page with the changes to the index view above.</p>
  
  <p>UPDATE 3:</p>
  
  <p>I've changed my index view as shown:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      $('#Button1').click(function(){
          RefreshPartial();
      })
   });
  
    function RefreshPartial() {
      $('#FormContainer').load('/Associate/GetRow', {count:1});    
    }
  &lt;/script&gt;
   &lt;input id="Button1" type="button" value="button" /&gt;
   &lt;div id="FormContainer"&gt;
    @Html.Partial("Edit",new MVC.Models.Associate().GetRow(1))
   &lt;/div&gt;
  </code></pre>
  
  <p>so now I have two alternative ways to get the first record.  </p>
  
  <p>If I edit a field in the record then click the button the RefreshPartial function runs and the new value is replaced with the old value. If I then refresh the page so the @Html.Partial code runs the old value is replaced with the new value. If I close the browser and reopen it the old value is displayed in all circumstances.</p>
  
  <p>All the time the value in the underlying database is the new value.</p>
  
  <p>UPDATE 4</p>
  
  <p>As PaulD'Ambra pointed out below, my GetRow should have been getting an item from the model rather than being part of the model.  This is the GetRow controller action that works to retrieve the record from the database:</p>
  
  <pre><code> public ActionResult GetRow(int count)
      {
          Associate a = new Associate();
          var query = from rows in db.Associates orderby rows.ID select rows;
          if (count &gt; 0)
          {
              foreach (var row in query.Skip(count - 1).Take(1))
              {
                  a = row;
                  a.record_count = count;
              }
          }
          else
          {
              foreach (var row in query.Skip(query.Count() + 1).Take(1))
              {
                  a = row;
                  a.record_count = count;
              }
          }
          return PartialView("Edit", a);
      }
  </code></pre>