{"id":3214,"date":"2020-09-02T04:24:55","date_gmt":"2020-09-02T04:24:55","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3214"},"modified":"2020-09-02T05:59:26","modified_gmt":"2020-09-02T05:59:26","slug":"cefsharp-tool-for-web-application","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/","title":{"rendered":"Cefsharp Tool For Web Application"},"content":{"rendered":"

Cefsharp:<\/strong> Great tool to run the web application with Chrome browser in your Window Form application<\/h2>\n

CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application. CefSharp is fast, fully open-source and does not need any extra dependencies to be installed by end-users. You can install CefSharp from the NuGet repository where it is available as CefSharp.WinForms. In this case, project configuration should be either as x86 or x64. Currently, it does not support AnyCPU configuration of the project. Three assembly references CefSharp, CefSharp.Core and CefSharp.WinForms are included with this.<\/p>\n

Below is the basic code to open a site in window forms like at place of , it could be \u201cwww.google.com\u201d<\/p>\n

BrowserForm.cs<\/h3>\n

public partial class BrowserForm : Form
\n{
\n public ChromiumWebBrowser browser;
\n string url = \"\";
\n public void InitBrowser()
\n {
\n Cef.Initialize(new CefSettings());
\n browser = new ChromiumWebBrowser(url) {
\n Dock = DockStyle.Fill,
\n Location = new Point(0, 0),
\n };
\n this.panel1.Controls.Add(browser);
\n browser.LoadingStateChanged += browser_LoadingStateChanged;
\n }
\n public BrowserForm()
\n {
\n this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;
\n InitializeComponent();
\n InitBrowser();
\n }
\n private void browser_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
\n {
\n if (e.IsLoading == false)
\n { \/\/ You can perform something if loading is completed
\n browser.ExecuteScriptAsync(\"alert('frame loaded');\");
\n }
\n }
\n}<\/code><\/p>\n

This code is sufficient to open a simple web application URL but what if you want to open a web page based on some URL parameters dynamically. As a sample scenario, I have a list of documents stored in our application and a window form application displays a list of documents in the left container in ListBox and on the right pane it displays contents of that file from a web app page.<\/p>\n

\"Document\"\/<\/p>\n

I want to reload the app page based on the parameters passed in URL, for that I simply invoke the Load method of ChromiumWebBrowser instance as shown below:<\/p>\n

public void ShowDocument(string documentId)
\n {
\n browser.Load(url + \"?=\"++\"&=\" + );
\n }<\/code><\/p>\n

Here on selection change event of ListBox in left pane, method ShowDocument is invoked and right pane renders the fresh app page in BrowserForm<\/p>\n

But if we don\u2019t want to load the page every time and just load the page once and then refresh the page content, then we can simply write a method on client-side in web application that we can invoke through window forms application like this:<\/p>\n

public void ShowDocument(string documentId)
\n {
\n if (browser!=null && browser.IsLoading==false && browser.IsBrowserInitialized==true )
\n {
\n \/\/ browser property .IsBrowserInitialized should be true to invoke method from web app
\n string script = \"runWebAppInWindow('\"+ documentId + \"','\"+ otherinfo + \"')\";
\n browser.ExecuteScriptAsync(script);
\n \/\/ runWebAppInWindow() is some method on client side of web app that can be simply
\n \/\/invoked along with parameters with code above code statements
\n }
\n }<\/code><\/p>\n

There could be a variety of browser operations that could not simply run in Window Forms. One of such operation is download operation which is discussed below:- <\/p>\n

Handling Download operation in a web app :<\/h3>\n

To make the download operation work from the web page and let users save the document at the required location, CefSharp download handler needs to be inherited and it can be made working by adding the following handler in your application.<\/p>\n

public class DownloadHandler : IDownloadHandler
\n {
\n public event EventHandler OnBeforeDownloadFired;
\n public event EventHandler OnDownloadUpdatedFired;
\n public void OnBeforeDownload(IWebBrowser chromiumWebBrowser, IBrowser browser,
\n DownloadItem downloadItem, IBeforeDownloadCallback callback)
\n {
\n OnBeforeDownloadFired?.Invoke(this, downloadItem);
\n if (!callback.IsDisposed)
\n {
\n using (callback)
\n {
\n callback.Continue(downloadItem.SuggestedFileName, showDialog: true);
\n }
\n }
\n }
\n public void OnDownloadUpdated(IWebBrowser chromiumWebBrowser, IBrowser browser,
\n DownloadItem downloadItem, IDownloadItemCallback callback)
\n {
\n OnDownloadUpdatedFired?.Invoke(this, downloadItem);
\n }
\n}<\/code><\/p>\n

You will need to attach this download handler as shown below in InitBrowser() method mentioned on top in BrowserForm class:<\/p>\n

browser.DownloadHandler = downer;<\/code><\/p>\n

But one of the other issue that was appearing in my case was: appearing blank popup along with download dialog, which remains even after download dialog finishes its execution(or is canceled)<\/p>\n

\"savefile\"\/<\/p>\n

To resolve this issue, I had to manually close the popup after download completion or cancellation by adding the statement browser.CloseBrowser(true);<\/em><\/strong> in the OnDownloadUpdated event of the download handler.<\/p>\n

public void OnDownloadUpdated(IWebBrowser chromiumWebBrowser, IBrowser browser,
\n DownloadItem downloadItem, IDownloadItemCallback callback)
\n {
\n OnDownloadUpdatedFired?.Invoke(this, downloadItem);
\n \/\/ download complete \/ cancel operation condition to go for popup close
\n if ((downloadItem.IsComplete == true || downloadItem.IsCancelled==true) &&
\n browser.IsPopup==true)
\n {
\n browser.CloseBrowser(true);
\n }
\n }<\/code><\/p>\n

People having good command over the French language can get a French certification from StudySection. StudySection offers both beginner level and expert level French certification exams<\/a> to test the ability to communicate in the French language.<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

Cefsharp: Great tool to run the web application with Chrome browser in your Window Form application CefSharp is a web<\/p>\n","protected":false},"author":1,"featured_media":3218,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[265,534],"acf":[],"yoast_head":"\nStudySection Blog - Cefsharp Tool For Web Application<\/title>\n<meta name=\"description\" content=\"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"StudySection Blog - Cefsharp Tool For Web Application\" \/>\n<meta property=\"og:description\" content=\"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-02T04:24:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-02T05:59:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/cef.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Cefsharp Tool For Web Application\",\"datePublished\":\"2020-09-02T04:24:55+00:00\",\"dateModified\":\"2020-09-02T05:59:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\"},\"wordCount\":504,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"application\",\"Cefsharp\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\",\"url\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\",\"name\":\"StudySection Blog - Cefsharp Tool For Web Application\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2020-09-02T04:24:55+00:00\",\"dateModified\":\"2020-09-02T05:59:26+00:00\",\"description\":\"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cefsharp Tool For Web Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"StudySection Blog - Cefsharp Tool For Web Application","description":"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/","og_locale":"en_US","og_type":"article","og_title":"StudySection Blog - Cefsharp Tool For Web Application","og_description":"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.","og_url":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2020-09-02T04:24:55+00:00","article_modified_time":"2020-09-02T05:59:26+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2020\/09\/cef.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Cefsharp Tool For Web Application","datePublished":"2020-09-02T04:24:55+00:00","dateModified":"2020-09-02T05:59:26+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/"},"wordCount":504,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["application","Cefsharp"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/","url":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/","name":"StudySection Blog - Cefsharp Tool For Web Application","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2020-09-02T04:24:55+00:00","dateModified":"2020-09-02T05:59:26+00:00","description":"CefSharp is a web browser component that is based on Chromium. It can be reliably used to embed a web app page into your C# application.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/cefsharp-tool-for-web-application\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cefsharp Tool For Web Application"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":1179,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3214"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=3214"}],"version-history":[{"count":1,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3214\/revisions"}],"predecessor-version":[{"id":3217,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/3214\/revisions\/3217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/3218"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=3214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=3214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=3214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}