title: How to implement manifest cache for mvc application
body: <p>I am trying to implement manifest for one page. i don't have any idea how to implement the manifest, using below reference i implemented. but its not working.</p>
  
  <pre><code>http://www.codemag.com/Article/1112051.
  </code></pre>
  
  <p>My doubt: In local after implementing manifest even if visual studio not in debug mode, after refresh the page  it should show the page right? here its not showing.</p>
  
  <p>Please help how to implement manifest in mvc. </p>
  
  <p>Here is the my code:</p>
  
  <p><strong>Home Controller:</strong></p>
  
  <pre><code>public ActionResult Index()
          {
              Response.Cache.SetCacheability(
                 System.Web.HttpCacheability.NoCache);
  
              ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
  
              return View();
          }
          public ActionResult Manifest()
          {
              Response.ContentType = "text/cache-manifest";
              Response.ContentEncoding = System.Text.Encoding.UTF8;
              Response.Cache.SetCacheability(
                  System.Web.HttpCacheability.NoCache);
              return View();
          }
  </code></pre>
  
  <p><strong>Index.cshtml:</strong></p>
  
  <pre><code>&lt;html manifest="@Url.Action("Manifest", "Home")"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" /&gt;
      &lt;link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" /&gt;
      &lt;link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" /&gt;
      &lt;link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" /&gt;
  
  &lt;script src="~/Scripts/kendo/2014.2.903/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="~/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;button type="button" id="btnOfflineMode"&gt;Offline&lt;/button&gt;
  
      &lt;script&gt;
  
  
          $("#grid").kendoGrid({
                          columns: [
               { field: "Name" },
      { field: "Age" },
              { field: "NewCol" }
  
              ],
              dataSource: [
                            { Name: "John Doe", Age: 33 }
              ],
              batch: true,
  
  
          }).on('focus', function (e) {
                          var offset = $(this).offset();
  
              var textarea = $("&lt;textarea&gt;");
                          textarea.css({
                  position: 'absolute',
                  opacity: 0,
                  top: offset.top,
                  left: offset.left,
                  border: 'none',
                  width: $(this).width(),
                  height: $(this).height()
              })
              .appendTo('body')
              .on('paste', function () {
  
  
                  setTimeout(function () {
                  var value = $.trim(textarea.val());
                  var grid = $("#grid").data("kendoGrid");
              var rows = value.split('\n');
  
                      var data = [];
  
                      for (var i = 0; i &lt; rows.length; i++) {
                          var cells = rows[i].split('\t');
  
                          grid.dataSource.add({
                              Name: cells[0],
                              Age: cells[1],
                              NewCol: cells[2]
  
                          });
                      }
                  });
              }).on('blur', function () {
  
              });
  
              setTimeout(function () {
                  textarea.focus();
  
              });
          });
          $("#grid").attr("tabindex", -1).focus();
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Manifest.cshtml:</strong></p>
  
  <pre><code>CACHE MANIFEST
  # version 1
  
  CACHE:
  /
  /Content/kendo/2014.2.903/kendo.common.min.css
  /Content/kendo/2014.2.903/kendo.default.min.css
  /Content/kendo/2014.2.903/kendo.dataviz.min.css
  /Content/kendo/2014.2.903/kendo.dataviz.default.min.css
  /Scripts/kendo/2014.2.903/jquery.min.js
  /Scripts/kendo/2014.2.903/kendo.all.min.js
  /scripts/modernizr-2.6.2.js
  
  
  FALLBACK:
  /events /events.htm
  NETWORK:
  *
  
  @{
      Layout = null;
  }
  </code></pre>
  
  <p><strong>events.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Events&lt;/title&gt;
      &lt;link rel="Stylesheet" href="/Content/style.css"
            type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
          &lt;h1&gt;Events&lt;/h1&gt;
          &lt;p&gt;
              The event listings are only available when
              you are connected to the internet.
              &lt;/p&gt;
          &lt;div id="version"&gt;Version 1&lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>