Day by Day dotNET

playing with WP, N2CMS, HTML & CSS | Getting better and better with C# & The ASP.NET Family

[daybydaydotnet]

Different methods of creating HTML Forms in ASP.NET MVC - part 3

In part 1 and 2 we made in different way HTML Form using the <select> element and <option> tag for different options to choose from. But in this example we'll use HTML Helpers. ASP.NET MVC includes standard helpers for the most common types of HTML elements, like HTML links and HTML form elements (for more about topic go to www.w3schools.com or asp.net ). Because, we are still doing the same form where user inputs his name and chooses favorite color and the form has to look like the one from previous examples, we are going to use just three HTML form elements: - BeginForm() - TextBoxFor() - DropDownListFor()

Some parts are very similar, biggest change happens in the View. Let's start with Model: 

And now the Controller. It is almost the same as for the previous part. 

And the View looks like this:

Build, run. Should look the same as in part 1.

[daybydaydotnet]

Different methods of creating HTML Forms in ASP.NET MVC - part 2

First method was very simple, but it's not how it should be done. Here is an example of another way of doing it. This time we need to create a Model too.

Now we do the Controller. It's little bit more complex than first one. But, it is more close to how it should be done. First we need to pass the names of colors to view for drop down list. But, because we need that data more than once, and we know that code should not be repeated, we create separate public ColorFormModel CreateModel() { ... } method and now when we need that data we just call that method.

And the View looks like this:

Build, run. Should look the same as previous example.

[daybydaydotnet]

Different methods of creating HTML Forms in ASP.NET MVC - part 1

This article is just introduction to creating different and much more complex forms. Simply put, HTML Forms are used to select different kinds of user input (please go to w3schools.com for more information about HTML Forms and many other cool stuff). Also, you can go to msdn.microsoft.com to see full list of available HTML helpers which we won't use just yet but it's good to know them.

This example is more focused on different methods of creating HTML Forms in ASP.NET MVC. There is no database, no JavaScript no nothing, just plain HTML and some Razor. Ok, I used Twitter Bootstrap to give it a little bit of style, but this time style is not the focus, so no judgement there :)

Essentially, we do two things:

DISPLAY FORM to a user.

ACCEPT user INPUT.

And it can be done in couple ways, well it's probably best to do it in one way, but it's good to know other options. It is basically the evolution of HTML Forms in ASP.NET.

Examples will be called ColorForm 1, 2 and 3 and in each of them user inputs his name, selects a color and submits the answer. That's it!

At the end should look something like this for all three forms:

Note: I use Visual Studio 2013, so maybe on your version the options are slightly different.

Start by creating an empty ASP.NET Web application and check for MVC. Add MVC 5 Controller - Empty (name it HomeController), add View for it. View contains links to three forms we are going to create.

Add new Controller for form 1 (ColorFormOneController).

Add a View for it and add some code to create form. This is that "display form for user" part. Build, run.

When we click Submit button, nothing happens. That's why we need to create a new action in our controller, an action that "Accepts user data" and returns some other. So, when we click Submit we pass user Name and selected color. Here how the ColorFormOneController looks now:

And the View for it: 

Go to PART 2!

[daybydaydotnet]

Building an ASP.NET Phonebook Web Application - Part 4

In Part 1 we have set the foundations, in Part 2 we did everything that’s related with Persons and in Part 3 we did the same thing but with numbers. Now, in Part 4 we'll add some simple style.

Part 4: Adding Styles to Application

In order to add some styles we first need to create css file and name it Style.css. Next step is to add link to that style sheet in aspx pages. Add (drag&drop) the file in <head> element.

Now, you can style the elements that you wont. Here is mine simple Style.css:

And it looks like this:

Check the source code for Phonebook Exercise on GitHub Repository!

[daybydaydotnet]

Building an ASP.NET Phonebook Web Application - Part 3

In Part 1 we have set the foundations and in Part 2 we did everything that’s related with Persons (list of persons, insert/edit/delete person and see persons phone numbers). Now in Part 3 we'll do the same thing but with numbers.

Part 3: Building an application

At this point you can see the list of persons, insert new person, delete it or edit. Also you can click on the "Phone" link and go to new page where's the list of that persons numbers and edit link that doesn't work yet. So we need to enable that edit link to work, also add delete and insert new number option.

1. Enable Edit link

create GetNumber method

create UpdateNumber method

create EditNumber.aspx

Code behind

GetNumber method:

UpdateNumber method:

EditNumber.aspx

Code behind:

In PhoneNumber.aspx add the following code to redirect to EditNumber.aspx...

<a href='EditNumber.aspx?id=<%# Eval("PhoneID") %>'>Edit</a>

Save, build and try to edit. Should work.

Now I wont to add Delete column and enable deleting numbers.

