ASP.NET MVC 5 with Bootstrap and Knockout.js (2015)

Preface

In today’s society, websites are about giving people information quickly and effectively. Gone are the days of people waiting for websites to load. Enter single-page web designs and websites that work on your computer or your phone.

This book will bring three extremely useful technologies together to demonstrate how you can build a website that will work on many modern devices without writing specific code for each device.

ASP.NET MVC 5 will be used to build sophisticated web applications (the controller), interact with a database (the model), and dynamically render HTML (the view).

Bootstrap will be used to build sleek and responsive views that render on a variety of modern devices. Bootstrap provides a set of custom components that makes it easy to build an incredible user experience with easy-to-implement HTML, CSS, and JavaScript.

Knockout.js will bring these technologies together by enhancing the responsive web design with snappy client-side interactions driven by the server-side web application.

Why These Technologies?

That’s a good question. If you have previous web development experience, it’s easy to think that you don’t need help, and that you can write your own HTML and CSS to create sleek and responsive web pages. I have more than 10 years of experience and since I was introduced to Bootstrap a few years ago, I’ve barely written any CSS.

Bootstrap provides two big advantages:

§ The developers have taken the time to write and organize the CSS that is used repetitively to solve problems like creating a menu, making the menu stay at the top, allowing the menu to contain a search bar, etc. All of these things can be done with CSS, but it takes time! When you first write the code to do these things, there is a lot of small tweaking to get the alignment perfect. With Bootstrap, you don’t need to worry about it because it has already been done.

§ Not only have you saved time by not writing a lot of CSS to create your responsive website, but the developers of Bootstrap have tested all of the components in a variety of web browsers! This is really important because there are many subtle differences between each browser. For example, where only a little CSS tweak is needed for Internet Explorer, the same CSS might mess up Chrome. Because of Bootstrap, you can be confident that your website will work on a variety of browsers with just a little bit of effort on your part. This will allow you to focus your time on building a bigger, better, and more sophisticated project!

Knockout.js is a JavaScript library built on the MVVM (Model-View-ViewModel) architecture pattern. The defining factor of this pattern is to bind your data to a view through a ViewModel. This is extremely useful when building dynamic, responsive web applications because Knockout provides sophisticated logic to update your user interface automatically, based on user interaction.

Once again, this logic can be accomplished with JavaScript, but it takes a long time to write. As you’ll see throughout this book, accomplishing it with Knockout.js takes very little time! And just like Bootstrap, these features are thoroughly tested in a variety of browsers, giving you a lot of confidence that your web application will work in any of the supported browsers.

The final piece of the web development puzzle is server-side technology that allows data persistence to and from a database, and the ability to write complex and well-structured business logic and to create intelligent HTML views that mix a combination of static and dynamic data together. ASP.NET MVC has progressed into a technology leader since its official version 1 release in March 2009. Now in its fifth iteration, it has become extremely powerful with many useful features available with just a few keystrokes.

Putting these three technologies together makes the development of complex, dynamic, and responsive web applications very rapid, where all of the heavy lifting is done for you. This book will demonstrate that and teach you ways to make your projects very well organized and easy to maintain.

What Is a Web Developer?

Recently, I was asked by a colleague, “Jamie, I’m thinking of switching careers and want to become a web developer. What do you think I need to learn?”

The colleague in question has great knowledge of several different programming languages (including C#). I quickly started to put a response together about learning MVC because his knowledge would transfer quite easily. I continued thinking that he’ll also want to learn HTML, CSS, and JavaScript. And that got me thinking — a web developer doesn’t just focus on one thing; we are more like a Jack-of-all-trades with a bit of knowledge of everything.

There are already countless books on learning MVC; however, they only focus on one aspect of web development. They teach you to save and retrieve information from a database, send emails to users, create a web application that lets users register and log in, etc. What these books don’t do is teach you how to build forms that work on mobile devices or tablets that contain sleek user interfaces, use custom components that replace boring radio buttons, and so on.

Being a web developer involves all of these things and more. The goal of this book is not just to teach you to build a form that saves data to a database. Instead, we will build forms that use toggle buttons, modals, and popovers to create user interfaces that are easy to use, responsive, and dynamic all at once!

Who Is This Book For?

This book is for web developers, or for those who want to become one. It assumes that you have previous development experience with at least one programming language.

If you are a beginner, I would suggest you read this book from start to finish because many of the examples will build upon previous examples and, more importantly, topics discussed in previous chapters. More adventurous readers are free to jump from section to section for something of particular interest. Keep in mind that when examples extend previous ones, some may merely reference the earlier example to avoid redundant code listings where applicable.

The examples in this book will contain a mix of C#, HTML, CSS, and JavaScript. By the end of this book, you will be able to build incredibly sleek, dynamic, and responsive web applications rapidly by leveraging the capabilities of MVC 5, Bootstrap, and Knockout.js.

The book is separated into four parts. Part one provides an introduction to the three technologies used in the book. Part two demonstrates how to implement CRUD (Create-Read-Update-Delete) with the data being stored and read from a database. Part three dives into some more advanced C# and MVC features to help you organize and maintain your web applications. The final part demonstrates how to build a shopping cart from start to finish. The shopping cart will leverage many features of all three technologies, demonstrating how they interact with each other to create a sleek, dynamic, and responsive web application.

Getting Started

There are many different Integrated Development Environments (IDEs) to choose from that provide many useful shortcuts and code hints. I recommend using Visual Studio because it contains the best support for writing and building web applications using ASP.NET’s MVC 5.

If it is not already installed, begin by visiting Microsoft’s official MVC 5 website. Near the top of this website is a link to download and install a free version of Visual Studio Express 2013 that contains the templates to create MVC 5 web applications.

All of the examples in this book will assume that Visual Studio is being used when referencing elements within the IDE.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

TIP

This element signifies a tip or suggestion.

NOTE

This element signifies a general note.

WARNING

This element indicates a warning or caution.