title: Real-time WebGrid .NET MVC 4
body: <p>i I have this gridview running on partial view but i would like to update the data as on every update of the DB or every 3 seconds?</p>
  
  <p>the partial view gets called from a index.cshtml with just the called and model passed to it.
  @Html.Partial("_CommissionDeskReport", Model)</p>
  
  <p>I tried using javascript but that kept on refreshing the whole page than the partial view.</p>
  
  <p>here is the partial view code and please do advice?</p>
  
  <p>_CommissionDeskReport.cshtml</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@model IEnumerable&lt;Socks.Domain.Models.CommissionDeskReport&gt;
  
  @{
      Layout = null;
      //WebGrid grid = new WebGrid(Model, rowsPerPage: 3);
  }
  
  &lt;h2&gt;Commission Desk Report&lt;/h2&gt;
  
  &lt;div id="EmployeeViewGrid"&gt;
      @{
          var grid1 = new WebGrid(source: Model, canPage: true, ajaxUpdateContainerId: "gridContent");
          @grid1.GetHtml(mode: WebGridPagerModes.All, tableStyle: "webGrid",
              headerStyle: "header",
              alternatingRowStyle: "alt",
              selectedRowStyle: "select",
              rowStyle: "row",
              htmlAttributes: new { id = "employeeGrid" },
              fillEmptyRows: false,
              columns: grid1.Columns(
                  grid1.Column("Period", header: "Period"),
                  grid1.Column("Value", format: (item) =&gt; new HtmlString("£ " + Convert.ToString(item.value)), header: "Value"),
                  grid1.Column("Average", format: (item) =&gt; new HtmlString("£ " + Convert.ToString(item.average)), header: "Average"),
                  grid1.Column("Percent", format: (item) =&gt; new HtmlString(Convert.ToString(item.Percent) + " %"), header: "Percent"))
                  
                  
                  
                  )
      }
  &lt;/div&gt;
  
  &lt;style type="text/css"&gt;
      .row {
          background: #fff;
      }
  
      .header {
          background: #bbb;
      }
  
      .alt {
          background: #d6e3f2;
      }
  
      .webGrid {
          border: 1px solid #bbb;
      }
  
          .webGrid th, .webGrid td {
              padding-left: 10px;
          }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>