2. Add and enable Delete

DeleteNumber method:

After Edit column in PhoneNumber.aspx add LinkButton control for Delete:

Delete_Command:

3. Insert New Number

InsertNumber method:

InsertNumber.aspx:

Code Behind

Insert Event

At the end I added "Back to Phonebook" button on some pages. So for now everything should look fine and work.

So, in Part 4 we'll add some css.

[daybydaydotnet]

Building an ASP.NET Phonebook Web Application - Part 2

In Part 1 we have set the foundations. Now we have to build the application. In Part 2 we''ll do everything that's related with Persons (insert/edit/delete person and see persons phone numbers). 

Part 2: Building an application

Create folders MODEL and DAL. Model folder contains entities - classPerson and class PhoneNumber, that have the properties that correspond to the database Persons and PhoneNumbers table columns. DAL folder has also two classes - PersonDAL, PhoneNumberDAL, and in each class corresponding methods.

Person Class:

GetPersons Method:

In order to make our page create new aspx file - e.g. Phonebook.aspx or Default.aspx. Pages are written using a combination of HTML, server controls, and server code (what is web forms?).

First, we need to know in which way we'll display data (e.g. table, list etc.). Our list of persons should be presented in a table. We can use several controls to do that but for this case I used Repeater (it's simple). Add "Insert New Person" button after the Repeater.

Phonebook.aspx:

Also, go to code-behind file - Phonebook.aspx.cs and in Page_Load event we need to add data source and bind data to repeater.

Save, build and view in browser. It should look something like this:

Now we need to add page for the list of numbers for particular person and page for editing that person. Also, add event to Insert button and Delete LinkButton and page for inserting new person.

1. PhoneNumber.cs & GetNumbersByPersonID Method

We need to have the following two classes and method in order to continue. Note! List of phone numbers is for that particular person. So our method for getting those numbers needs to receive that persons ID and you can find that ID in query string.

PhoneNumber class:

GetNumbersByPersonID Method:

2. Create PhoneNumbers.aspx file

This time I'll use GridView for showing data. Manage columns, add data source and bind data. In Phonebook_aspx update Phone href: <a href='PhoneNumbers.aspx?id=<%# Eval("PersonID") %>'>Phone</a>.

Page_Load:

PhoneNumbers.aspx:

Save, Build, Test! Now when you click on the Phone link we see numbers of those person.

3. Edit Person

When you edit a person you already have that person data, so we need to see current data in order to change them. In PersonDAL.cs add a method that receives person ID and returns persons first and last name.

GetPerson Method:

We have the data, now we would like to change it. In PersonDAL.cs add the method for that updates.

UpdatePerson Method:

Now we need page. Create EditPerson.aspx.

EditPerson.aspx file

Edit person code behind:

First we need to read current data and than when we change them we can update.

In Phonebook.aspx update Edit href: <a href='EditPerson.aspx?id=<%# Eval("PersonID") %>'>Edit</a> 

Save, build, test!

4. Insert New Person

In PersonDAL.cs add InsertPerson method.

InsertPerson Method:

Create InsertPerson.aspx:

InsertPerson code behind

In Phonebook_aspx below Repeater add button. Change ID, text and add OnClick event.

<asp:Button ID="btn_InsertNewPerson" runat="server" Text="Insert New Person" OnClick="btn_InsertNewPerson_Click" />

Save person button:

  Build and try to add new person! It should work.

5. Delete Method

In PersonDAL.cs add DeletePerson method.

DeletePerson Method:

Go to Phonebook.aspx to Delete column and replace

<td><a href="#">Delete</a></td> with

<td><asp:LinkButton ID="lbtn_Delete" runat="server" OnCommand="lbtn_Delete_Command" CommandArgument='<%# Eval("PersonID") %>'>Delete</asp:LinkButton></td>

When we delete a row we need to reload page. We don't wont to have double code so will'll extract data source and data bind code to FillPersonList method. Use that code in Page_Load and lbtn_Delete_Command:

Upadate Phonebook.aspx.cs

Save, build, test - doesn't work!

We have problem because we need to enable cascade delete so that when we delete person all phone numbers are deleted too.

Go to Management Studio and change Delete and Update Rule to Cascade. Now it should work.

Go to Part 3 and finish application.

[daybydaydotnet]

Building an ASP.NET Phonebook Web Application - Part 1

I devided Phonebook aplication in four parts:

Part 1: Creating simple database and adding connection string.

Part 2: Building an application - doing everything that's related with persons (list of persons, insert/edit/delete person and see persons phone numbers).

Part 3: Building an application - we'll do the same thing as in Part 2 but with phone numbers.

Part 4: Adding styles.

PART 1: creating simple database and adding connection string

