ASP.NET MVC 2 RTM, Content Management System, & ValidateInput

0

I have a lot of clients asking whether I can enable them to edit their own content. Most of the time I ask questions that make them realize that they don’t really need it, but sometimes they really do want it. I’ve been developing ASP.NET MVC web applications in VS2008, but as VS2010 comes closer to being released and with ASP.NET MVC 2 hitting release, I am starting to focus my efforts on using both technologies. So I sat down today and looked at CKEditor, a WYSIWYG editor that is embeddable into your site.

The issue that I found is that ASP.NET 4.0 is really concerned about Security, so much so that it ignores my ValidateInputAttribute on my controllers. When I submit my HTML content from the client, the MVC application throws a red screen of death. By default, ASP.NET will validate all incoming requests to make sure there are no malicious things coming in.  The ValidateInputAttribute was designed to tell ASP.NET that this request is meant to contain things that might be dangerous.

There is a really simple fix to this, and it is one line long.

Solution:

  1. Open up your web.config
  2. Under System.Web add a httpRuntime node.
  3. Add requestValidationMode attribute and set it to “2.0”

image

The solution defaults back to ASP.NET 2.0’s request validation, which will respect your ValidateInputAttribute on your controller actions.

Hope this helps.

-Khalid Abuhakmeh

C4MVC Presentation on Database Migrations

0

Hello everybody. It has been about a week since I gave my C4MVC presentation on database migrations. The video is below, and the code is also downloadable below.

Migrations Example (VS2010)

Asp.Net MVC 2 Quick and Simple Site – v1

0

*Note: Asp.Net MVC 2 project in Visual Studio 2010

I sat down last night and was thinking about how I could get a simple starter site up and running for a client, until I could design something more tailored to their needs. There is nothing worse than having a “under construction” page or a “coming soon” page. It doesn’t really say much about what is happening or what might be coming. So I sat down and came up with the basics of what a client might want right from the start, here were my requirements.

  • Set a Logo, Name, and Subtitle
  • Be able to quickly edit a small about section (Content)
  • Quickly add some of the more important social networks (Twitter, YouTube, FeedBurner, Delicious, MySpace, and Facebook).
  • Be able to add Google Analytics (Optional)
  • A dynamic image gallery (drop images in a directory and everything is done for you).
  • Basic contact information. Email, Phone, and Website.
  • No external libraries to install (this hurts but is helpful).

So I sat down and started writing. I wanted someone to be able to push this site without editing a lot of files or having to setup a database. I opted to put a lot of the client’s settings in configuration. Yes configuration sections are not the new hotness but they can still serve a powerful purpose.

My first iteration had me using controller actions for each part of the site, but I slowly realized it was overkill. I opted to have one controller action from my index, and then break sections up into partial views that would be all rendered at the same time. Then those sections would be hidden and made visible using JQuery. After a little design, I ended up with this.

image

Let’s look at how to set this up.

Step 1 – Setup the Configuration

There are some pretty simple configuration sections in the web.config included with this project. You will see two App settings: WorkImagesDirectory and GoogleAnalyticsCode. The WorkImagesDirectory is used to find all the images in your gallery. Thumbnails for all your images will be automatically created if they are missing. The GoogleAnalyticsCode setting should be set to your Google Analytics code UA-XX-XXXX (or something like that). If you leave out the Google Analytics code then the script won’t be output to the page.

Next you will see a ContactInformation section. In this section you can set the name, site subtitle, email, phone, and website.

Finally, you will see a SocialNetworks section. Only the social network usernames you set will show up on the page. You can set Twitter, Facebook, YouTube, Delicious, MySpace, and FeedBurner(a blog maybe).

Step 2 – Setup Content

Once the configuration is done, then you probably want to change some of the content to reflect some good information.

All tabs are separated into partial views: About, Contact, Work, Social. Just replace the HTML content in here with what you want, leaving the nested RenderPartials.

