Blogger Sandbox

In this blog post we are going to add the jQuery, AngularJS, and bootstrap libraries to our ASP.NET Core application.  Normally we will use NuGet to bring in these libraries but ASP.NET Core gives you the option to use bower to configure the dependencies that you will need on the client-side. Here are the steps to import the client-side dependencies into our project: 1. First let's make bower.json part of the "NorthwindCafe.Web" project, by right click on the bower.json file, and then choose "Show in Solution Explorer" 2.  Open the bower.json file the markup should look like this { "name": "asp.net", "private": true, "dependencies": { } } 3. Change the markup to look like the following { "name": "asp.net", "private": true, "dependencies": { "bootstrap": "~3.3.6", "angular": "~1.5.7" } } 4. Save the bower.js...

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web."  - getbootstrap.com Brief Introduction: Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc.  What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior.  Okay, hold on, let me put my professor's glasses on! Okay class here goes: Mobile-First Design :  You design your site for mobile devices first so the desktop version is second class citizen. Responsive Design: A design that makes your site look good on all screen sizes, and does not need to degrade gracefully.  Meaning you can resize, stretch, maximize, do yoga with your site and it will still look good.  Well up to a certain threshold. So to setup Bootstrap, you will do the following: 1. Create an HTML5 page <!DOCTYPE html> <html lang="en"> <head...

In our previous blog we've added a _ViewStart.cshtml layout to our project, which is the default layout for our pages if no layout is specified for the page.  In this blog we will add BundleConfig for the JavaScript libraries which includes JQuery , and Bootstrap that we've added to our MvcApp project in the previous blogs.  A configuration bundle allows you to group files that belongs in the same libraries together so that they can called with just one line of code.  In this blog we will be creating configuration bundles for JQuery, and Bootstrap to the MvcApp project. Step-By-Step Instructions : 1.  Right-click on the folder "App_Start", then select Add → New Item → Visual C# → Class, name the class BundleConfig.cs 2.  Now the App_Start folder should look like the screenshot below 3.  Open the BundleConfig.cs file, then delete the existing using statements, and then add the following namespaces using System.Web; using System.Web.Optimization; 4. The resu...

In the previous blog we've created added the JQuery library to an empty ASP.NET MVC 5 project. In this blog we will add the Bootstrap to the empty ASP.NET MVC 5 project that we've just created. Step by Step Instructions: 1. Open the empty ASP.NET MVC 5 project that you've just created 2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages" 3.  In the search box on the right of NuGet window type "bootstrap", the search result will be displayed 4. Click on the "Install" button next to the "Bootstrap" result, it should be at the top of the list 5.  Once the Bootstrap library has been installed a green check mark is displayed, click on the "Close" button 6.  Now you should see the Bootstrap scripts in the "Scripts" folder 7.  You will also noticed that the "Contents" folder has been created, this folder was created when NuGet installed...

A lot of developers assumed that they can only configure the BundleConfig class to use only local resources in their MVC project.  That is not the case, in fact it is quite easy to use a cdn version of your JavaScript libraries instead of the one in your local folder.  In the previous blog  we went over how to create the BundleConfig class from scratch.  In this blog we will go over how to configure MVC to use the cdn resource instead of your local resource files. Step-By-Step Instructions: 1.  Open the MvcApp project 2.  Open the BundleConfig.cs file under the folder App_Start 3.  From the last blog we have the following code using System.Web; using System.Web.Optimization; namespace MvcApp { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/...

In our previous blog we created a simple _Layout.cshtml file that does not have any markup just to make things simple.  In this blog we will use Bootstrap to make the layout look more professional and responsive, so that it can be viewed in any screen size.  The previous layout looks like screenshot below. The Bootstrap version will look like the screenshot below. Step-By-Step Instructions: 1.  Open the MvcApp project 2. Open the BundleConfig.cs file in the App_Start folder and type in the following code using System.Web; using System.Web.Optimization; namespace MvcApp { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery", "https://ajax.googleapis.com/ajax/libs/jquery/ 2.1.4/jquery.min.js").Include("~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/bootstrap","https://maxcdn.bootstrap...

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library.  Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> <title></title> </head> <body> ...

If you use Bootstrap in a local environment it would make sense to use the local version of Bootstrap that you've downloaded from the Bootstrap website.  Follow the steps below to setup Bootstrap locally. Step-By-Step Instructions: 1.  Go the website http://getbootstrap.com then click on the "Get Started" tab.  You will see three choices for download.  You want to click the first button that is labeled "Download Bootstrap" 2.  Save the file to your hard drive 3. Unzip the file "bootstrap-3.3.4-dist" and you will see three folders, "css", "fonts", and "js" 4.  In the root level where the folders reside, create an html file call "bootstrap-demo.html" 5.  Scroll down on the "Getting Started" page until you see the "Basic Template" section.  You will see a sample code with "Copy" button.  You want to click on the "Copy" button. 6. Open the file "bootstrap-demo.html" ...