For building this application I used Visual Studio 2013 and SQL Server Express 2012 with SQL Server Management Studio.

Goal is to have the list of persons with links to their phone numbers. You can edit/add/delete person or phone number. Each person can have several phone numbers.

In Visual Studio create Empty Web Application - Phonebook. Then in SQL Server Management Studio create new Database with two tables - Persons and PhoneNumbers. Add the primary and foreign keys and some data.

After creating and editing tables go to the Visual Studio/Sever explorer and add connection, also in this point you need to copy the connection string which you can find under Advanced Properties/DataSource.

Add connection string to Web.config.

In Part 2 we'll build the application.

[daybydaydotnet]

ASP.NET Page Life Cycle

[daybydaydotnet]

ASP.NET Development Models

[daybydaydotnet]

Properties And Methods Exercise - Case: Product

This exercise is very similar to previous one. This time create class Product that contains properties

Name

Price

Margin

Tax

and method that calculates Retail Price.

1. Create class Product

2. Edit Main class

Run the application. It should look something like this:

[daybydaydotnet]

Properties And Methods Exercise - Case: Car

We need to create class Car that contains following Properties and Methods.

Properties:

CarBrand

Horsepower (hp)

BasicPrice

Methods:

Tax (Horsepower determines tax size)

TotalCost (the sum of the base price and tax)

So, we want user to enter the car brand, horsepower and basic price and console will print tax and total cost for that car!

1. Create class Car

2. Edit Program.cs

Run the application. It should look something like this:

[daybydaydotnet]

The Matrix

I found some interesting tasks that I would like to share. The first is a simple but interesting task - the matrix.

I had to achieve that the program does the following:

Problem approach:

we have n rows and n column (n x n)

one is shown diagonally and it's red

Suggestion: take piece of paper and do the math!

Example:

Matrix has y rows and x columns.

For n = 5;

1st diagonal: | 1-1 | 2-2 | ... | 5-5 | --> x == y (prints 1)

2nd diagonal: | 1-5 | 2-4 | ... | 5-1 | --> x+y == n+1 (prints 1)

Solution:

What is looks like:

[daybydaydotnet]

C# Generic List - Address Book example

To practice generics I made Console Application - Address Book. It's very simple, but it shows the basics.

The functional requirements for application

The menu from which you can choose five options: 

1. Add new contact

User inserts contact information

Application reads user input

Storing user input into object properties

Adding object to the list

2. Delete contact

User enters search parameters

Finding contact in list

Removing contact from list

3. Search contacts

User enters search parameters

Finding contact in list

Display data

4. Show the list of contacts

Going through the list

Checking the conditions

Display data, if the condition is met

5. Exit application

Calling the break statement that terminates the while loop

- while loop is for the menu code to be constantly executed.

Creating Menu:

When we run the aplication we see the options but we can't use it

We have to define methods that are colled by choosing a number. But first, we need to create something where we are going to hold the lists of constact, in this case I used generic list LIST:

Now we have to create where to hold contact data (properties). We create new public class Contact with two properties, Name and City (you can put as many as you want, e.g. address, phone… ):

Creating Methods

Put the menu code into while loop in order to be constantly executed. To menu code add additional code that enables you to check the entry. I used if statement, but you can also use switch statement.

  Here is the link to whole code for this application. I made some small changes - repeating code in one place.

https://gist.github.com/idukic/5796716

[daybydaydotnet]

C# Language Features

This image is just a reminder of some of the C# language features.

[daybydaydotnet]

Value & Reference Types in C#

All the types available in C# and what kinds of types they are - value or reference types.

[daybydaydotnet]

Mind Map of CSharp Types

To undrestand better I made myself a mind map of C# types. 

[daybydaydotnet]

Learn C# - where to start?

Well, after some browsing I found the video tutorials about C# fundamentals. I'm not going to tell you much about them, but I really recommend them to anyone who is trying to learn C#. In that tutorials I learned bunch of stuff, but at the beginning I had same problems understanding what was that all about. I had no idea about basic things, like: different types in C#, variables, properties, statements, classes, arrays etc.

I decided to stop watching tuts for a while and start reading a book about C#. Well there are many books and other materials about this subject so I was even more messed up. I was suggested to start with C# Language Specification (you get that with Microsoft Visual Studio). I did that, but at the same time I was reading I get little bored, I wanted to do something while learning. So I got back to tuts and that was great. I made my first console applications, than another and in the same time I was reading about things I did that day.

I really try to understand what am I doing, but sometimes it's not so easy because there is so much of different terms to comprehend. It would be great to have someone to explane things you don't understand and someone to guide you. Luckily I have. Never the less, it's all up to you. The more you practise the better you are and better you'll understend what's this all about.

The link for video tutorial:

C# Fundamentals: Development for Absolute Beginners, Introduction