Step 3 – Modify Colors and Images

All the images and style sheets you need to modify are under the Content directory. If you like the color and just want to modify the avatar at the top, just overwrite the avatar.png under Content/img.

Step 4 – Deploy It

Just publish what is there to your hosting provider and you are ready to go.

Conclusion

This is a good little site to get up and running for your clients, but it isn’t anything ground breaking. The code is straight forward, so even a novice can get in there and change things. The point here was not to over complicate the solution with third party libraries. It is to get a site up with in minutes, while still giving some great functionality to the people that need it.

AquaBird.StarterSite

Git –newbie –workflow

1

Introduction

I recently found the time to dedicate to learning a distributed version control system. I had the choice between Mercurial and Git. Both are great systems but what it came down to ultimately was the fact that I already had TortoiseGit on my machine. Yes you read that right, it came down to the fact that I didn’t want another source control provider taking up space in my context menu; frankly my context menu is getting a little ridiculous.my context menu I know it isn’t exactly a scientific method of picking between the two, but honestly, I see very little that is different between the two (for a learner).

Initial Reaction

When I first read the description of Git, I thought “who would be stupid enough to have source control on their own machine?” The second thought to go through my SVN-centric brain “I like SVN, so why should I change to Git?” The first question came out of ignorance to the ideas behind a distributed source control system, the second is a completely valid rebuttal.

I will attempt to address the first question. Yes your source control is on your machine but think of it as your own personal local copy of the “Truth.” You edit your version of the “Truth” until you feel comfortable with your additions and changes. The next step is to push your changes to a central version, possibly on GitHub or Unfuddle. That last step is important, because your source is no longer local. Your code now exists somewhere that is hopefully safe, secure, and accessible to you and your team of developers. What is powerful about Git is the fact that most of the expensive actions performed locally: commits, merges, additions, and deletions. This makes Git crazy fast, CRAAAAZZZY FAST! The two most expensive actions are pull and push, but even these can be quick if your central source control repository is on the local network. After a couple hours playing with Git, my ignorance about the ideas behind this system were overcome by an understanding and comfort.

The second question is valid. If you like SVN, why should you switch? Well nobody is forcing you to switch, and people won’t call you a loser if you decide to stick with SVN. I still have a warm place in my heart for SVN, it was the Han Solo of my escape from the Death Star known as VSS (Visual Source Safe). That being said, Git is a lot easier when it comes to branching and merging. In SVN branching occurs remotely on the SVN repository, which can be slow. In Git, branching happens locally and is even encouraged by most resources that I read. The one thing developers might gripe about Git is the fact that there really isn’t much Visual Studio integration. SVN has a ton of integration tools inside Visual Studio. What I would say about this though, is that the projects I work on have more than enough files outside of my VS Solution to negate the good aspects of integration tools. File types like third party assemblies, documentation, build scripts, and other files all exist outside the scope of my solutions. Now to add them to your SVN repository you are forced to use TortoiseSVN, a tool that exists outside Visual Studio.

I may or may not have convinced you to try Git, but I really feel you should. More and more compelling projects are being hosted on GitHub. How will you get involved and help these projects grow with a knowledge of Git? Also, Codeplex now offers Mercurial support, so don’t be suprised when your favorite projects on Codeplex start moving to a distrubuted SCM.

Basic Workflow

To get started with Git download MsysGit. This will setup an environment ready for Git on your windows machine.

I also recommend TekPub, they have a great series about mastering Git.

To learn about a system you have to use it, and that is what I did with Git. I wouldn’t call myself an expert but I do feel comfortable enough with it now to jump into a Git project. The basic Git workflow is as follows (type: “git help” in a command window):

  1. init or clone: if you are starting a repository use init, if you are getting use clone.
  2. branch: create a new branch to start working in or just work in the master branch.
  3. add: add any or all files involved in your project.
  4. commit: commit staged files to your local source repository.
  5. pull: get any changes that have occurred at the central repository.
  6. merge or rebase: make sure all your changes and branches are reflected in the master if need be.
  7. patch or push: some repositories online are private so you can produce a patch to send to the owners, if you own the repository the push away.
  8. Rinse and Repeat until content.

