Apr
2
2015

WebCamp MVC Events

imageI have been inspired to write some blog posts that feature highlights from a series of WebCamps I delivered along the west coast.  In this post, I am going to share a discovery I made when observing traditional ASP.NET (Web Form) developers attempt the switch to ASP.NET MVC.

The first question that might come to mind is: Why leave Web Forms?  The real answer is – you don’t have to.  However, here are a few reasons why many may choose to do so in the near future:

  • Web Forms are phat! …yet fat.  The page source is typically bloated with view state info.
  • Web Forms don’t encourage separation of concerns as does MVC.
  • Web Forms request/response model invokes many events and is process intensive.
  • Web Forms do not exist in ASP.NET 5.

The latter reason was the primary motivator for WebCamp attendees to consider moving to MVC because it exists prominently in ASP.NET 5 (by the way, Web Pages do too!)

You can learn a lot about what is on an attendee’s mind by a question he/she asked.  The following question is a classic example – and served as inspiration for this blog post and title:

“How do I respond to the click event of a button?”

The concept of interacting with elements on a page via event handlers is an easy concept to learn.  Unlearning it (for some) is a struggle.  MVC doesn’t use events like Web Forms do.  Instead of simply stating it doesn’t do that, I wanted to show how it was accomplished in MVC.  I used a very simple scenario -  one submit button on a page that displays a message when clicked.  Here is a snippet from the view:

<h2>Button Click Event in MVC</h2>
@using (Html.BeginForm())
{
    <input type="submit" name="submit" value="Submit" />    
}
<div>@ViewBag.Message</div>


And here is the code in the controller:


namespace
Palermo4Mvc.Controllers { public class DemoController : Controller { // GET: Demo public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string submit) { ViewBag.Message = "Muhahaha!"; return View(); } } }
 

I went through the process of explaining how requests hit controllers first, then views were rendered.  Now that a simple task was accomplished, there was the inevitable questions that follow such as ‘What if I have two buttons?  How do I retrieve submitted values in the controller?  Do I still have access to querystring data? …’

What became clearer to me each time I presented a WebCamp is the need to bridge a gap starting with a simple process they already knew well.  Once the concept came into view (no pun) the attendees would organically accelerate their own learning path  Many new MVC developers have arisen from these events, and I was honored to be a part of that process!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Mar
30
2015

WebCamp Essentials

imageSince the beginning of this year, I have had the privilege to tour across the west coast speaking at WebCamps featuring content and demos using Visual Studio 2013.  A common theme across all of these camps was the positive reaction to some particular demos targeting the productive features enhancing web development.  Specifically, these demos were showcasing the goodness found in the Web Essentials extension for Visual Studio.  Although I have been a fan for years, it was surprising to me how many long-time ASP.NET developers were not using it or even aware of it.  Thus I am inspired to spread the word about this free add-in which is available for multiple versions of Visual Studio.  It was truly an essential part of the WebCamp experience, thus why I named this post “WebCamp Essentials”.

In the spirit of the WebCamps, I would like to reveal the features that seemed to render the highest level of praise or interest – and in no particular order.  Although all the features are listed categorically on the Web Essentials home page, I wanted to iterate the camp favorites by listing them under problems they address.

“What file is this static content in?”

When testing your site in a browser, you may want to know where (source file) a visual element is coming from.  Since sites can be complex with nested content, it may not be easily discernable what file a static element resides in.  With the browser link feature, you can toggle a mode in the browser that will enable visual selection of an element which will reveal in Visual Studio the source file in which it resides.  Not only can you find content, you can change it right in the browser and see how it updates your file in Visual Studio automagically!   This is made possible by script injected into the page when launching from Visual Studio – and it works across all the modern browsers.

“I prefer less typing!”

With minimal typing, you can create HTML content quickly with Zen Coding.  A simple example:

<!-- type this and then tab -->
div#demo.groovy>lorem4

<!-- becomes -->
<div id="demo" class="groovy">Amet, consectetur adipiscing elit.</div>

 

“Collapsible regions please!”

A popular feature in the C# world, this extension makes it possible to do the same in HTML, JavaScript, or CSS.  Content inside the region can be collapsed visibly to help organize. 

HTML

<!--#region name-->

<!--#endregion—>

JavaScript

//#region name

//#endregion


CSS

/*#region name */

/*#endregion */


As mentioned, these are just a few of the many features provided with Web Essentials.  If you are a web developer using Visual Studio – it is simply essential for you to employ it!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Feb
11
2015

WebCamp 2015

imageLearn how to develop beautiful, fast and interactive websites! Join us for a FREE WebCamp in your local area to get hands-on with the new release of ASP.NET and Web Tools for Visual Studio 2013. We’ll discuss the Microsoft tools and resources that can help you build cutting-edge websites, and then show you how to deploy them with Microsoft Azure. WebCamps are no-fluff, hands-on learning events for developers, by developers. Don’t miss this exciting chance to sharpen your coding skills and create something amazing. Register now for a Web Camp near you. http://aka.ms/msftwebcamps

For the Web Camps that I am presenting at, here are some resources I would like to share:

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Nov
10
2011

HTML5 Web Camp Videos

The highly popular HTML5 Web Camp events sponsored by Microsoft are typically filled to capacity when delivered at any location.  In my humble opinion, the best HTML5 Web Camp delivered to date was in my hometown of Phoenix, AZ.  Fortunately, the team at EventDay showed up that day to record every session.  With great pleasure, I announce the availability of these videos for you to watch at your convenience – for free!

video-callouts

Each video provides a simple user interface that allows you to see the presenter, the content on the screen, and navigation controls to the topic you are most interested in.  When the screen in maximized, you will truly be immersed into the experience as if you attended live!

 

 

The link for all these videos is found below.  Please share with your community!!!

http://bit.ly/html5camp-videos

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Sep
9
2011

HTML5 Web Camp–Phoenix, AZ

html5I am excited to announce the highly popular HTML5 Web Camp is coming to Phoenix, AZ on September 30th 2011!  If you live in the greater Phoenix area and you want to attend, register now as these events typically fill up fast.  Again, to avoid being put on a waiting list or turned down, REGISTER NOW!

To prepare for the event, please visit the HTML5 Web Camp preparation checklist page!

I look forward to seeing you there!

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Aug
24
2011

HTML5 Web Camp in LA

The HTML5 Web Camp in LA was clearly the best one yet.  Hats off to all the volunteers and the attendees for being very prepared for the event. 

The event was very interactive, and many questions were regarding browser concerns.  There were a few questions regarding the future of development, and we did show a video regarding Windows 8.

The demo code featured during my presentations can be downloaded below:

[ HTML5 & CSS3 demo files ]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jun
23
2011

Web Camp HTML5 – Irvine, CA

webcampsHere are the resources for the Web Camp HTML5 in Irvine, CA:

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).
Jun
10
2011
css3 // event // html5 // webcamp

Web Camp HTML5 - Colorado Springs, CO

wcco

Friday June 10th is the date of the Web Camp HTML5 Event in Colorado Springs, CO.

[Download HTML5/CSS3 demo code!]

    Copyright © Microsoft Corporation. All rights reserved.
    The code provided in this post is licensed under the Microsoft Public License (Ms-PL).

Resources

Archives

Team Blogs

Download OPML file OPML