matomo

Adding a Site
Skip to main content

Development blog

This blog contains posts mostly regarding development in asp.net core. System Engineering and DevOps topics are also covered in this blog.
Most of the content published on this homepage is a practical approach to official documentations like docs.microsoft.com. I try to link the related parts of said documentations in every post.

If you feel that you are able to improve this blog by providing any kind of update or feedback, please do so via the comments section or the contact form.

Enjoy reading!

Adding a Site

In the last article, I inspected the HomeController.cs class. Now I want to modify it, so that it will display a contact page.

I will start with a class which was generated by the default template.

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using TestProject.Models;
namespace TestProject.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Privacy()
{
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}

 I will now add the method

/* GET: /Contact */
public IActionResult Contact()
{
/* return Contact.cshtml */
return View();
}

So it will look like this

using System.Diagnostics;
using Microsoft.AspNetCore.Mvc;
using TestProject.Models;
namespace TestProject.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Privacy()
{
return View();
}

/* GET: /Contact */
public IActionResult Contact()
{
/* return Contact.cshtml */
return View();
}
[ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
public IActionResult Error()
{
return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
}
}
}

If I start the App now and visit https://localhost:5001/Home/Contact I will get a 500 Error (In my oppinion it should be 404 Error). That's because there is no Contact.cshtml.

Screenshot 2019-01-30 at 22.33.32

Let's Create /Views/Home/Contact.cshtml. I will copy and adapt Privacy.cshtml

{
   ViewData["Title"] = "Contact";
}
<h1>@ViewData["Title"]</h1>

<p>Use this page to let your users know your contact details.</p>

If we now visit https://localhost:5001/Home/Contact we will see that the page will render.

Screenshot 2019-01-31 at 07.50.13

The next step would be to implement the contact page into the navigation bar.

/Views/Shared/_Layout.cshtml contains the html, which builds the navigation bar.

<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="Home" asp-action="Index">TestProject</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 flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<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>

You can simply add another <li> tag

<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
</li>

like this

<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="Home" asp-action="Index">TestProject</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 flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<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>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

with asp-controller and asp-action you can define a function, that will be triggered by the link.


Categories: Default, asp.net core, FrontEnd

DevOps Engineer at TIMEWARP IT Consulting GmbH

Read more posts by Marius Steinbach