These are the commands you’ll need to know to just get by, but there are many more to become a master. I modified my environment to work with WinMerge for both merging and diffing. Below are the instructions to get that working.

  • You will need to modify your git environment. This is done through modifying the .gitconfig file found in your user folder (C:\Users\<yourname>\.gitconfig).

*Note, when you install WinMerge be sure to check the box that installs WinMerge into your system path.

    external = “c:/users/khalid abuhakmeh/difftool.sh”
[merge]
    tool = winmerge
[mergetool "winmerge"]
   cmd = ‘WinMergeU.exe’ \”$MERGED\”
   trustExitCode = false
   keepBackup = false

  • Create a bash script to execute against WinMerge. Create a file called difftool.sh and save it in the same directory. Below are the contents of my file.
#!/bin/sh
echo Launching WinMergeU.exe: $1 $2
"C:/Program Files (x86)/WinMerge/WinMergeU.exe" -e -ub "$1" "$2" | cat
#!/bin/shecho Launching WinMergeU.exe: $1 $2"C:/Program Files (x86)/WinMerge/WinMergeU.exe" -e -ub "$1" "$2" | cat

Now when you execute the commands "git diff @{1}" (compares against previous version)  or "git merge" you will get to use WinMerge to perform those actions. Pretty cool.

Conclusion

So there you have it, my initial interactions with Git and what I have learned so far. There are more things to learn, but I am definitely a convert to Git. Can you Dig Git?

shaft

Aqua Bird Consulting has moved to CoolHandle Web Hosting

6

Aqua Bird Consulting has just finished its move from its old hosting company to its new location at CoolHandle Web Hosting. I can honestly say that I am 100 times happier with the move and the service that CoolHandle offers. For those who have been reading our blog posts, we apologize for the long wait. In an effort to get back into blogging you can expect to see a lot of helpful blog posts in the up coming weeks.

Topics you can expect to see are business oriented, development oriented, and technology rants. To be specific, I have been personally working on a presentation for C4MVC  regarding database migration frameworks. Expect to see a downloadable solution for the migration presentation. For those of you the commented on previous posts, if you do not see your comments then you may have been lost in the transfer (probably a strong argument to use Disqus here). Please comment again and I will try to reply to your question.

We have been up to some really exciting things and can’t wait to share some of them with you. So anyways, the point is the Aqua Bird Consulting Blog is back! Be sure to tune in and keep reading.

Thank You,

Khalid Abuhakmeh

Windows 7 Open Firewall Ports To IIS7

1

In the saga of trying to figure out where this phantom page is coming from I decided to host the site on my local machine and see if it was ASP.NET MVC 2 itself or my host. If you are reading this I assume you already know how to use IIS and create a web application. The issue i was having is that I needed the external service Web-Sniffer to get my site as a GoogleBot. So you will need the following to open up your site. A word of caution, this opens a port on your machine and could potentially be a security hole if left open.

What You’ll Need To Start

  1. Your Router IPN
  2. Your Internal IP Address
  3. Your External IP Address
  4. Your Web Application Port Number

Forwarding Some Ports

First log into your router using the IPN address. It is usually something like 192.168.1.1. Log in and forward the Web Application Port to Your Internal IP Address. This depends on your router so consult your manual about the specifics.

Opening Some Ports

Although your ports are now forwarded to your machine, all traffic will be blocked by the Windows Firewall. This next step will open those ports.

1.) Open up Control Panel and click System and Security

image

2.) Next Click Windows Firewall

image

3.) Next click Advanced Settings on the left.

image

