The simplest way to create web applications targetting .NET is not Webforms nor ASP.NET Core MVC.
It's actually ASP.NET webpages,sometimes called Razor.
With this we are able to use Razor syntax and develope applications as easily as you can with languages like PHP.
Yet we have the full power of .NET powering applications meaning that we can use features like LINQ and ADO.NET and the rich System.Collections framework among others.
In this example we will see how easy it is. We are going to see how to populate a ListView/GridView with items from an array. We basically have a two-column Materializecss list and we populate it with our data from a string array.
Then when our Materializecss Cards Action buttons are clicked, we show the clicked items in a dialog.
Here's what we will build:
Create ASP.NET Empty web application
First we need to create an empty ASP.NET web application:
Make sure you choose empty asp.net web app:
_Layout.cshtml
This is our master page.Remember we are using materializecss as our html frontend library.
<!DOCTYPE html>
<html>
<head>
<title>@Page.Title</title>
<link href="~/Assets/css/materialize.min.css" rel="stylesheet" type="text/css" />
<link href="~/Assets/css/site.css" rel="stylesheet" type="text/css" />
@RenderSection("head", required: false)
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="~/" class="brand-logo">Camposha.info</a>
<ul class="right hide-on-med-and-down">
<li><a href="~/">Home</a></li>
<li><a href="~/about">About</a></li>
</ul>
<a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div class="container">
@RenderBody()
<br />
<br />
<br />
<br />
</div>
<footer class="page-footer orange">
<div class="container">
</div>
</footer>
</body>
</html>
index.cshtml
This is our index page:
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Camposha.info";
Page.Header = "Amazing Universe";
Page.SubHeader = "Nebulae in Universe";
String[] nebulae =
{
"Horse Head", "Black Widow", "Ghost Head", "Cat's Eye", "Elephant's Trunk", "Helix", "Rosette","Snake","Bernad 68",
"Ant", "Orion", "Butterfly", "Eagle", "Own", "Ring", "Pelican", "Flame", "Witch Head", "Bumerang"
};
}
<div>
<h3 class="header center orange-text">@Page.Header.</h3>
<h5 class="header center light-blue-text">@Page.SubHeader.</h5>
<div class="row">
<ul class="collection with-header">
@foreach (string nebular in nebulae)
{
<li>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">@nebular</span>This is the Description for @nebular
</div>
<div class="card-action">
<a onclick="alert('@nebular shown')">Show</a>
<a onclick="alert('@nebular viewed')">View</a>
</div>
</div>
</li>
}
</ul>
<a href="https://camposha.info" id="download-button" class="btn waves-effect waves-light orange">Get Started</a>
</div>
</div>site.css
Here's our css file:
ul {
list-style: none;
}
ul li {
width: 50%;
float: left;
border-right: 1px dotted #CCC;
padding: 2px;
}
Explanations
Once you've created an empty ASP.NET webpages project, right click your project and add a _Layout.cshtml template as well as a Web Page.cshtml.
The Layout is our master page. So first we specify the html,head,body tags.
Specify the Page Title
We will specify the page title. WebPageBase.Page is a dynamic class that allows us to set and get the webpage properties we can easily share among our razor as well as Layout pages.
We retrieve the title from it and show as our html title:
<title>@Page.Title</title>Reference Materialize and css files
We are using materializecss so we reference it here as well as a custom css file.
<link href="~/Assets/css/materialize.min.css" rel="stylesheet" type="text/css" />
<link href="~/Assets/css/site.css" rel="stylesheet" type="text/css" />Create NavigationBar
We will create our site's navigation bar, set its menu items as well as our logo:
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="~/" class="brand-logo">Camposha.info</a>
<ul class="right hide-on-med-and-down">
<li><a href="~/">Home</a></li>
<li><a href="~/about">About</a></li>
</ul>
<a href="" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>Render Body
This will render our index.cshtml using the RenderBody() method:
<div class="container">
@RenderBody()
<br />
<br />
<br />
<br />
</div>Site Footer
We will create our materializecss site footer:
<footer class="page-footer orange">
<div class="container">
</div>
</footer>Then we move over to our index..cshtml
Specify Layout Path
First we will specify page the layout for our site:
Layout = "~/_Layout.cshtml";Specify Page Properties
These page properties can be shared across different webpages:
Page.Title = "Camposha.info";
Page.Header = "Amazing Universe";
Page.SubHeader = "Nebulae in Universe";Create our Data Source
In this case our data source is a simple array:
String[] nebulae =
{
"Horse Head", "Black Widow", "Ghost Head", "Cat's Eye", "Elephant's Trunk", "Helix", "Rosette","Snake","Bernad 68",
"Ant", "Orion", "Butterfly", "Eagle", "Own", "Ring", "Pelican", "Flame", "Witch Head", "Bumerang"
};Show Site Header and SubHeader
Let's show the header and subheader of our site:
<h3 class="header center orange-text">@Page.Header.</h3>
<h5 class="header center light-blue-text">@Page.SubHeader.</h5>Render Articles in Materializecss List
We will render a list of Cards with action buttons based on our C# array.
Each card will have a title and description and two action buttons.
When the buttons are clicked we show alert dialog based on the button clicked and the current nebular being viewed.
<ul class="collection with-header">
@foreach (string nebular in nebulae)
{
<li>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">@nebular</span>This is the Description for @nebular
</div>
<div class="card-action">
<a onclick="alert('@nebular shown')">Show</a>
<a onclick="alert('@nebular viewed')">View</a>
</div>
</div>
</li>
}
</ul>That's it, Cheers.
