A Simple Web Application With ASP.NET MVC - part 1

In my last post, I explained how easy it is to start web development using ASP.Net MVC with the help of different kinds of tools. So as promised I’m going to show you how to use those tools to develop a simple web application. I’m going to develop a simple student management System with a little database and few pages to edit, delete and update student details. I’m using Visual Studio 2012 and C# and I have both MVC 3 and 4 installed.
As always the first step is to create a new project. You can do that by selecting new project under files menu.

 In the left side menu, expand Installed, Templates, then Visual C# there is a ‘Web’ option listed. That is what you need to select to create a web application. When you select 'Web' VS will list a set of different templates available. You can choose any MVC version. I’m creating an MVC 3 web application, so I’m going to choose ASP.NET MVC 3 Web Application. Give a name and a location and click ok. 

Then you will be asked to select a project template.  The Internet application template provides a homepage and links to register login and log off. The empty template is better if you want to build your user interface from scratch. Since we need to understand how things work, I’m going to use that. Keep the default value for the view engine (Razor) and click ok. It will create an empty new project.

You can run the app but it will simply show a 404 error massage. If you look at the solution explorer, you can see the structure of your project. There is an APP_Start folder which contains some routing and bundling data, and a Content folder which contains CSS and themes, a Scripts folder to contain all the scripts and few others too. Among them the folders we need to work on are Models, Views and Controllers. Before that, I want you to take a look at Web.config file and Globle.asax file. Web.config file has all the configuration data, for example if we are going to connect a database to our project the connectionStrings should go in to this file and if we want to enable client side validation, this is the file we have to configure. Globle.asax is the bootstrap of our application. Everything starts with the Application_Start() method in it. Just notice it calls a method to register the routes. That’s how the server that our application runs on know how to navigate through our app. Default values in that method looks like this.

By default the controller is Home and the action is Index. Our app currently gives a 404 error massage because we still don’t have those default value in our app. So let’s go ahead and add them. Right Click on controllers folder and select Add => Controller. 

It will present a dialog box to add some values. In the controller name notice how ‘Controller’ part has automatically appended to the name. This is a must in ASP.NET MVC. Every controller must end with ‘Controller’. Let’s name it HomeContriller.  Under scaffolding options we have several templates to select from. An ‘empty controller’ will create a controller with only Index action. ‘Controller with read/write actions and views, using Entity Framework’ will create almost complete controller with all CRUD actions to your database (Like I said.. Lots of auto generation :-) ).  Since we don’t have a database yet, just select a Controller with empty read/write actions and click add. 

That option generated a bit of code (just empty methods) and we have to add method bodies later. For now let’s just run our application. Notice now we don’t get a 404, but get a different error like this.

That is because now we have created default controller and the action (i.e. Home and Index) server can navigate to ../Home/Index. What we don’t have is a view. The server looks at the places that are listed in the error massage for a matching view. It can’t find it because we haven’t created a view called Index anywhere. Creating a view in ASP.NET MVC is very easy. Right click in the controller method and select Add View.

These dialog boxes are very intelligent, they know since I’m in the Index method, I want a view called Index. View engine is Razor and I will explain what that is later. Again create strongly typed view is an option which generates a lot of code automatically. But for this time we will leave it blank and do things manually. Keep everything else as they are and click add. 

Notice how it created a new folder called Home (i.e. name of our controller) inside Views folder and added Index.cshtml file inside it. Save everything and run the app again. Now you can see there are no errors. You have a huge blank page with a large ‘Index’ header in it.

So congratulations! That’s your first web application. :-)

I didn't use any of the tools I mentioned in the last post yet. We have yet to add Entity Framework, write model classes and generate the database. For this post my main purpose was to show you how ASP.NET MVC makes it easy to create, organize and manage your code. You don’t have to wonder around thinking what goes where. If you know something is missing, you’ll know exactly where to look when you are working with ASP.NET MVC.

So I hope everything is clear. I will add some functionality to the web application in my next post. 

Why ASP.NET MVC is a better choice to develop your first dynamic web application