4.) In the new window click Inbound Rules, Then Click “New Rule…” on the right

image

5.) Then in the new window select Port and click Next

image

6.) Proceed to type in your Web Application Port Number in the textbox

image

7.) And then just keep clicking next until you are done.

Now To See The Site

Open up your favorite web browser and type your External IP Address followed by the Web Application Port. ex. 99.99.999.99:8080. You should see your site come up. If your site doesn’t come up make sure that you are forwarding ports and that your IIS web application is running. You can also enable and disable the rules in the Windows Firewall Advanced Security panel. Good Luck.

GoogleBots and the Phantom ASP.NET MVC Page

1

No this is not the newest nerd science fiction film directed by James Cameron, instead this is my current problem with ASP.NET MVC 2 and it is a huge one. I was recently reading Justin Etheredge’s blog CodeThinked and his complaints about his Google page ranking. So being curious to how my main site was doing, I began using several tools to get an SEO grade for my main site. The first tool I used was WebSite Grader to give me a grade on my SEO.

image image

 

This grade was poop! But I read a little more and realized that the page Website Grader had read was not my main page. How do I know that? Well for starters, I wouldn’t be stupid enough to keep a page’s title “Index”.

image

So what is the page the GoogleBot is seeing? I decided to use Web Sniffer a tool that let’s you mimic different clients and this is what I got.

image

WHAT THE F@$*%!!!!!! Where is that coming from. The amazing thing is that a page with a title and an empty body get’s a score at all! Obviously, if you go to my site you’ll realize that this is not the main page. What is also strange is that nowhere in my current application does this view exist, well how could it?!?! So as I tried some other pages to see what I would get, and check it out.

image

Ok so I got one page getting a grade. But something strange is occurring. The crawler tried to traverse a page that doesn’t exist! On the good side it did find metadata.

image

image

So what is the culprit here? I have no clue, but I am leaning towards routing. The strange “Services/About” page is giving me a strong a hint that something is not right. But routing wouldn’t explain the phantom view that I am getting. Who wrote it? Is it from some lost civilization of MVC developers and I was lucky enough to find it? “I See You” phantom ASP.NET MVC view, now you need to go away so my real page can get indexed, UGGGGG!

lucy_and_charlie_brown

Cu3er .Net HttpModule Updates Your Configuration

0

image

So I’ve been playing around with Cu3er, a great flash component for websites. It gives you the ability to create dynamic looking slideshows with great transition effects. I highly recommend you go over to Cu3er site and check it out. What I don’t like about Cu3er is that you can’t point it at a directory and let it pick up the image files dynamically. So I decided to help the .Net crowd with this little speed bump. I’ve done all the tedious work of mapping Xml to objects (trust me, I dislike doing this).

The main goal was to be able to drop images into a directory and update the configuration. I didn’t want to exclude anybody using Asp.Net, regardless whether you are using WebForms or ASP.NET MVC. So I finally ended up going with an HttpModule. The code executes every time a request is made and checks to see whether the contents of the image folder have been updated. For me it isn’t quite ideal, because I am reading the file system every time a request is made. I attempted to to use FileSystemWatcher but I couldn’t seem to get it firing in an ASP.NET environment.

So what are the advantages to using this HttpModule?

  • Minimal editing of Xml. Just setup the main settings node in the config.xml file and it will be preserved.
  • Could add great functionality to a CMS or dynamic site.
  • Configurable from a configuration section

So What are the disadvantages

  • Can only define one type of transition for all images.
  • It is an HttpModule that fires every request (not ideal in my mind)

How do you make it work better for you?

  • If you are using Asp.Net WebForms, create a HttpHandler that creates the configuration every time the config.xml is requested.
  • If you are using Asp.Net MVC, create a controller action that returns a ContentResult containing the config.xml every time it is requested.

