ASP.Net MVC Tute 2 - Create a Project

ASP.Net MVC Tute 2 - Create a Project

In this post I'll explain how to start ASP.Net MVC project.

Step 1: Create a MVC Project

1. Open Visual Studio

2. Select New Project

3. Under Web category

4. Select ASP.NET MVC Empty Web Application

5. Give a suitable name (I choose ERP, because we are going to do some ERP related functionality and our final product will be a tiny ERP solution.) and suitable path to store the project.


6. Click 'Ok'.

Your project will be created. Now lets start the fun part. Lets get a small scenario.

Scenario 1: Show some item details on item page.

Lets consider and apply this to the MVC concept. To do that divide the sentences to MVC ;)

Show some items details - This means view. View should have some item details.
Then there should be a Item - Model
Show item details on item page - This is the Control with the Model and the View.

Ok then. Lets apply what we have found.

1. Create a Item model inside the Models folder. (I create Item model inside folder to make things clean and separate. Ex. If we need to create Employee model we can create a Employee folder inside the Models folder.)
Model is simply a class file.

     public class Item
    {
        public int Id { get; set; }
        public string ItemName { get; set; }
        public double Price { get; set; }

    }

2. Create a Controller to manage business logic related to the Item
You can create any number of views inside the controllers. 

        public ActionResult Index()
        {
            Item item = new Item();
            item.Id = 1;
            item.ItemName = "Lumia 820";
            item.Price = 35000;
            return View(item);
        }

After creating the Model it has to be pass to the required View.

3. Lets create View to show the item details on the view.
In order to do that the model should be bind to that view.

@model ERP.Models.ItemModels.Item

Then use the @Model to access the Item details.

@model ERP.Models.ItemModels.Item
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        <h2>This is the Item page.</h2>
        <h3>Item Details</h3>
        <ul>
            <li>ID: @Model.Id</li>
            <li>Name: @Model.ItemName</li>
            <li>Price: @Model.Price</li>
        </ul>
    </div>
</body>
</html>

Build the project and run it or right click on the view and select 'View in Browser'.
Then you should able to see the following result.








Comments

Popular posts from this blog

Deploy Angular 8 app to Azure with Azure DevOps

Apache ActiveMQ 5 with .Net Core 3.1 and C#

Firebase with.Net Core and C#