ASP.NET MVC has become very popular in web developments and yet some people are still refusing to move on to it. That happens when you get used to some technology. It's really hard to leave it and move on. I'm not writing this post to promote ASP.NET or something. I'm just telling you why I think it's a good choice, specially for a beginner. Because as a beginner, my experience was not a very good one with PHP. It took a long time to learn how to apply the MVC correctly to my web sites. Some of my views had unnecessary PHP code and controllers had some business logic inside them. Everything was very confusing. So I'm going to explain you how ASP.NET MVC gives you a different experience. 

First of all, if you have created web applications, complicated ones, without using a design pattern like MVC, you must know how hard it is to manage your code. MVC pattern provides a clean separation for your data access, views and business models. So if you want to change the design of your database, you only need to modify your data access classes. If you want to add some business logic to your application you can add them to your model classes. If you want to change the appearance of your web pages you only need to edit your view classes.

All this is because MVC separates HTML from your code. There are few choices to develop your web application using MVC. If you are a Java developer you can use one of the frameworks available such as Spring or Play. If you are using PHP you can use frameworks such as CodeIgnoter or CakePHP. And of course there are many other ways which I may even haven’t heard of. I’ve tried both above options before move on to ASP.NET web development and I found it a little bit hard to adopt as a beginner. Because most of the things had to be done manually even with the use of frameworks. It was a lot of work.

But once you start with ASP.NET MVC you will realize that a lot of things are done by the framework. So as a beginner you won’t have to worry about what goes where or where to put things. All you have to concern about is the functionality you want to add to each action.

Let me give you a brief explanation on the role of ASP.NET framework in running an MVC web application. As I said, all your html files are placed in a separate views folder with ‘.cshtml’ extension. And page files are stored separately as ‘.aspx’ files. When a request comes to a particular page, ASP.NET framework combines both types to generate an HTML file and sends it as a respond.

So why use this? I already told you that there are lots of auto generations. Other than that, it is very easy to combine database to your project with the help of a great framework called Entity Framework. This framework provides you a nice DbContext instance, which does all the communication with the data base. So no more long SQL  :) . This is called model first approach with EF. There is even cooler version called code first. In that, you write your model classes first, and then you build your code, EF creates the DB for you!!!

After combining the database, you have to write controllers and views, right? With Visual Studio you can right click on your controller method and select ‘add view’ then the view will be created in the correct place. You don’t have to manually go and create folders. When you create the views there are lots of auto generation options which I will talk about in another blog post.

Finally in your views, there is a really nice parser engine, Razor which enables method like html code generation and it is really easy to use. So as you can see, there are lots of help to make your web development easier. Once you start with all these help and build few apps on your own you eventually can understand how all these things work.

I’m going to illustrate how to develop a simple web application using all above ‘help’ in my next few posts. Until then, Happy coding!!! 

C# with Visual Studio: An easy way to improve your code quality.

We, all programmers normally have a programming language of preference and a favorite IDE. In my case it’s c# and Visual Studio. We think sometimes if we can read and understand our own code it’s more than enough. When you were doing single pet projects of course that was enough. Nobody is there to point out bugs and you test your own code (only if you care to test). But when you start doing very large group projects, your code’s quality plays a major role. Your code must be well organized; all the classes, variables and methods must be properly named and well commented. Because other developers in your team need to understand what you have done with the code. And your QA team members who do the testing need proper documentation to understand the functionality of your code.

Programmers normally are very lazy when it comes to commenting. Even I was. And some of us have no idea how to do correct commenting. Today I’m going to share an easy way to maintain the quality of your code using few simple tools.

The tools I was talking about are extensions for Visual Studio 2008+. One is StyleCop and other is GhostDoc. You can download them from above links and install them. I will illustrate how to use them to improve the quality of your code.

So your unformatted and uncommented code will look something like this.

StyleCop is a cool extension which can be used to analyze your code. This is how you analyze your code with StyleCop.

•    Right click on the class on your solution explorer. And select run StyleCop.

•   It will generate a list of warnings and may be errors as follows. If you double click on them you will be taken to the line where the warning appears.

You can correct the spacing errors one by one. But what about the ‘documentation header missing’ warnings? You have to write them for each and every one of your classes, methods and variables, right? Not anymore. That’s where our other extension GhostDoc comes in to play. It will do that hard work for you. This is how it is done.

