Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Tuesday, March 7, 2017

JavaScript - Simple Export to excel

To export excel in JavaScript without any server side techiques, we can use following steps

Used blob file saver for download https://github.com/eligrey/FileSaver.js

Step 1: Create Html Content with required styles as below

var tableHtml = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
        tableHtml += '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets>';
        tableHtml += '<x:ExcelWorksheet><x:Name>PlanFundLineup</x:Name>';
        tableHtml += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
        tableHtml += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
  tableHtml += "<div><table  border='1'>" +
        tableHtml += "<thead>" +
        tableHtml += "<tr><th>" +
        tableHtml += "Header Text" +
        tableHtml += "</th></tr>" +
 tableHtml += "</thead>" +
               "<tbody>" +
        tableHtml += "<tr><td>" +
        tableHtml += "Content Text" +
        tableHtml += "</td></tr>" +
               "</tbody>" +
              "</table></div>";
        tableHtml += '</body></html>';

Step 2: Download this html content using blob

var blob = new Blob([tableHtml], { type: "application/vnd.ms-excel;charset=utf-8" })
window.saveAs(blob, "excelname.xls");


Posted by at No comments:
Labels: , , , ,

Tuesday, June 28, 2016

AngularJS - BootStrap Popover Directive

In some cases we need to show some popover as tooltip or as dialog

Here am going to use BootStrap Popover, this plugin is part of BootStrap.js file or we can include spearately. For more information about that read here 

I am going to create simple popover

Step 1; Create your html pages, include BootStrap js files, AngularJS, JQuery basic setups

Step 2: Here is what I created directive to make PopOver work with AngularJS, add this directive to your application

var app = angular.module('appModuleName');

app.directive('popover', ['$compile',function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).popover({
                html: true,
                title:  attrs.popoverTitle || "Header",
                content: function () {
                    return $compile($("#" + attrs.popoverContent).html())(scope);
                },
                placement: attrs.popoverPlacement || "top"
            });
        }
    };

}]);


Step 3: In your HTML, just use this directive and pass attributes

<input type="button" popover popover-title="Header Text" popover-content="popover-content-id" popover-placement="top"/>

Step 4: Here you can pass your Title, ContentId, placement (Top, Bottom, Right, Left) etc.  This popover-content-id is div with contents

  <div id="popover-content-id" class="hide">
Some content here..
  </div>

Posted by at 11 comments:
Labels: , , ,

Friday, May 15, 2015

MVC - Cache dynamic files in browser based on query string from action results

To cache we can do many things such as StaticCache in webconfig, HTML5 manifest cache and also we can use OutputCache in MVC.

To enable cache for dynamically changing contents. For ex, to load images based on file name and to cache use following attribute in controller or action.


        [HttpGet]
        [OutputCache(Duration = 600, VaryByParam = "imageFileName")]
        public FileResult GetSomeImageFile(string imageFileName)
        {
//your logic to load image file

 }

Here Duration mentioned in seconds and VaryByParam property to specify to cache based on parameter name 'imageFileName'
Posted by at No comments:
Labels: ,

Tuesday, March 24, 2015

MVC - HTML5 Appcache for offline MVC Razor application

I would like to create application which support offline mode using HTML5 appcache. Before get into MVC offline mode, just read about HTML5 application cache 

Steps to create MVC HTML5 Offline application

1) Create new MVC Web project


2) For example purpose, i am using views created by default with MVC project. I am adding new action for Manifest file

2) On created Manifest.cshtml add code as required to do cache in browser

 - Here i removed layout 
 - Also set the content type as 'text/cache-manifest', so that browser will understand this file
 - CACHE MANIFEST is required syntax for manifest file
 - #version added with assembly file name and date. This will help to update cache automatically whenever new build happens
 - NETWORK is *
 - Under CACHE we can do whatever required. Here JS files, CSS files, Images, CSHTML pages, Other site resources added
 - FALLBACK added to logoff, if there is no connection for logoff then it will return error page instead
- Code
@{
    Layout = null;
}

@{
    HttpContext.Current.Response.ContentType = "text/cache-manifest";
}CACHE MANIFEST

    #version @System.Reflection.Assembly.GetExecutingAssembly().GetName().Version - @File.GetCreationTime(System.Reflection.Assembly.GetExecutingAssembly().Location).ToString("MM/DD/YYYY")

    NETWORK:
    *

    CACHE:
    # JS files
    @Url.Content("~/Scripts/jquery-1.10.2.min.js")

    # CSS files
    @Url.Content("~/Content/bootstrap.min.css")
    @Url.Content("~/Content/site.css")
   

    #Images
    @*@Url.Content("~/Content/images/logo.png")*@

    #CSHTMLPages
    @Url.Content("~/Home/Index")
    @Url.Content("~/Home/About")
    @Url.Content("~/Home/Contact")

    #Other Site Resources
    @Url.Content("http://fonts.googleapis.com/css?family=Roboto:00,400,700,300")

    FALLBACK:
    @Url.Content("~/Account/LogOff") @Url.Content("~/Errors/Default.html")




 3) Include this manifest file path in _Layout.cshtml page html tag section


4) If you run application we will get error then we should know what is that

5) So we can add appcache.js file under script folder add following code to verify error 


- Code

var appCache = window.applicationCache;

appCache.addEventListener('cached', function (event) {
    console.log('All files downloaded!');
}, false);

// Checking for an update. Always the first event fired in the sequence.
appCache.addEventListener('checking', function (event) {
    console.log('Checking for manifest!');
}, false);

// An update was found. The browser is fetching resources.
appCache.addEventListener('downloading', function (event) {
    console.log('Downloading cache!');
}, false);

// The manifest returns 404 or 410, the download failed,
// or the manifest changed while the download was in progress.
appCache.addEventListener('error', function (event) {
    console.log('An error occurred!');
}, false);

// Fired after the first download of the manifest.
appCache.addEventListener('noupdate', function (event) {
    console.log('No cache updates!');
}, false);

// Fired if the manifest file returns a 404 or 410.
// This results in the application cache being deleted.
appCache.addEventListener('obsolete', function (event) {
    console.log('Manifest cannot be found!');
}, false);

// Fired for each resource listed in the manifest as it is being fetched.
appCache.addEventListener('progress', function (e) {
    console.log('File downloaded!');
}, false);


// Fired when the manifest resources have been newly redownloaded.
appCache.addEventListener('updateready', function (e) {
    console.log('New cache available!');
    //appCache.swapCache();
}, false);



6) Include appcache.js in _layout.cshtml


7) If we run application and check in console of browser, we can see logs of this appcache and thats it.



Posted by at 1 comment:
Labels: , ,
Subscribe to: Posts (Atom)