How to implement manifest cache for mvc application

Question

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.

http://www.codemag.com/Article/1112051.

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.

Please help how to implement manifest in mvc.

Here is the my code:

Home Controller:

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();
        }

Index.cshtml:

<html manifest="@Url.Action("Manifest", "Home")">
<head>
    <title></title>
    <link href="~/Content/kendo/2014.2.903/kendo.common.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2014.2.903/kendo.default.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2014.2.903/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="~/Content/kendo/2014.2.903/kendo.dataviz.default.min.css" rel="stylesheet" />

<script src="~/Scripts/kendo/2014.2.903/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2014.2.903/kendo.angular.min.js"></script>
    <script src="~/Scripts/kendo/2014.2.903/kendo.all.min.js"></script>

    <script src="~/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>

    <div id="grid"></div>
    <button type="button" id="btnOfflineMode">Offline</button>

    <script>


        $("#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 = $("<textarea>");
                        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 < 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();
    </script>

</body>
</html>

Manifest.cshtml:

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;
}

events.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Events</title>
    <link rel="Stylesheet" href="/Content/style.css"
          type="text/css" />
</head>
<body>
    <section>
        <h1>Events</h1>
        <p>
            The event listings are only available when
            you are connected to the internet.
            </p>
        <div id="version">Version 1</div>
    </section>
</body>
</html>

Agaspher · Answer 1 · 2014-09-19T21:00:46.283

0

Try to create file site.maifest in the root folder of your site. And reference it in your html. Like this

<html manifest="site.manifest">

Looks that it will be better to create your _Layout.cshtml logic and place common markup there.

I create an example where everything works good. Here it is on GitHub

edited Sep 19 '14 at 21:00

answered Sep 19 '14 at 12:32

Agaspher

485
3
10

created site.manifest for my solution. and given reference. but not showing any thing in browser application cache – Ram Sep 19 '14 at 12:53
Did you created _ Layout.cshtml and moved common markup in it? – Agaspher Sep 19 '14 at 13:02
already had _Layout.cshtml. common markup means js files and css files? – Ram Sep 19 '14 at 13:05
I mean you should move at least html and body tags into your_Layout.cshtml and use this layout in all your templates. – Agaspher Sep 19 '14 at 14:32
created one sample application. Even its also not working. Here there is no templates. – Ram Sep 19 '14 at 15:00
its not working even one page. nothing is there in application cache. – Ram Sep 19 '14 at 15:01
I added a link to GitHub repository where cache.manifest works. – Agaspher Sep 19 '14 at 21:02

How to implement manifest cache for mvc application

1 Answers1