Three chapters of the book contain a tutorial where the reader builds a complete ecommerce app, TechieTogs, from start to finish. TechieTogs is a fully-featured ecommerce app built using ASP.NET WebPages and Microsoft WebMatrix. The site features all of the elements you would usually expect to find on a shopping site, such as a catalog, shopping cart, and checkout. The product catalog is managed using a series of pages that are only accessible to site administrators.
The guys at Apress have agreed that I can make the sample app available on GitHub for anyone who wants to have a mess around with it. The repository contains all the files you need to run the app. Simply download the ZIP file, extract it to a suitable place and open in WebMatrix to run.
Hello Steve I have purchased your book and it is awesome , I have no experience in coding yet I can slowly grasp the code and move things around where I want them to be!! Here is my question , I want the categories also to have an image that relates to them…
I have added this to the Edit Category Page
@Html.Label(“Category Image:”, “categoryImage”)
then after reviewing the productImage code… I am completely lost on how to program so that i can upload the image and it relate to the category!!! Can you please help me??
Steve Lydford
11:27 am on January 26, 2012
Permalink
Hi Gus, so glad you are enjoying the book. Rather than try and explain everything here, I’ll put together a blog post to show how to add this feature to TechieTogs. I’ll try and get it up in the next couple of days. Watch this space.
It’s great that you are digging through the code and making changes. It is, without a doubt, the best way to learn!
Hello,
I try to run your app and my problem is that when I add product with decimal points into the cart I get 0 as value, if I modify the price to round value eveything is OK
Any idea what to do to correct this
Thanks, Manos
Am relative new into asp.net web pages and i have being following your work on the eCommerce app TechieTogs. suppose i have large quantity of product to display on the product page, how do i add pagination to the product page?
I guess the title of my blog is a giveaway to the fact that I am primarily an ASP.NET developer; at the moment mostly MVC 3, which is all kinds of awesome, for all kinds of reasons.
So here is a list of the tools that I can’t do without and that I think would be useful for anyone else out there who is wanting to build web apps on the Microsoft stack. This is the stuff that I would automatically install onto a new machine before I started development work on it.
Post any tools you love in the comments and I will check them out. I’ll keep the list updated as I find new cool stuff ™, so keep checking back. So here they are, in the order that my mind blurted them out:
It’s Visual Studio. If you can afford it get it – it’s the best. If not, have a look at BizSpark, WebsiteSpark or Visual Web Developer 2010 Express (below).
The Microsoft Express products are basically FREE cut-down versions of full applications (in this case Visual Studio 2010). It is not as feature-rich as Visual Studio, but has all the tools necessary to develop ASP.NET applications. Ideal if you are a hobbyist programmer or a student. All projects created in Visual Web Developer Express 2010 are compatible with Visual Studio 2010. And did I mention it’s FREE?
Notepad++ is a free code editor, designed as a replacement for Windows Notepad with code syntax highlighting. Ideal for those times when you just want to edit a bit of source code, some HTML, or some CSS without having to fire up the whole of Visual Studio.
NuGet is a free open-source package manager for Visual Studio and Visual Web Developer Express that just makes it so ridiculously easy to integrate third-party libraries and tools into your projects it is untrue. Truly brilliant, I can’t recommend this enough.
Take a look at this brief introduction to NuGet by Phil Haack (note that this is for an older version)
Firebug and the IE8 Developer Tools both do essentially the same job, although each has it’s own strengths – they both let you inspect the source code, CSS and Scripts of any web page and any element within it. This is a fantastic way to learn how other developers have achieved a certain CSS effect or to inspect your output at runtime to find out what is really going on.
Another tool aimed at helping you to find out what is really going on. Reflector enables you to analyse compiled .NET assemblies in C#, Visual Basic and MSIL and is an invaluable learning and debugging tool.
I love Ninject. It is a Dependency Injection container which makes it possible to achieve real separation of concerns between your applications components. Ninject is very easy to use and does a good job of all the usual dependency chain resolution and object lifetime management stuff that you would expect from a DI container. Also very simple to install, thanks to NuGet!
NUnit is a unit-testing framework for .NET, ported from JUnit – the popular Java based framework. This is a completely standalone product, which is particularly useful if you are using Visual Web Developer 2010 Express which has no built in unit-testing.
Fiddler allows you to inspect all incoming and outgoing HTTP traffic. I find this particularly useful for debugging ASP.NET applications on your local machine by inspecting the HTTP requests and responses to localhost to look at cookies, header information, etc.
ELMAH stands for Error Logging Modules and Handlers and is an open-source error logging facility for ASP.NET. It will log almost any unhandled exceptions and display them back to you via the web. In many cases you can look back to see the original "Yellow Screen of Death", even if you have customErrors turned off. If you have NuGet installed (which you really should), just type “install-package elmah” into the Package Manager Console” and browse to elmah.axd to see the error logs. It really is that easy.
At some point you gotta ship stuff right? And to the web developer that means uploading it. Well there are loads of free FTP solutions out there, but my favourite at the moment is FileZilla.
SketchFlow is a prototyping tool released by Microsoft as part of Expression Studio. It gives you the ability to quickly map out workflow and basic functionality to show end users, without having them concentrate on the UI. For once you may get some useful feedback instead of, "Can we try that in green?".
I was never a fan of mind-mapping, but I sat at in a meeting with an avid user of XMind and was very impressed. I have used it a few times since just to blurt out all my "neat ideas" about an application before I start a more formal design.
If you are a real hardcore developer you will run at least two monitors. I run three and I don’t think I could go back to anything less than that now. Windows can handle all this extended desktop goodness for you, but Ultramon just does a far, far better job. Go and download the free trial and you’ll see what I mean.
Microsoft are releasing a patch today for ASP.Net to fix the security vulnerability disclosed last week, which has the potential to allow users to request and download files in the ASP.Net Application (such as Web.Config) and decrypt data sent securely to the client (such as ViewState).
Obviously, this vulnerability is of huge concern and could have massive implications for the security of your site and the data used within it, so I would urge you to download and apply this patch at the earliest opportunity.
A webcast will be hosted today, September 28, 2010, at 1:00 PM Pacific Time (US & Canada) to answer customer questions. Click here to register for the webcast. The security update is fully tested, and is scheduled for release at approximately 10:00 AM PDT.
If you are unable to patch your server immediately a workaround is available, as described on this blog post by ScottGu.
Full of HTML5 and CSS3 goodness, this may be Microsoft’s last chance to claw back some of the market share it has lost in the last 2 or 3 years to Firefox, Chrome et al.
As well as finding the new MSDN UK design this morning I also stumbled across
this great article on Depending Injection (otherwise known as Inversion of Control).
“Dependency injection is a technique used in object-oriented programming languages. It promotes loose coupling of components by passing dependencies to an object, rather than having an object instantiate its own dependencies.”
This is the first of two very quick posts to share some stuff I stumbled across today on the web.
I just happened to browse to the UK MSDN homepage and noticed that they have had a major redesign. First impressions are good, I like it. I just hope I can still find everything….
This is an awesome release, giving developers the ability to use sprites in web pages, without all the hassle which (let’s be honest) puts most people off at the moment.
For those who are unaware of sprites, they are a technique which became popular in the games programming arena in the 80′s where you combine all (or some of) your images into a single file and display just a portion of it at a time, usually using a top-left coordinate starting point, combined with a width and height to specify the part to be displayed. In games programming in the early days this was used extensively (and still is in a vast percentage of 2D games) as multiple cells of an animation could be combined in one sprite and loaded into memory once. This gave much smoother animation as you were simply displaying a different portion of the same image for each cell in an animation, rather that loading a new image in for each frame.
Why is this good for web developers? Well, each image you load into a web browser requires a separate HTTP request. By combining all the images into a single (or couple of) HTTP requests you can significantly reduce page load times. Plus, remember the reason that sprites were invented in the first place…. Just think of all the cool and crazy things you could do with a sprite and a bit of jQuery to make rollovers, animations, etc.
This framework enables the .Net developer to use sprites in a very straightforward way. It literally creates a combined image from the all images in a folder and allows you to use them as sprite images in the page, doing all the combining and css chopping up automatically for you. Plus you can seperate things out into subfolders and set maximum file sizes etc. You get all the benefit with virtually no cost in time or effort.
This video by Scott Hanselman on Channel 9 and this one on Craig Shoemaker’s blog explain more.
ASP.NET MVC 3 Preview 1 has been released on CodePlex. This release includes global Action filters, support for the new .Net 4 Data Annotation and Validation attributes and the Razor View Engine which everyone has been blogging about in the last few weeks.
Okay, so your site looks great, you have loads of useful content and your User Interface is life-changing, so why is no-one visiting it? Well, the chances are that your site doesn’t look so great to search engines. This is where Search Engine Optimisation (SEO) comes into effect.
There are many, many companies out there offering to increase your search engine rankings for (sometimes a considerable amount of) money. There are also a plethora of sites offering advice and several tools available which will analyse your site for SEO. However, most of these tools either charge or offer only a small toolset for a free version and we all know that advice from the Internet can mean a lot of trawling for fact/fiction, currency and usefulness.
So, in steps Microsoft with its freeSEO Toolkit. The tool plugs straight in to IIS and can be used to crawl your site and give you really in-depth analysis of exactly what a visiting search engine spider sees when it visits your site.
Now I’ve tried a few existing pieces of SEO software in the past but none of them has given me the ability to access all this information and certainly not in the way that this toolkit does. The SEO Toolkit allows you to build queries on the data and produce totally custom reports on it, along with a bunch of other really great features.
Microsoft have been releasing some really great tools for web developers recently, at a seemingly relentless pace, and this one from the IIS Team is right up there with the best of them. This video by Scott Hanselman will show you what I mean…
Macdonald, 
manos, 
awadesh and 3 others are discussing. 
Sid Conner 7:48 am on January 18, 2012 Permalink
Thanks for sharing this steve!
Steve Lydford 7:10 pm on January 24, 2012 Permalink
You are welcome! I hope you find it useful.
Gus 10:36 am on January 26, 2012 Permalink
Hello Steve I have purchased your book and it is awesome , I have no experience in coding yet I can slowly grasp the code and move things around where I want them to be!! Here is my question , I want the categories also to have an image that relates to them…
I have added this to the Edit Category Page
@Html.Label(“Category Image:”, “categoryImage”)
then after reviewing the productImage code… I am completely lost on how to program so that i can upload the image and it relate to the category!!! Can you please help me??
Steve Lydford 11:27 am on January 26, 2012 Permalink
Hi Gus, so glad you are enjoying the book. Rather than try and explain everything here, I’ll put together a blog post to show how to add this feature to TechieTogs. I’ll try and get it up in the next couple of days. Watch this space.
It’s great that you are digging through the code and making changes. It is, without a doubt, the best way to learn!
Gus 4:35 pm on January 27, 2012 Permalink
Thank you very much Steve!!!
Gus 2:05 am on February 8, 2012 Permalink
Hello steve while i am going back and forth in your book a question arose I was trying to use Html.DropDownList read from the TechieTogs database
I setup a Options table which has optionId optionTitle
optionId 1 optionTitle = Red
optionId 2 optionTitle = Blue
optionId 3 optionTitle = Green
how do i make a dropdownlist helper read those options?? and present it to the user in dropdown form in razor??
Gus 6:26 am on February 8, 2012 Permalink
I must be annonying but here goes again
‘
I got an example
var sql = “SELECT ProductId, ProductName FROM Products”;
var data = Database.Open(“Northwind”).Query(sql);
@foreach(var row in data){
@row.ProductName
}
but your productdetails.cshtml has this
@{
Layout = “~/Shared/Layouts/_Layout.cshtml”;
var productID = !UrlData[0].IsEmpty() ? UrlData[0] : “0″;
var db = Database.Open(“TechieTogsData”);
var sqlSelect = “SELECT * FROM Products WHERE productID = @0″;
var product = db.QuerySingle(sqlSelect, productID);
}
how in the world do i change it?? so it can get fix..
awadesh 3:08 pm on February 9, 2012 Permalink
thanks
manos 11:33 am on March 9, 2013 Permalink
Hello,
I try to run your app and my problem is that when I add product with decimal points into the cart I get 0 as value, if I modify the price to round value eveything is OK
Any idea what to do to correct this
Thanks, Manos
manos 11:55 am on March 9, 2013 Permalink
I found a solution ny adding to web.config file
If you have something else please reply
Macdonald 3:33 pm on May 6, 2013 Permalink
Am relative new into asp.net web pages and i have being following your work on the eCommerce app TechieTogs. suppose i have large quantity of product to display on the product page, how do i add pagination to the product page?