Getting Started with Asp.net MVC 4 E-Book

Archie Morley

• Herausgeber: BookRix
• Kategorie: Fachliteratur
• Sprache: Englisch

Veröffentlichungsjahr: 2016

Beschreibung

This title is one of the "Essentials" IT Books published by TechNet Publications Limited.
This Book is a very helpful practical guide for beginners in the topic , which can be used as a learning material for students pursuing their studies in undergraduate and graduate levels in universities and colleges and those who want to learn the topic via a short and complete resource.
We hope you find this book useful in shaping your future career.

This book will be available soon...

Leseprobe

Archie Morley

Getting Started with Asp.net MVC 4

BookRix GmbH & Co. KG81371 Munich

Table Of Contents

Table of Contents

The Story behind the Succinctly Series of Books

About the Author

Preface

Chapter 1   I Love MVC 4!

Chapter 2   Why a Book about Mobile-Friendly Websites?

Chapter 3   Designing Mobile-Friendly Websites

Chapter 4   Building an MVC Mobile Website

Chapter 5   Making It Mobile-Friendly

Chapter 6   Making It Look Good

Chapter 7   Using Mobile Device Meta Tags

Chapter 8   Tips and Tricks

Chapter 9   More jQuery.Mobile Features

Chapter 10   Enhancing Performance

Chapter 11   Still Using MVC 3?

Chapter 12   Conclusion

Endnotes

Detailed Table of Contents

Preface

Preface

Target Audience

This book is for developers who are currently using Microsoft ASP.NET and MVC to create websites, and who are interested in creating websites that play nicely with mobile devices or want to update their existing site. If that‘s you, I‘m assuming that you already have a working knowledge of MVC, so this book will not give you introductory lessons of what MVC is or tell you how to use it. It‘s designed to be a quick read for developers and to help them understand the concepts they need to know to improve their websites when it comes to dealing with mobile devices.

Tools Needed

In order to be able to follow along with all of the examples in this book, you will need the following:

Microsoft Visual Studio 2010 or Visual Studio 2012MVC 4 (Although most of this book targets MVC 4, Chapter 11 addresses how you can implement these concepts in MVC 3). This book is based on the MVC 4 RTM version.

If you have something less than this list, you may or may not be able to run all of the examples.

Formatting

Throughout the book, I have used several formatting conventions.

Code Blocks

protected void Application_Start()

Personal Comments

This is a comment related to the current section.

Using Code Examples

The sample projects are available at https://bitbucket.org/syncfusion/mobilemvc-succinctly.

This book is designed to help you learn the techniques quickly and get your job done, so you are free to use the code in this book for your programs or documentation. You do not need to contact the author for permission unless you are reproducing major portions of the code or writing a program based on one of the example projects. Answering a question by citing this book and quoting examples does not require permission.

Similarly, you are free to use the icons and images in the samples. The images are designed to be a placeholder so that you know what size and shape you need to have for icons and start-up splash screens. Feel free to use the Photoshop files as a starting place to create your own images that actually look nice. I‘ve intentionally made them look kind of ugly to discourage you from actually using them in a real app.

Language Choices

To all of you Visual Basic lovers out there: I sympathize with you. I developed using VB for almost 15 years and loved it, starting with VB3, but I made the jump to C# a few years ago because of my clients. All of the samples in this book are in C# because it seems to be the prevalent language nowadays.

Chapter 1 I Love MVC 4!

Chapter 1   I Love MVC 4!

“This is your last chance. After this, there is no turning back. You take the blue pill—the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill—you stay in Wonderland and I show you how deep the rabbit hole goes.”     Morpheus in The Matrix

I’ve been writing websites for many years. Back in 1997, I wrote my first e-commerce website for a local printing company using Cold Fusion 1.0 and I thought that product was awesome at the time. I moved on to a company that developed a lot of websites during the infamous dot-com bubble which went bankrupt a few years later. During that time, we did a lot of Classic ASP development and I found a lot to like in that model. We alternated back and forth between ASP and Cold Fusion depending on what we needed. During those early years of websites and e-commerce 1.0, we learned a lot about how to streamline websites. With people hitting sites using a 9600 baud modem, it had to be as small and efficient as possible, and 100 KB was our upper limit for page size.

