European ASP.NET MVC Hosting

BLOG about Latest ASP.NET MVC Hosting and Its Technology - Dedicated to European Windows Hosting Customer

ASP.NET MVC Hosting - HostForLIFEASP.NET :: How To Create ASP.NET Core MVC 6.0 Application?

clock February 21, 2022 08:46 by author Peter

Prerequisites
    Install Visual Studio 2022 updated version 17.0 or later.
    Install .NET SDK 6.0

Now let's start creating an ASP.NET Core MVC 6.0 web application.

Step 1 - Install Visual Studio
First, install Visual Studio 2022 in your system.

Step 2 - Open Visual Studio
Open Visual Studio 2022.

 

Step 3
Then click on Continue Without Code as shown in the following image


Step 4
Then from Visual Studio Menu, click on File -> New-> Project, as shown in the following image

Click on the New Project, then the following window appears as shown in step 5.

Step 5- Choose Project Template
You can see various project template types, choose the ASP.NET Core Web App (Model-View-Controller) .this project template creates the web application with Model, View and Controller (MVC), as shown in the following image.

After choosing the project template click on Next

Step 6 - Define Project Name and Location
In the project configuration window you will see the following options,

    Project Name
    Define any name for your project as per your choice. Here I have chosen project name as “Asp.NetCore6Demo”.

    Location
    Choose the location to save the project files on your hard drive of the system. I have chosen the Project/VS folder of the E drive of the system.

     Solution Name
    Solution name is auto-defined based on the project name, but you can change the name based on your own choice. But I have not changed my solution name. Solution name and project name both are same.

Additionally, there is a checkbox, if you have checked it, then the solution file (.Soln) and project files will be saved in the same folder. As shown in the following image.


After defining the required details, click on Next.

 Step 7 - Choose the Target Framework

Choose the target framework .NET 6.0 (Long-term support) which is the latest as shown in the following image.


After providing the required details, click the create button. It will create the ASP.NET Core MVC 6.0 web application as shown in step 8.

Step 8 - ASP.NET Core MVC 6.0 Folder Structure
The following is the default folder structure of the ASP.NET Core MVC 6.0 application.


Step 9 - Run the ASP.NET Core MVC 6.0 Application
You can build and run the application with default contents or let open the Index.cshtml file and put some contents there. Here I have some changes in index page.
Now press F5 on the keyboard or use the run option from Visual Studio to run the application in the browser. After running the application, it will show in the browser.

I hope, you have learned how to create the ASP.NET Core MVC 6.0 Web Application.

In this article, we explained how to create ASP.NET Core MVC 6.0 application. I hope this article is useful and easy to understand.



ASP.NET MVC Hosting - HostForLIFEASP.NET :: Swagger For .NET Core MVC Web API

clock February 14, 2022 07:26 by author Peter

Swagger (OpenAPI) is a language-agnostic specification for describing REST APIs. It allows both computers and humans to understand the capabilities of a REST API without direct access to the source code. Swagger UI offers a web-based UI that provides information about the service, using the generated OpenAPI specification. Swagger UI is an alternative to Postman.

I used Swagger more than several times in my articles, but just as a minor tool used in different topics. When I tried to get info of Swagger, I had to search from these articles, which were not convinient. So, I rewrite these two articles, especially about Swagger for .NET MVC Web API or .NET Core MVC Web API.

If we created a new .NET Core 5.0 Web API project, the Swagger cient for Web API would be installed by default. In our current case, although we use .NET Core 5.0, the Web API is created in a MVC module, so we need to install Swagger manually. This way will work for the .NET Core version before 5.0.

This article is part of my another article: Consume Web API By MVC In .NET Core (1), Server And Framework, we got Swagger related part here. You can see details from there.
Step 1 - Create an ASP.NET Core MVC application

We use the version of Visual Studio 2019 16.8 and .NET 5.0 SDK to build the app.

    Start Visual Studio and select Create a new project.
    In the Create a new project dialog, select ASP.NET Core Web Application > Next.
    In the Configure your new project dialog, enter MVCCallWebAPI for Project name.
    Select Create.
    In the Create a new ASP.NET Core web application dialog, select,
     
        .NET Core and ASP.NET Core 5.0 in the dropdowns.
        ASP.NET Core Web App (Model-View-Controller).
        Create

Build and run the app, you will see the following image shows the app,


Step 2~3 - Scaffold API Controller with Action using Entity Framework

Please see the article, Consume Web API By MVC In .NET Core (1), Server And Framework,
B: Add Web API with Entity Framework Code First

    Step 1: Set up a new Database context
    Step 2: Work with a database using Entity Framework code first appoach.
    Step 3,:Scaffold API Controller with Action using Entity Framework

Step 4 - Add Swagger client for Web API

1. Install Swagger Client
Right-click the project in Solution Explorer > Manage NuGet Packages, search for Swagger

Step 2~3 - Scaffold API Controller with Action using Entity Framework

