Infragistics WPF controls

ASP.NET MVC Basics: How to create a HtmlHelper

 ASP.NET MVC Basics: How to create a HtmlHelper Hello! And welcome to another tutorial on  This is the first tutorial in a series on ASP.NET MVC development.  This first installment will cover how to create an HtmlHelper.   What is ASP.NET MVC? I apologize if I'm stating the obvious, however, this is a tutorial on the basics so I'm approaching the tutorial with the assumption that the reader has no knowledge of ASP.NET, MVC, or ASP.NET MVC.  I'm sure you noticed that I made three references to the technology.  That's because ASP.NET MVC is more than one technology.  First we have ASP.NET, which is a server side web development technology created by Microsoft that utilizes the .NET framework.  Simply put, ASP.NET allows you to write dynamic web pages in .NET language of your choice (C#, VB.NET, etc..).  ASP.NET is an open source technology and it can be developed using the .NET framework or the Mono runtime.  You can find all sorts of wonderful information at . ASP.NET comes in two "flavors".  ASP.NET WebForms which is the original flavor, and ASP.NET MVC.  ASP.NET MVC is made up of two concepts.  First and foremost there is the MVC design pattern.  The MVC or Model-View-Controller design pattern was introduced by Trygve Reenskaug in the 1970's.  The design pattern has also be explained by Martin Fowler in his wonderful book on design patterns called Patterns of Enterprise Application Architecture . The idea behind the MVC pattern is that you have data that you wish to display (Model), you have a presentation layer in which you wish to display your Model (View), and you have a class that handles the interaction between the View and the Model (controller).  The MVC design pattern is an excellent example of a design with proper separation of concerns.  Applications that implement the MVC design pattern are generally loosely coupled, and easy to test (unit testing).  In ASP.NET MVC, the View is a web page, the model can be any class that holds data that you want to display in the View, and a controller class. Now that I've explained ASP.NET and MVC, I'll now explain ASP.NET MVC.  You see, not only is ASP.NET MVC an implementation of the Model-View-Controller design pattern, it's also a framework built by Microsoft to support the implementation of the MVC design pattern.  You will see as you begin working with MVC that the framework is a large part of what makes ASP.NET MVC what it is.  You could implement ASP.NET MVC without the framwork, however, I don't recommend it.  The framework will create controller's for you, create Views that are bound to a strongly typed model of your choice, and much more.  Using the ASP.NET MVC framework, you can create a basic CRUD web application in a very short amount of time. I hope that this gives you a nice overview of the ASP.NET MVC framework and design pattern. HtmlHelper: What they are and how to create them I'll explain HtmlHelpers by taking you through implementing one..  We'll start by firing up Visual Studio and create a new ASP.NET MVC 4 project (note: I'm using VS 2012, however, if you have an earlier version installed, simply choose whichever ASP.NET MVC version that you have available to you.  If you don't have any ASP.NET MVC templates, you can use the Web platform installer to install ASP.NET MVC on your system.       The next dialog allows you to choose which type of ASP.NET MVC application that you'd like to create.  We will pick an Internet Application, with the Razor View engine and a unit testing project as shown below.     Now click OK and your project will be created for you.  The ASP.NET MVC Framework will create a lot of boiler plate code behind the scenes.  This includes "Forms based Authentication" in the web.config file as well as an AccountController which is a controller to handle authentication to the site.  There is also a default controller called HomeController. We are going to create an html helper that creates an HTML table.  This is merely an example and is not particularly useful, however, it will show you how to create and use an HTML Helper.  An HTML helper is nothing more than an extension method which returns a string of HTML.  Here is the official definition of an extension method from MSDN: Extension methods enable you to "add" methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. Extension methods are a special kind of static method, but they are called as if they were instance methods on the extended type. For client code written in C# and Visual Basic, there is no apparent difference between calling an extension method and the methods that are actually defined in a type. Creating the HtmlHelper  Create a folder called "Helpers" in your solution.  In the folder, create a static class called TableExtensions.cs .  The class will look like this: TableExtensions.cs using System; using System.Text; using System.Web.Mvc; namespace HtmlHelpers.Helpers { public static class TableExtensions { public static MvcHtmlString Table(this HtmlHelper helper, string id, string name, int rows, int columns) { if (string.IsNullOrEmpty(id)) throw new ArgumentNullException("id"); if(string.IsNullOrEmpty("name")) throw new ArgumentNullException("name"); if (rows <= 0) throw new IndexOutOfRangeException(); if (columns <= 0) throw new IndexOutOfRangeException(); StringBuilder tableBuilder = new StringBuilder(); tableBuilder.Append(string.Format("<table id=\"{0}\" name=\"{1}\">", id, name)); for (int rowCounter = 0; rowCounter < rows; rowCounter++) { tableBuilder.Append("<tr>"); for (int columnCounter = 0; columnCounter < columns; columnCounter++) { tableBuilder.Append("<td>"); tableBuilder.Append(rowCounter.ToString()); tableBuilder.Append("</td>"); } tableBuilder.Append("</tr>"); } tableBuilder.Append("</table>"); return new MvcHtmlString(tableBuilder.ToString()); } } } As you can see, we've created a static class and a static method. The the first method parameter is  this HtmlHelper helperThis is where the magic happens. This allows us to use the method from the View like all other HTML helpers.The other methods specify the number of rows and columns that should be built in the HTML table.Here is an example of how to use the helper: @using HtmlHelpers.Helpers; @{ ViewBag.Title = "Index"; } <h2>Index</h2> @Html.Table("myTable", "myTableName", 4, 4)The output looks like this: And there you have it folks.  I hope you enjoyed this tutorial.  If you have any questions please don't hesitate to leave a comment. Thanks for reading.

Navigation design for Windows Store apps and other Windows 8 design resources

Windows 8 Developer resources If you are a Windows developer then I'm sure you will agree that we are living in a very interesting time.  In light of the launch of Windows 8, Microsoft has launched a very ambitious campaign in an effort to win the interest of developers.  What's most impressive is the amount of developer resources that Microsoft has developed to teach developers how to design and develop applications for Windows 8 and the Windows App Store. I recently ran across a site that dedicated to helping developers create a Windows 8 application and publish to the App store in 30 days.  This Microsoft funded site has divided 30 days into daily tasks and articles that will lead you on the way to developing your first Windows 8 application.  They've even offered a free 1:1 consultation with an expert developer via telephone to assist with development.  They've provided Windows 8 PhotoShop design templates for download, example applications and tons of other design and development resources. The official Windows 8 release is just around the corner but Microsoft has provided a full featured 90 day trial version of Windows 8 for developers to download so they don't have to wait to begin developing their applications.   I think Microsoft is taking all the right steps to get our attention and I'm excited about the road ahead.  I would like to see a little more along the lines of .NET development in the world of Windows 8 as well as more resources for learning WinRT.  In any case, Microsoft, I say kudos to you.  I plan to take advantage of the resources and I will track my 30 day application experience in a series of blog posts.  Stay tuned.   Resources      Dev Center - Windows Store apps   Navigation design for Windows Store apps  kick it on        

Export Microsoft Office documents from ASP.NET applications using Infragistics NETADVANTAGE for ASP.NET

INFRAGISTICS I have a lot of experience developing applications using the Infragistics NETADVANTAGE for ASP.NET controls.  I've recently downloaded the latest control suite and I've decided to write a series of articles on the different controls and how they are used.  This article will be focused on creating Microsoft Word, Microsoft Excel, PDF, and XPS documents using the Infragistics NETADAVANTAGE for ASP.NET Controls. Exporting PDF and XPS documents from the contents of the WebDataGrid The Infragistics control suite is complete with two fully functional web grid controls.  The WebDataGrid provides a high performance, scalable ASP.NET AJAX enabled grid with built in support for sorting, filtering, and editing tabular data.  The control is designed with touch enabled devices in mind.  There is also built in support for flicking and other multi-touch gestures.   Here is an screen shot of the WebDataGrid for your review    As you can see, the grid is sleek, stylish, and very pleasing to the eye.  Infragistics controls have many predefined styles, as well as rich server side and client side  APIs.  The second Infragistics grid control is the WebHierarchicalDataGrid.  The WebHierarchicalDataGrid shares the same functionality as the WebDataGrid as well as the ability to model master-detail and self referencing data relationships.  These relationships are represented by expandable rows that contain the related data inside of a parent row.   Here is a screen shot of the WebHierarchicalDataGrid.     Both of the grids feature the ability to export the contents of the grid's data source to Microsoft Excel, Microsoft Word , PDF, and XPS documents.  There's also built in support for importing the contents of an Excel spreadsheet to populate the data grids. Microsoft Office independence One of the greatest features of the Microsoft document export functionality is the fact that there is no need to have Microsoft office installed on the server to generate the resulting documents.  The Infragistics library uses 100% managed .NET assemblies to implement this functionality.  This means there's no need to hack around the Word or Excel COM interop libraries to achieve the desired results.  Infragistics NETADVANTAGE comes with a Word Document object model as well as an Excel Woorkbook object model which provide rich APIs for creating Microsoft Office documents for use in your applications.  You can generate invoices, work orders, and receipts with very little code. My next article will include a fully functional sample that illustrates some of the functions of the WebDataGrid as well as the document export functionality. This concludes the article.  Thanks for reading! You can download a trial of the entire .NET NETADVANTAGE control suite by visiting the following URL: Infragistics website And here are some useful videos to get you started Export Grid Data to Excel Export Grid Data to PDF and XPS formats   kick it on

Emulating iPhone, iPad, and Opera devices to debug mobile ASP.NET MVC4 apps with VS 2012 and WebMatrix 2.

Visual Studio 2012RC and ASP.NET MVC4 Mobile sites I've recently downloaded Visual Studio 2012 RC to experiment with the latest and greatest that .NET 4.5 has to offer.  The installation took around an hour and a half. What's new in .NET 4.5 you ask?  Here's a comprehensive list from (sorry Scott!) .   ASP.NET MVC4 mobile sites I started by launching VS 2012 and clicking on new project and then browsing to samples.  I clicked on c#, my language of choice and I browsed through many of the interesting samples until I came across the ASP.NET MVC 4 Mobile features sample. Once the sample loaded, I noticed a nice feature of VS 2012.  The IDE allows you to choose the browser in which  to debug your ASP.NET applications.  Since we are dealing with an ASP.NET MVC 4 Mobile application, I thought it was only natural for me to seek out mobile device emulators to use to view the websites.  It turns out Visual Studio 2012 makes this easy.     You start by clicking the browser drop down list located next to the green "play" (debug) button.   How to add custom emulators I'm sure you've noticed from the screenshot that I have a few emulators loaded in my browser list.  These aren't there by default, however, it's easy to add them.   Opera Mobile Emulator The Opera mobile emulator can be downloaded from the following address   Once you've installed the emulator, all you have to do is click on the browser drop down in VS 2012 and click "Browse With"   You are then prompted with the Browse With dialog box that lists all available browsers.   Next, you click on Add and you are then prompted with the add program prompt.   Add program   You simply browse to locate the Opera Emulator executable and enter a friendly display name.   If you used the default installation settings, the executable can be found in  C:\Program Files (x86)\Opera Mobile Emulator\OperaMobileEmu.exe.   The iPhone and iPad emulators. In order to add the iPhone and iPad emulators, you basically have to follow the same set of steps.   you must set the application arguments associated with the emulator mode that you wish to operate in.   To install the emulator, I used WebMatrix 2.  You can find WebMatrix2 in the Microsoft Web Platform Installer 4.0 located at   I found the following instructions under this blog entry by Scott Hanselman  From the Run menu, select Add new...From here, you'll go to the Browser Extension area where you can add the iPhone and iPad emulators to your system.      Once you've installed the emulators, you use the same VS 2012 browse and add directions as before to add the iPad and iPhone emulators to your VS 2012 browser list. Here are the configurations for the iPad and iPhone.   iPhone settings   path  C:\Users\budbjames\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPhoneSimulator\ElectricMobileSim\ElectricMobileSim.exe     iPad configuration   path  C:\Users\budbjames\AppData\Local\Microsoft\WebMatrix\Extensions\20RC\iPadSimulator\ElectricMobileSim\ElectricMobileSim.exe     Once you've added the emulators, you can browse the mobile site sample application using the device of your choice.   Here are some screenshots for your reference.   Opera mobile emulator     iPad       iPhone   Conclusion And that's it!  That's all it takes to view an ASP.NET MVC 4 mobile app in 3 different emulators.  I'm very excited about VS 2012 and the possibilities that it and the .NET 4.5 framework have created. I plan to post more articles related to .NET 4.5 as I evaluate the framework.   I'm particularly interested in the added improvements regarding parallel computing. I'd like to give a special thanks to Scott Hanselman for his post regarding WebMatrix 2. Stay tuned and thanks for reading!  ~/Buddy James kick it on  

About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (, a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List