In 2002, Microsoft released ASP.NET, and developers had to learn a totally new system that was very different than the ASP we had just mastered. This new model looked a lot like the Windows Forms programming model and once we got over the learning curve, life was good for a while. We learned about the evils of the ViewState and Session management and all the things that could trip you up and bloat your page. But as connections got faster, it really didn’t bother us too much that our pages started to put on a little extra weight.

One of the things that has always bothered me about ASP.NET Web Forms is the HTML it generates—have you ever taken a good look at that? Trying to trace through that code was a nightmare. When creating JavaScript, the field names and IDs were always an issue. You always had to ask yourself, “Do I have to put a ‘ctl100_’ in front of this field?“ But we put up with it because that’s how ASP.NET worked and it was better than the alternative.

When the first versions of MVC came along, I wasn’t too excited about them. It wasn’t until I looked at MVC 3 and the new Razor syntax that I began to get interested. As I researched it more, I learned more about the new programming model that MVC projects bring to ASP.NET. There was a style and simplicity that reminded me of the good old days of Classic ASP, but with all of the new functionality and richness of a modern application.

Along with MVC 3 came the Entity Framework and Code First, and those particular ideas really resonated with me. My philosophy of programming tends to be what I refer to as “DDD”—Database-Driven Development. As I approach a project, I tend to think of things in terms of databases, models, and entities. I usually have a good idea in my head of how I can store the data for the application about the same time I start having a semi-rough screen design. MVC allowed me to follow my usual development path and opened up my development to many other possibilities. I fell in love.

I realize that MVC is not the ultimate development tool, and not everyone is going to love it. But as someone who has worked in web development in Microsoft-centered shops for many years, I have to say this is the best we’ve had it in a long time.

Chapter 2 Why a Book about Mobile-Friendly Websites?

Chapter 2   Why a Book about Mobile-Friendly Websites?

“Toto, I’ve got a feeling we’re not in Kansas anymore.”      Dorothy in The Wizard of Oz

A few years ago, mobile websites were just an afterthought unless you had a company that was developing an application designed specifically for a phone. It’s hard to believe that the first iPhone was just released in 2007 (it seems longer than that)! Before then, our phones were used as, well, phones. Now they’ve become much more. Think of all the things that our cell phones have replaced: wristwatch, stopwatch, calendar, datebook, flashlight, email, map, gaming device, dictionary, encyclopedia, etc.

Google estimates that by 2013, more people will use mobile phones than PCs to get online.1   Wow!  That’s not far away. They also estimate that by 2015, there will be one mobile device for every person on Earth!

If you haven’t started making your website mobile-friendly, you’re already behind the curve. You need to start now. I recently had a friend tell me about how his company just had its website redesigned by a marketing firm. I asked him if it was mobile-friendly and he just looked at me with a blank stare. I whipped out my iPhone and typed in the site. It was a nice-looking site if you were sitting at a PC. Unfortunately, on my iPhone the font looked like it was about 0.5-point font, and much of the graphics were done in Flash so there were big blocks of nothing on the screen. The company just wasted a lot of money on that fancy new site and it will have to rebuild it again soon, probably shortly after its CEO gets an iPhone!

So what can you do to make sure that your website doesn’t suffer the same fate? I’m going to show you how you can make your website more mobile-friendly if you are using MVC. If you are using other technologies, this may not be the book for you. You will probably learn a few things, but most of what I have to say is for MVC programmers. If that is your current paradigm, this book should help you tremendously. Most of the content is centered on MVC 4, but I’ll also show you how you can use these techniques in MVC 3 in case you’re stuck in that environment.

This isn’t a book about learning MVC—I’m assuming you already know a fair bit about MVC and have done a little bit of programming with it. You don’t have to be an expert in MVC, but this book isn’t really going to explain how MVC works. The focus will be on honing your MVC techniques so that your sites look good on mobile devices.

