{"id":864,"date":"2013-12-19T15:52:00","date_gmt":"2013-12-19T15:52:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/12\/19\/building-a-basic-web-forms-application-using-visual-studio-2013\/"},"modified":"2022-08-09T03:02:35","modified_gmt":"2022-08-09T10:02:35","slug":"building-a-basic-web-forms-application-using-visual-studio-2013","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/building-a-basic-web-forms-application-using-visual-studio-2013\/","title":{"rendered":"Building a basic Web Forms application using Visual Studio 2013"},"content":{"rendered":"<p>In a previous <a title=\"ASP.NET features in New Project Templates in Visual Studio 2013\" href=\"http:\/\/blogs.msdn.com\/b\/webdev\/archive\/2013\/10\/16\/asp-net-features-in-new-project-templates-in-visual-studio-2013.aspx\" target=\"_blank\" rel=\"noopener\">blog post<\/a>, we have described the different options you have when creating a new web application with Visual Studio 2013 (VS 2013) and provided an overview of the various ASP.NET features and NuGet packages present in the templates.<\/p>\n<p>In this post, I am going to take a specific template in VS 2013, namely the Web Forms template with no authentication, and describe how to build this project from scratch. At the end of the tutorial, you will end up with a template with content that is pretty much the same as creating a new VS 2013 project using Web Forms template with no authentication (File &gt; New Project &gt; ASP.NET Web Application (Visual C#) &gt; Web Forms &gt; No Authentication).<\/p>\n<p>As we go through this post, you can see where and how different web technologies are leveraged by the template, which you can take and similarly apply in your existing web projects as you need.<\/p>\n<h2>Steps to create the Web Forms (No Auth) project from scratch<\/h2>\n<h3>1. New Empty 4.5 CS<\/h3>\n<p>We start with the simplest web template: Open Visual Studio, File &gt; New Project &gt; ASP.NET Web Application (Visual C#) and provide a name for your project (eg: WebFormsNoAuth). In the ASP.NET project creation dialog, select &ldquo;Empty&rdquo; template without any additional options and hit OK.<\/p>\n<h3>2. Add basic master \/ content pages and style them with bootstrap<\/h3>\n<blockquote>\n<p>a. Install NuGet package : bootstrap<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;bootstrap&rdquo;.<\/li>\n<li>Note that as this automatically pulls down its dependent NuGet package : jQuery<\/li>\n<li>You can read more here about the <a title=\"Bootstrap in the Visual Studio 2013 web project templates\" href=\"http:\/\/www.asp.net\/visual-studio\/overview\/2013\/creating-web-projects-in-visual-studio#bootstrap\" target=\"_blank\" rel=\"noopener\">advantages of styling and theming your website using Bootstrap<\/a>. \n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/8686.InstallBootstrap-Console_thumb_087EE190.png\"><img decoding=\"async\" title=\"InstallBootstrap-Console\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/8686.InstallBootstrap-Console_thumb_087EE190.png\" alt=\"InstallBootstrap-Console\" width=\"538\" height=\"202\" border=\"0\" \/><\/a> <\/li>\n<\/ul>\n<p>b. Add basic master page and content pages to your site<\/p>\n<ul>\n<li>Next we add the basic master page <span style=\"color: #000000\"><a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/Site.Master\" target=\"_blank\" rel=\"noopener\">Site.Master<\/a><\/span> and content pages : <span style=\"color: #000000\"><a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/Default.aspx\" target=\"_blank\" rel=\"noopener\">Default.aspx<\/a><\/span>, <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/About.aspx\" target=\"_blank\" rel=\"noopener\">About.aspx<\/a><span style=\"color: #000000\"> and <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/Contact.aspx\" target=\"_blank\" rel=\"noopener\">Contact.aspx<\/a><\/span><\/li>\n<\/ul>\n<p>c. Add <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/Content\/Site.css\" target=\"_blank\" rel=\"noopener\">Site.css<\/a> and style your pages using bootstrap and Site.css&nbsp;&nbsp;&nbsp;<\/p>\n<ul>\n<li>Notice that it is really easy to do styling with Bootstrap &ndash; you just needed the bootstrap files in your project (installed by the bootstrap NuGet package), and then reference the bootstrap.css and jQuery \/ bootstrap.js in Site.Master.<\/li>\n<li>We then use many Bootstrap css classes to do the styling in pages like Site.Master (eg: navbar, navbar-collapse) and Default.aspx (eg: col-md-4, btn).<\/li>\n<li>We also added a Site.css to add some custom styles. You can also add styles in Site.css to override styles already defined in Bootstrap. That way, if you update your Bootstrap version in the future, your overrides in Site.css remain.<\/li>\n<\/ul>\n<p>d. Add favicon.ico<\/p>\n<ul>\n<li>We added a <a title=\"Favicon wikipedia\" href=\"http:\/\/en.wikipedia.org\/wiki\/Favicon\" target=\"_blank\" rel=\"noopener\">favicon.ico file<\/a> that many browsers will use to show in the address bar or browser tab next to your site&rsquo;s URL.<\/li>\n<\/ul>\n<\/blockquote>\n<p>At the end of this stage, you can try to F5 your project and see that you have a fully functional web application with basic pages. The pages are styled with Bootstrap and are responsive to different browser sizes. The project is fairly simple with a clean <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/Web.config\" target=\"_blank\" rel=\"noopener\">Web.config<\/a>, and just 2 NuGet packages in <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\/WebFormsNoAuth\/packages.config\" target=\"_blank\" rel=\"noopener\">packages.config<\/a> : bootstrap and jQuery.<\/p>\n<p>You can view the full code at this stage in the Git repo <a title=\"Add basic pages and Site.css, wire up styles in Site.master\" href=\"https:\/\/github.com\/balaTest\/BlogPosts\/tree\/1a2ff39641232cf90bab203f1fcfbfcd7d824480\/WebFormsNoAuth\" target=\"_blank\" rel=\"noopener\">here<\/a>.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/p>\n<h3>3. Add friendly urls<\/h3>\n<p>When you view a page like Contact.aspx in the browser, you can see that the extension &ldquo;.aspx&rdquo; still shows up at the end of the URL (eg: http:\/\/localhost:14480\/Contact.aspx). We can change this to generate a friendly URL without extensions, and add routing to your web application (similar to MVC projects) by using ASP.NET Friendly Urls.<\/p>\n<p><a title=\"Introducing ASP.NET Friendly Urls\" href=\"http:\/\/www.asp.net\/aspnet\/overview\/friendly-urls\" target=\"_blank\" rel=\"noopener\">ASP.NET Friendly Urls<\/a> also add View switching functionality so you can easily between a mobile view and desktop view.<\/p>\n<p>To enable Friendly Urls in our application:<\/p>\n<blockquote>\n<p>a. Install NuGet package : Microsoft.AspNet.FriendlyUrls<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;Microsoft.AspNet.FriendlyUrls&rdquo;<\/li>\n<li>Note that this automatically pulls down its dependent NuGet package : Microsoft.AspNet.FriendlyUrls.Core<\/li>\n<li>If you do not have an existing RouteConfig class (like in our project), a new <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/62714256e32caca2bb2f435529754b6b83935e00\/WebFormsNoAuth\/WebFormsNoAuth\/App_Start\/RouteConfig.cs\" target=\"_blank\" rel=\"noopener\">RouteConfig.cs<\/a>file will get added for you. If you already have an existing RouteConfig class in your project, you should call EnableFriendlyUrls() in your RegisterRoutes method *before* any existing route registrations.<\/li>\n<li>It automatically adds a Site.Mobile.Master and ViewSwitcher.ascx user control to help you easily add mobile views for your Web Forms project.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <\/li>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/6545.InstallFriendlyUrls-Console_thumb_1D04310E.png\"><img decoding=\"async\" title=\"InstallFriendlyUrls-Console\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/6545.InstallFriendlyUrls-Console_thumb_1D04310E.png\" alt=\"InstallFriendlyUrls-Console\" width=\"783\" height=\"271\" border=\"0\" \/><\/a><\/li>\n<\/ul>\n<p>b. Add <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/62714256e32caca2bb2f435529754b6b83935e00\/WebFormsNoAuth\/WebFormsNoAuth\/Global.asax.cs\" target=\"_blank\" rel=\"noopener\">Global.asax<\/a> and call RouteConfig.RegisterRoutes method<\/p>\n<\/blockquote>\n<p><!--EndFragment--><\/p>\n<p>Now you can F5 your project again and see that the website uses ASP.NET routing and the URLs show up without the .aspx extension (eg: http:\/\/localhost:14480\/Contact). You can also fixup the links in Site.Master to reference the friendly URL instead.<\/p>\n<p>You can view the full code at this stage in the Git repo <a title=\"Add Friendly Urls\" href=\"https:\/\/github.com\/balaTest\/BlogPosts\/tree\/2aa4347a62172f1d2fdc6a89d93785b37f9eb41e\/WebFormsNoAuth\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3>4. Enable Web Optimization techniques such as Bundling and Minification<\/h3>\n<p>Bundling and minification are two web optimization techniques you can use in ASP.NET 4.5 to improve request load time. <a title=\"Bundling and Minification\" href=\"http:\/\/www.asp.net\/mvc\/tutorials\/mvc-4\/bundling-and-minification\" target=\"_blank\" rel=\"noopener\">Bundling and Minification<\/a> improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript). You can also learn more about <a href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=303951\" target=\"_blank\" rel=\"noopener\">adding Bundling and Minification to Web Forms<\/a>.<\/p>\n<p>To enable bundling and minification in our application:<\/p>\n<blockquote>\n<p>a. Install NuGet package : Microsoft.AspNet.Web.Optimization.WebForms<\/p>\n<ul><!--StartFragment--><\/p>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;Microsoft.AspNet.Web.Optimization.WebForms&rdquo;<\/li>\n<li>Note that this automatically pulls down several dependent NuGet packages : Microsoft.Web.Infrastructure, Antlr, Newtonsoft.Json, WebGrease, Microsoft.AspNet.Web.Optimization,<\/li>\n<li>Web.config gets updated to add the new assemblies to your application \n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/7043.InstallAspNetWebOpt-WebConfigChanges_thumb_6629DCC7.png\"><img decoding=\"async\" title=\"InstallAspNetWebOpt-WebConfigChanges\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/7043.InstallAspNetWebOpt-WebConfigChanges_thumb_6629DCC7.png\" alt=\"InstallAspNetWebOpt-WebConfigChanges\" width=\"643\" height=\"169\" border=\"0\" \/><\/a><\/li>\n<\/ul>\n<p>b. Set up bundling of the CSS files<\/p>\n<ul>\n<li>Add a <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/4eda05c09524b585c6f74ddfb421b5d148e5cc9f\/WebFormsNoAuth\/WebFormsNoAuth\/Bundle.config\" target=\"_blank\" rel=\"noopener\">Bundle.config<\/a> file to your project and define the CSS bundle<\/li>\n<li>Add the System.Web.Optimization namespace to web.config<\/li>\n<li>Replace the CSS references in Site.Master with the webopt:BundleReference control \n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/0216.CssBundling-1_thumb_0C8BC013.png\"><img decoding=\"async\" title=\"CssBundling-1\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/0216.CssBundling-1_thumb_0C8BC013.png\" alt=\"CssBundling-1\" width=\"718\" height=\"331\" border=\"0\" \/><\/a> <br \/><span style=\"color: #9b00d3\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/><\/span><span style=\"color: #000000\"><span style=\"color: #333333\">At this stage, if you F5 and view the page in your browser, and use the F12 tools to inspect the HTTP requests, you will see that the CSS files are <em><span style=\"text-decoration: underline\">not bundled yet<\/span><\/em>. <\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/6813.F12-OptNotEnabled_thumb_08153F4C.png\"><img decoding=\"async\" title=\"F12-OptNotEnabled\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/6813.F12-OptNotEnabled_thumb_08153F4C.png\" alt=\"F12-OptNotEnabled\" width=\"693\" height=\"176\" border=\"0\" \/><\/a> <br \/><\/span><\/span><\/li>\n<\/ul>\n<p>c. Turn on bundling and minification<\/p>\n<ul>\n<li>To turn on bundling and minification, you can simply do this by setting the debug attribute to false in web.config <\/li>\n<li>Alternatively, you can override the Web.config by setting with the EnableOptimizations property on the BundleTable class. So, if you want to turn on bundling and minification with debug=true, then add a <a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/4eda05c09524b585c6f74ddfb421b5d148e5cc9f\/WebFormsNoAuth\/WebFormsNoAuth\/App_Start\/BundleConfig.cs\" target=\"_blank\" rel=\"noopener\">BundleConfig.cs<\/a> file to your App_Start folder with the following code. <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/li>\n<li>You then need to update Global.asax to call BundleConfig.RegisterBundles <br \/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br \/><span style=\"color: #9b00d3\"><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/7077.CssBundling-2_thumb_1C9A8ECA.png\"><img decoding=\"async\" title=\"CssBundling-2\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/7077.CssBundling-2_thumb_1C9A8ECA.png\" alt=\"CssBundling-2\" width=\"707\" height=\"417\" border=\"0\" \/><\/a> \n<p><\/span><span style=\"color: #000000\"><span style=\"color: #333333\">At this stage, if you F5 and view the page in your browser, and use the F12 tools to inspect the HTTP requests, you will see that the CSS files are now bundled and minified. <\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/2703.F12-OptEnabled_thumb_03328B90.png\"><img decoding=\"async\" title=\"F12-OptEnabled\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/2703.F12-OptEnabled_thumb_03328B90.png\" alt=\"F12-OptEnabled\" width=\"660\" height=\"176\" border=\"0\" \/><\/a> <br \/><\/span><\/span><\/li>\n<\/ul>\n<\/blockquote>\n<p>You can view the full code at this stage in the Git repo <a title=\"Enable bundling and minification of css files\" href=\"https:\/\/github.com\/balaTest\/BlogPosts\/tree\/4eda05c09524b585c6f74ddfb421b5d148e5cc9f\/WebFormsNoAuth\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3>5. Use ScriptManager control with Web Optimization<\/h3>\n<p>The <a title=\"ASP.NET 4.5 ScriptManager Improvements in WebForms\" href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=301884\" target=\"_blank\" rel=\"noopener\">ScriptManger control in ASP.NET 4.5<\/a> makes it easier to register, manage and combine scripts using the ASP.NET WebOptimization feature.<\/p>\n<p><strong>Easy Integration with JQuery and Bootstrap<\/strong><\/p>\n<p>With ScriptManager control, you can enjoy various benefits such as :<\/p>\n<ul>\n<li>Debug\/Release support<\/li>\n<li>CDN support<\/li>\n<li>Override Script Mappings<\/li>\n<li>Easily updating Jquery \/ bootstrap libraries<\/li>\n<\/ul>\n<p>Here are the steps to add ScriptManager control to the application:<\/p>\n<blockquote>\n<p>a. Install NuGet package : AspNet.ScriptManager.jQuery<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;AspNet.ScriptManager.jQuery&rdquo;<\/li>\n<li>Note that this updates jQuery to the matching version<\/li>\n<\/ul>\n<p>b. Install NuGet package : AspNet.ScriptManager.bootstrap<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;AspNet.ScriptManager.bootstrap&rdquo;<\/li>\n<\/ul>\n<p>c. Update references in Site.Master to use the ScriptManager control<\/p>\n<ul>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/4375.ScriptManager-SiteMaster_thumb_45A52DC6.png\"><img decoding=\"async\" title=\"ScriptManager-SiteMaster\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/4375.ScriptManager-SiteMaster_thumb_45A52DC6.png\" alt=\"ScriptManager-SiteMaster\" width=\"727\" height=\"194\" border=\"0\" \/><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<p><strong>Remapping Framework scripts<\/strong><\/p>\n<p>One feature in ASP.NET 4.5 is the decoupling of the &ldquo;Microsoft Ajax script files(MicrosoftAjaxCore etc)&rdquo; and the WebForms scripts(GridView.js etc). You can serve these scripts from your application Scripts folder rather than load then up from System.Web. This makes the scripts easily redistributable and updateable.<\/p>\n<p>Following are the steps to remap framework scripts. <a title=\"ASP.NET 4.5 ScriptManager Improvements in WebForms\" href=\"http:\/\/go.microsoft.com\/fwlink\/?LinkID=301884\" target=\"_blank\" rel=\"noopener\">See &#8216;Remapping Framework scripts&#8217; section here<\/a> for more details on this feature.<\/p>\n<blockquote>\n<p>a. Install NuGet package : AspNet.ScriptManager.MSAjax<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;AspNet.ScriptManager.MSAjax&rdquo;<\/li>\n<li>This installs the scripts locally in your application&rsquo;s ScripsWebFormsMSAjax folder<\/li>\n<\/ul>\n<\/blockquote>\n<blockquote>\n<p>b. Install NuGet package : AspNet.ScriptManager.WebForms<\/p>\n<ul><!--StartFragment--><\/p>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;AspNet.ScriptManager.WebForms&rdquo;<\/li>\n<li>This installs the scripts locally in your application&rsquo;s ScripsWebForms folder<\/li>\n<p><!--EndFragment--><\/ul>\n<\/blockquote>\n<blockquote>\n<p>c. Add the installed js files to a bundle in BundleConfig.cs and then reference the bundle from Site.Master.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/4380.RemapFxScripts-Diff_thumb_251DEE14.png\"><img decoding=\"async\" title=\"RemapFxScripts-Diff\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/4380.RemapFxScripts-Diff_thumb_251DEE14.png\" alt=\"RemapFxScripts-Diff\" width=\"793\" height=\"554\" border=\"0\" \/><\/a><\/p>\n<\/blockquote>\n<p>You can view the full code at this stage in the Git repo <a title=\"Add ScriptManager support, remap framework scripts\" href=\"https:\/\/github.com\/balaTest\/BlogPosts\/tree\/4998efcbeb49a04a7c8b0a23f2565b0c01045784\/WebFormsNoAuth\" target=\"_blank\" rel=\"noopener\">here<\/a>.<\/p>\n<h3>6. Add Modernizr for HTML and CSS feature detection<\/h3>\n<p><a title=\"Modernizr.com\" href=\"http:\/\/modernizr.com\/\" target=\"_blank\" rel=\"noopener\">Modernizr<\/a> is a small JavaScript library for feature detection of HTML5 \/ CSS3.<\/p>\n<blockquote>\n<p>a. Install <a title=\"Modernizr on NuGet gallery\" href=\"https:\/\/www.nuget.org\/packages\/Modernizr\/\" target=\"_blank\" rel=\"noopener\">NuGet package : Modernizr<\/a><\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;Modernizr&rdquo;<\/li>\n<li>This adds a modernizr-*.js file in the application&rsquo;s Scripts folder<\/li>\n<\/ul>\n<p>b. Add the installed js files to a bundle in BundleConfig.cs and then reference the bundle from Site.Master.<\/p>\n<ul>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/1663.AddModernizr-Diff_thumb_2E79B348.png\"><img decoding=\"async\" title=\"AddModernizr-Diff\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/1663.AddModernizr-Diff_thumb_2E79B348.png\" alt=\"AddModernizr-Diff\" width=\"690\" height=\"293\" border=\"0\" \/><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<h3>7. Add better support for older browsers like IE8 with Respond.js<\/h3>\n<p>You can use <a href=\"https:\/\/www.nuget.org\/packages\/Respond\/\" target=\"_blank\" rel=\"noopener\">Respond.js<\/a> to provide better support for HTML5 elements and CSS 3 media queries in older browsers like IE 8 and below.<\/p>\n<blockquote>\n<p>a. Install NuGet package : Respond<\/p>\n<ul>\n<li>Open the NuGet package manager UI or console window and install the package &ldquo;Respond&rdquo;<\/li>\n<li>This adds respond.js and respond.min.js files in the application&rsquo;s Scripts folder<\/li>\n<\/ul>\n<p>b. Add the installed js files to a bundle in BundleConfig.cs and then reference the bundle from Site.Master.<\/p>\n<ul>\n<li><a href=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/2664.AddRespond-Diff_thumb_203B3A58.png\"><img decoding=\"async\" title=\"AddRespond-Diff\" src=\"https:\/\/devblogs.microsoft.com\/aspnet\/wp-content\/uploads\/sites\/16\/2013\/12\/2664.AddRespond-Diff_thumb_203B3A58.png\" alt=\"AddRespond-Diff\" width=\"700\" height=\"320\" border=\"0\" \/><\/a><\/li>\n<\/ul>\n<\/blockquote>\n<h3>8. Add _references.js for better intellisense<\/h3>\n<p>Finally, you can add a <span style=\"color: #333333\"><a href=\"https:\/\/github.com\/balaTest\/BlogPosts\/blob\/c4fa532ca358de3c4f74aaf508c5ce9f7a8269c1\/WebFormsNoAuth\/WebFormsNoAuth\/Scripts\/_references.js\" target=\"_blank\" rel=\"noopener\">_references.js<\/a><\/span> in your Scripts folder. This allows VS to provide JS intellisense when you are editing these files. With VS 2013, we added a new feature called autosync. With this enabled (as shown below), when you add a new JS file to your project, it will automatically add an entry in the _references.js file for you.<\/p>\n<h3>Summary<\/h3>\n<p>Ok, the post was a little long, but I hope this post was useful for you to learn about some of the different technologies that you can leverage using ASP.NET. You can view a list of <a title=\"Steps to create Web Forms (No Auth) project\" href=\"https:\/\/github.com\/balaTest\/BlogPosts\/commits\/master\" target=\"_blank\" rel=\"noopener\">all the commits for this project here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a previous blog post, we have described the different options you have when creating a new web application with Visual Studio 2013 (VS 2013) and provided an overview of the various ASP.NET features and NuGet packages present in the templates. In this post, I am going to take a specific template in VS 2013, [&hellip;]<\/p>\n","protected":false},"author":3341,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[31,7344,7262,7436,7319,7267],"class_list":["post-864","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-asp-net","tag-bala-chirtsabesan","tag-development","tag-visual-studio-2013","tag-visual-web-developer","tag-vwd"],"acf":[],"blog_post_summary":"<p>In a previous blog post, we have described the different options you have when creating a new web application with Visual Studio 2013 (VS 2013) and provided an overview of the various ASP.NET features and NuGet packages present in the templates. In this post, I am going to take a specific template in VS 2013, [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/864","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/3341"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=864"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/864\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=864"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=864"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=864"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}