This is still an initial start to what I think can be a great helper to an already great flash component. Maybe V2 of Cu3er will have this functionality already built in, so this could be obsolete by then as well. But until then you are welcome to use this library and modify this library. I consider the code I wrote as an Alpha, if that. Realize that there could be bugs. Their is no warranty or guarantee expressed or implied (a little CYA).

To make this solution work you will need to do the following.

  1. Add a reference to the Cu3er .Net Library or Project to your web project.
  2. Add the configuration section to your web.config
  3. define the directory path to watch, and the location of the config.xml
  4. define the Cu3er module in the HttpModules section
  5. import the Html and Swf into the page you’d like to use Cu3er.

Check out the example I included with the Cu3er .Net project to see how to accomplish the steps above, and be sure to read the Cu3er documentation (the example is in ASP.NET MVC, but doesn’t really use the features of ASP.NET MVC to accomplish the goal).

Cu3erExample

Oldie But Goodie : Open Flash Chart – Fixing Open Source

2

AstroZombies

This is from my old blog “Monster’s Got My .Net.” I didn’t realize that there was link to this on the OpenFlashChart site, so I am reposting it here for anyone that would like to use the code. Hope I didn’t inconvenience anyone.

So if you have ever had to write a report of any kind, you know how much your clients are itching to have some kind of chart on the page, and something with a lot of pizzazz. Well the problem is that those charts usually can cost you a pretty penny. Companies like Telerik and Infragistics offer great products, but for those with a budget (you cheap bast’d) there are great open source alternatives. The problem with open source sometimes is that it usually written to support multiple web technologies and not just ASP.NET. Everybody knows ASP.NET is the best and obviously these open source projects are written with a lapse in judgement, but forgiveness is the best policy because these projects can be awesome (just kidding about the lapse in judgement).

OpenFlashChart.zip (694.51 kb (Visual Studio 2008)

What I found in my search was Open Flash Chart,which is amazing. So I downloaded the project and installed it, and it had a .NET example in there (in chinese) and it worked but I didn’t like how it worked. I then looked on CodePlex and found someone who implemented a cool version of Open Flash Chart, but it didn’t work with the newer Open Flash Chart build. The newer version uses JSON. I decided to take both projects and merge them together to make a better mouse trap.This project was written using some of the new features of C# 3.0, so if you need to run it in 2005 then you might need to modify some of the code.

There are three aspects to this project: the ASP.NET Control, the Charts, and an HttpHandler. If you want to see the details of the infrastructure I suggest you look at the original author’s post, I only take credit for fixing it, but he wrote the ASP.NET infrastructure originally.

If you are intereseted in an Open Flash Chart control you can download the assembly here. I will also try to contact the original author and get the latest version on codeplex.

OpenFlashChart.zip (694.51 kb) Visual Studio 2008

Note: The HttpHandler solution utilizes cache, which works until you try to use it on load balanced machines without distributed cache. You can point the control to data pages as a work around. Play around and see what’s in the code. All credit goes to the original authors, I greatly respect their work and have included credit in the example project.

Update : How Ironic, the download to the fix didn’t work. I think it works now so you can download it.

Chrome Hidden Feature – Search Other Than Google

0

I love using Google chrome for my daily browsing, it just loads fast and does the job I need it to do (although I love FireFox as a developer). Anyways, I love using the quick search feature they have built into the browser. If you don’t know what I’m talking about I’ll show you.

First you type in Google.com, like below.

image

Then you press the TAB key, and you get the search box.

image

Nothing new here if you are a regular chrome user, but check this out. What if you don’t like Google (I bite my tongue a little as I say this). What if you like Bing? What if you like Yahoo!? What if you want to search WordPress.com?

image

image

image

Well all you have to do is type the address and press tab. Pretty cool if you ask me. This trick only works with certain sites, so play around with a few and see if you can’t discover one that is search enabled through the Chrome awesome bar.

No longer waste time navigating to the front page of a search engine, you could use those extra seconds for something more useful.

Go to Top