Chapter 3 Designing Mobile-Friendly Websites

Chapter 3   Designing Mobile-Friendly Websites

“Mama always said life was like a box of chocolates. You never know what you’re gonna get.”     Forrest Gump in Forrest Gump

Designing mobile websites is a big topic these days. Every conference you go to has several sessions on this topic, and there is an abundance of books on the topic. With all that noise, it’s hard to know who to listen to.

Some folks are saying that you need to use a dedicated site for mobile and a separate site for desktop. This is sometimes referred to as the “mdot” strategy, because many sites put an “m.” on the front of their mobile URL. However, this strategy causes a problem because you end up with two (or three!) different sites that you must maintain, each with duplicate content and web configurations.

Other sites rely on what is commonly known as Responsive Web Design. The theory is that if you design your site right with style sheets that adapt, you will be able to have one site with one URL, and it will adapt to many screen sizes, scaling the size up or down, shifting columns around, and making it look nice on all sorts of different sizes. One place this strategy fails miserably is page bloat. Even though you have a small screen with less visible content, you typically don’t have less content. Less visible content does NOT equal fewer bytes downloaded. Phones have data caps and lower download speeds, so using that strategy is not the most optimal design for mobile devices.

If you design a website using the responsive design strategy, you need to decide if you are going to start with a mobile design as your bias and then do progressive enhancement as the screen gets larger, or if you want to start with the desktop design, and then do graceful degradation. Both approaches suffer from some serious issues.

What if you could create a site that took good parts from both of these strategies? Rather than relying on the Responsive Web Design strategy, I prefer to use a pattern that I refer to as “Adaptive View Design.” By using the Adaptive View Design patterns in this book, you can have parts of the best of both of these strategies in your project.

Desktop Layout versus Mobile Layout

Desktop Layout versus Mobile Layout

Before we get into the actual code, there are several design concepts that need to be understood when you are designing a mobile layout. There are some obvious differences when you compare a desktop screen to a small phone screen, and there are some that are not as obvious when you are designing for a medium-sized screen like a tablet.

Multicolumn versus Single-Column Design

When you design a typical desktop website, you tend to work with a multicolumn layout with the three-column layout being the most common approach. Such a layout utilizes banner images, menu bars, ads to grab your attention, etc., like this:

Desktop Layout

When laying out a mobile website, a better approach is to design for a single-column layout. Using just one column makes it easy to scale between differently sized devices and makes it simple to switch between portrait and landscape mode. Consider the layout of most phone applications:

Phone Layout

On the other hand, tablets tend to have a little bit of both approaches. A tablet tends to favor the one column approach common to phones, but then it will switch to a two-column layout when rotated to landscape mode, and only occasionally will it use a three-column layout.

Tablet Layout

Each of the designs has a different approach, and it would be a mistake to assume that we could create one page that will work well in all three of these form factors. It’s not just the layout that changes, either; there are other considerations.

Tapping versus Hovering and Clicking

Another issue to consider is that on a desktop people are used to clicking on little text links that take them to the next page, and a mouse is a very precise tool for doing that. On a mobile device, people are tapping with their fingers and thumbs, and a small text link doesn’t really work when you are trying to do that. Your mobile-friendly design needs to incorporate larger buttons and icons wherever possible, and use links that let you tap anywhere on the whole line to activate a choice, not just on the actual word that contains the link.

In addition, on many desktop applications and websites, developers tend to use information that is hidden until the pointer hovers over an object. That concept simply doesn’t exist on a touch-based input device like a phone or tablet.

Large Screens and Collapsible Containers

In addition to scaling back the number of columns in your design, you need to think about the content containers themselves. On a desktop there is plenty of real estate, so it makes sense to expand and show as much data as you can inside many visually distinct containers. On the small screen of a mobile device, you want to show the least amount of data that makes sense, and then have the user decide what to show next, and on a tablet it’s somewhere between. One of the options that is most sensible for this paradigm is the collapsible container. The following three screenshots are the exact same URL with the exact same contents, but each of them is organized and optimized for the platform it is targeting.