• When you double click on a document header missing warning styleCop highlights that property for you. What you have to do is right click on highlighted text and select ‘document this’ option GhostDoc provides you.

•  This is how my newly generated comment looks like. Easy huh.. You can include any additional information you want to add in the header.

So I hope all the steps were clear. If you want any additional info please leave a comment. In the mean time Happy Coding!!!

First Day as an intern

As I mentioned in my previous blog post, my carrier path just started last week as a trainee software engineer. I think it was an important week because I had to do a lot of adjustments to fit into my working environment. In this blog post I'm gonna share how I did that. 

So let me start with my first day as a trainee software engineer. I woke up on that day with a little excitement and a feeling of uncertainty and of course nervous. I suddenly wasn't sure about anything on that morning. I planned everything on previous night. What to wear, how to put my hair, how I go there, what to bring and even practiced how to smile. :) But in the morning I was like, OH my god! I will look like an alien if I go dressed up like this, what if there is too much traffic and I get late? Do I have everything I need or did I miss something?. So many worries..

You may have already experienced your first day at work, but there can be few others who are looking forward to get that experience. This can be a help to them. This is how I survived the first day of my internship. I'll start with my dress. Actually I have been to my work place few times before for the interviews and I saw how people there dress. So I had a basic idea on how to dress. If you don't know anything about your future working environment, I suggest you select formal dressing. It may be too much. But over dressing is always better than under dressing. In my case my choice was fine.

If you don't know how to get there you must go really early because finding the way to your work station may not be as easy as you thought. Believe me you really don't wanna be late on your first day. In my case I went there half an hour earlier. And that extra time actually helped me settle down. 

On your first day you may not know what to bring. May be you can ask someone if there are additional things you must bring.  For example some of my batch mates were asked to bring police reports and some were asked to bring laptops. If not specifically mentioned something like that, you have to bring your NID, passports if any, a pen and a note book and something to eat if your employer doesn't provide you meals. You must know what NID and passports are needed for. Pen and notebook is to note down any important thing, may be some action you have to perform or some technical detail. You don't wanna forget important things with the excitement of the first day and make a bad impression. Right?

Remember to smile with anyone who comes on your way and be polite. You may be nervous or shy but do it anyway because it is important that everyone knows you are a friendly person. So later if you need any help you can go to them and ask for it. To adjust to the environment, your people skills are really important. All and all you are gonna spend some time there, right?

In my case all the interns from different institutes were gathered together and few presentations were carried out to give us an idea about the company background, the culture, expectations and the internship plan. In such situations pay attention to details, those really are important. You are not a student anymore. You have responsibilities to your company and your company has expectations from you. And you have to understand them. Remember to note down anything important.

In the afternoon we had a workshop and since it is a technical session I thought of writing a separate blog post on that. So I hope there were few things that might be helpful for some of you. Feel free to leave a comment. See you with my next post. :)

Here begins my Tech Ride

I wanted to start writing a blog for a long time but couldn't find time for it. But then I learned time is always there if I properly prioritize my work. When I finally found time, I had no idea what to write in a blog. What if I write something wrong? What if my posts are not interesting for anyone to read? What if the things I write are just stupid things? Well, who cares? People make mistakes. Other people will correct me if I post something wrong while some others will even criticize. We can always learn from our mistakes. 

If there are others like me who want to start blogging and doesn't know where to or how to start, I invite you to start with something you know. It doesn't have to be 100% correct or very interesting. But you have to start somewhere. right? And I'd like to kindly ask all those experienced bloggers out there to correct me if I'm wrong and suggest any kind of improvement. So here goes my first blog post.

I started my industrial training on last Monday and had a really interesting bunch of experiences. In my blog what I'm gonna do is share them with you all. Even though I named this My Tech Ride, there will be few non technical stuff too. That is because I started this blog not only to share my experience with you but also to remember my own learnings on different areas. Apart from that, I think there are things that are important when you move from being a student to being a professional. This is a very important period of time of any students life because it is kind of a transition time. There are a lot of qualities that you must develop inside you if you want to really become successful in your carrier. Last week was just the beginning of my transformation, as I see it. So stay with me and I will share all my experiences with you.