Introduction
This is a full tutorial series from installing Visual Studio and other tools to deploying and running an application (a Meeting room reservation system). This will help you to connect what you already learnt in school to real world application with updated concepts and tools.
Who Is It For
So you have finished school or maybe you are learning, but when you start trying to build something and Google it (by the way, it’s the first thing you should do), you will find most tutorials and books use new technologies you haven’t learnt well. This can lead to more confusion and frustration. One way is to clear your mind (un-learn what you already know) and start over with these new concepts and later connect them with what you learnt before (that how I did it). But there is also another way, start with what you know and develop on it more, get why new ways are needed and start using them for new projects. That is what this tutorial is made for. We will start with basic SQL connection and HTML interface and step by step, we will explore concepts like MVC, ORM and Object oriented programing by building a Meeting Reservation System along the way. I’ll make the source code available for each part.
This tutorial starts with webforms to help you connect with what you may know on winforms (from VB or C# classes). But later we'll redo the same thing with latest technologies like MVC Razor then Blazor Views.
Sounds good? Let's start.
This tutorial is meant for those who have basic knowledge of programming and SQL.
Part 1: Running Your First Web Application
If you are used to building web sites, read this to understand the difference between websites and web applications.
1) Setting Environment
1.1 Installing Visual Studio
The first thing is to make sure you have the right environment.
Do you have Visual Studio installed? (Skip this if you do.)
Head over to https://visualstudio.microsoft.com/downloads/ and download the latest Community Edition from there. (It's 2019 at the time of this writing). So it will download only the online installer (which is less than 2 MB), you can then select features you need and it will automatically download and install. Microsoft now recommends this way and stopped providing a full download package (Iso file) in 2017. But I know this is difficult if you don’t have fast internet connection on your PC, (you have to download 5–40 GB depending on what features you select at the installer), if you are not comfortable with this, you can follow this link to create and offline catch on other PCs which have good internet connection and transfer the files to yours and install it offline.
Basically, you run cmd command (in the directory you downloaded the vs_community).
vs_community.exe — layout c:\vslayout — add Microsoft.VisualStudio.Workload.ManagedDesktop
— add Microsoft.VisualStudio.Workload.NetWeb — add Component.GitHub.VisualStudio
— includeOptional — lang en-US
And transfer the files to your PC (c:\vslayout) and run:
c:\vslayout\vs_community.exe — add Microsoft.VisualStudio.Workload.ManagedDesktop
— add Microsoft.VisualStudio.Workload.NetWeb — add Component.GitHub.VisualStudio
–includeOptional
It's sad Microsoft decided not to use ISO files anymore. (They say they want to keep every installer up-to-date but still…) You can also try to get un-official ISO of Visual Studio from Friends (about 48 GB). I am not sure if I can provide you the link legally.
Installing SQL Server and Management Studio (skip if you have those installed).
Since we would be using SQL Server as our database, you should also have SQL Server express and for manual database creation and modification, you will need SQL Server Management Studio.
Here are the latest links:
SQLserver management Studio 18.0
SQL Server Express Edition 2017 … it's a 5 MB online installer but you can download the full installer by pressing Download Media button and copy that file in another PC.
1.2 Creating a Project and Getting Started with WebForms
But why WebForms in 2019.
Yes, webforms and aspx pages are getting old these days.
But if you are coming from Visual Basic and C# Windows Forms background (most probably you learnt it in school), you’ll find web froms very familiar. Concepts like code-behind, designer view, drag and drop and event driven model are very similar. Later in this series, we’ll redo the App in MVC way so you can really connect and understand what’s changed and all the hypes about MVC.
Open Visual Studio, New Project and select ASP.NET Webapplication from Web Category.
So just run the application and see the default template Microsoft wants us to see.
Notice the elements Home page (default.aspx), Header (top menu) code is on (site.master), we’ll talk abut master layouts later. Play around with the files, mostly you’ll see the changes without re-running the application. (Just hit refresh on your browser.)
Stop the application if running and let’s display dynamic content.
Open default.aspx and make sure you are in source view (check at the bottom):
Change:
<h1>ASP.NET </h1>
to:
<h1>Hello <% =Name%></h1>
<% is the ASP.NET escape to server code operator, if you know PHP language it was <? /?>. It basically executes whatever in the block and renders the result (if any) with HTML.
The Name is a variable that you would have to create in the code-behind, the = key is important here, it means return the Name variable to be displayed. So let's create the variable.
Press F7 or in the solution explorer, find the file default.aspx and click the expand icon and open file default.aspx.cs.
Add a variable Name and assign it like this:
public partial class _Default : Page
{
public string Name { get; set; } = "Abebe";
protected void Page_Load(object sender, EventArgs e)
{
}
}
Now if you hit run, you will see Hello Abebe text.
Ok let's change the text dynamically.
Switch to designer view and on the left panel, you will see tools, expand and select Button. Drag and drop the button on the page.
Double click on it and you will be redirected to the code-behind file and note new function (event handler) is created. Inside the function, let's assign the Name text to another one.
protected void Button1_Click(object sender, EventArgs e)
{
Name = "Kebede";
}
Now run the application and click the button, the text Abebe will be changed to Kebede. Got it?
This should give you an idea of how to control UI elements with the code-behind. And you will notice that webforms are almost the same as windowsForms.
Switch back to design view and let's drag and drop Label element from the toolbox. Click the new label item you just dragged and in the properties window (right panel) (press F4 if you can't see it), you will find properties like Text and ID, change the Text to “Your lucky number”.
Drag another button, double click on it, and on the handler function:
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = new Random().Next().ToString();
}
If you run the app and press the second button, you will see random number displayed on the label element.
Basically when you drag elements to the page, accessible Fields that are accessible by the ID of the element would be automatically created and you can access and set any property of the element in the code-behind file. Cool, it’s the same as windowsForms.
Play around with other components and explore more. Try chaining Color of the first button, for example.
In the Next part we'll try to connect with database and display some data
Part 2-> Connecting with Database