Please see the article, Consume Web API By MVC In .NET Core (1), Server And Framework,
B: Add Web API with Entity Framework Code First

    Step 1: Set up a new Database context
    Step 2: Work with a database using Entity Framework code first appoach.
    Step 3,:Scaffold API Controller with Action using Entity Framework

Step 4 - Add Swagger client for Web API

1. Install Swagger Client
Right-click the project in Solution Explorer > Manage NuGet Packages, search for Swagger


There are three main components to Swashbuckle (Swagger), we only need to install two of them: SwaggerGen and SwaggerUI, the Swagger would be included.

2.  Register Swagger Client in startup.cs file
Add the Swagger generator to the services collection in the Startup.ConfigureServices method,
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
    // Register the Swagger generator, defining 1 or more Swagger documents
    services.AddSwaggerGen(c =>
    {
        c.SwaggerDoc("v2", new OpenApiInfo { Title = "MVCCallWebAPI", Version = "v2" });
    });
    ......
}


Enable the middleware for serving the generated JSON document and the Swagger UI, in the Startup.Configure method,
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // Enable middleware to serve generated Swagger as a JSON endpoint.
    app.UseSwagger();

    // Enable middleware to serve swagger-ui (HTML, JS, CSS, etc.),
    // specifying the Swagger JSON endpoint.
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v2/swagger.json", "MVCCallWebAPI");
    });
    ......
}

Now, we are almost ready to run the app.

Step 5 - Run and Test the app

Before we run the app, modify the header of the file: Views/Shared/_layout.cshtml Views again to add Swagger (line 11~13), shown below,
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <a class="navbar-brand" asp-area="" asp-controller="StoresMVC" asp-action="Index">MVC app</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Swagger" asp-action="Index">Web API</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

Now, we run the app,


Click Web API, we got the Swagger Client screen,


 



ASP.NET MVC Hosting - HostForLIFEASP.NET :: How To Show Dynamic List Using View Bag In ASP.NET MVC?

clock February 2, 2022 08:15 by author Peter

In this blog, we will learn about how we can show the dynamic list using View Bag in ASP.net MVC.

Step 1 - Create a Model
First create the Model and define the public properties of Model.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AspNetMVCPractice.Models {
    public class Employee {
        public int Id {
            get;
            set;
        }
        public string Name {
            get;
            set;
        }
        public string Address {
            get;
            set;
        }
        public string Country {
            get;
            set;
        }
        public string City {
            get;
            set;
        }
        public Department Department {
            get;
            set;
        }
    }
}


Step 2 - Define the Action Method in Controller
public ActionResult Index() {
    return View();
}

Step 3 - Create the List and Pass the Model to that List
The third step is to create the list of Employees inside your Action Method.
public ActionResult Index() {
    List < Employee > list = new List < Employee > () {
        new Employee() {
                Id = 1,
                    Name = "Mudassar",
                    Address = "Amsterdam",
                    City = "Amsterdam Netherlands",
                    Country = "Netherlands"
            },
            new Employee() {
                Id = 2,
                    Name = "Asad",
                    Address = "Amsterdam",
                    City = "Amsterdam Netherlands",
                    Country = "Netherlands"
            },
            new Employee() {
                Id = 3,
                    Name = "Mubashir",
                    Address = "Amsterdam",
                    City = "Amsterdam Netherlands",
                    Country = "Netherlands"
            },
    };
    ViewBag.model = list;
    return View();
}

Step 4 - Pass the List to View bag
Pass the data of list to view bag using model,
List < Employee > list = new List < Employee > () {
    new Employee() {
            Id = 1,
                Name = "Peter",
                Address = "Amsterdam",
                City = "Amsterdam Netherlands",
                Country = "Netherlands"
        },
        new Employee() {
            Id = 2,
                Name = "Jan",
                Address = "Amsterdam",
                City = "Amsterdam Netherlands",
                Country = "Netherlands"
        },
        new Employee() {
            Id = 3,
                Name = "Rudolph",
                Address = "Amsterdam",
                City = "Amsterdam Netherlands",
                Country = "Netherlands"
        },
};
ViewBag.model = list;


Step 5 - Show the Data on Front End
Given below code is to show the dynamic list of data using view bag in asp.net MVC.
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="wrapper">
  <div class="container">
    <table class="table">
      <thead>
        <tr>
          <th scope="col">Id</th>
          <th scope="col">Name</th>
          <th scope="col">Address</th>
          <th scope="col">City</th>
          <th scope="col">Country</th>
        </tr>
      </thead>
      @foreach (var item in ViewBag.model)
       {
      <tbody>
        <tr>
          <th scope="row">@item.Id</th>
          <td>@item.Name</td>
          <td>@item.Address</td>
          <td>@item.City</td>
          <td>@item.Country</td>
        </tr>
      </tbody>             }
    </table>
  </div>
</div>



About HostForLIFE

HostForLIFE is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2019 Hosting, ASP.NET 5 Hosting, ASP.NET MVC 6 Hosting and SQL 2019 Hosting.


Tag cloud

Sign in