In this class we want to see how to populate a Materializecss list of Cards from a dictionary.
A dictionary is a collection of KeyValuePairs and is generic in nature.
On the other hand materializecss is a frontend html framework that allows us create materializecss user interfaces in a simple and easy manner.
What is ASP.NET Webpages
ASP.NET Webpages is a page-based architecture for easy creation of dynamica web pages.
ASP.NET Webpages is different from ASP.NET WebForms,ASP.NET MVC and ASP.NET Core.
With webpages you create one page at a time while adding logic and behavior inline.
It allows us write ASP.NET applications in the same way like languages like PHP, a style alot of developers are used to as you get things done without alot of boilerplate and complex configurations. You just focus on writing code.
We are Building a Vibrant YouTube Community
We have a fast rising YouTube Channel of friends. So far we've accumulated more than 2.6 million agreggate views and more than 10,000 subscribers. Here's the Channel: ProgrammingWizards TV.
Please go ahead subscribe(free obviously) as well. If you have a question or a comment you can post there instead of in this site.People are suggesting us tutorials to do there so you can too.
Here's this tutorial in Video Format.
What is Razor?
Razor is a template syntax that allows you to combine code and content in a fluid and expressive manner.
Razor allows us write code using languages we already
know, such as C# or Visual Basic .NET.
Hello World Razor
Here's a hello world in razor.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
The time is @DateTime.Now
</body>
</html>Razor files have .cshtml extension.
If Else statement in Razor
Here's an example of an if-else statement in Razor:
@if(User.IsAuthenticated) {
<span>Hello, @User.Username!</span>
} else {
<span>Please @Html.ActionLink("Sign in")</span>
}Foreach Statement in Razor
Here's an example of a foreach loop in Razor:
<ul>
@foreach( var post in blogPosts) {
<li><a href="@post.Href">@post.Title</a></li>
}
</ul>Simple Expressions in Razor
Razor allows us mix simple code expressions and text in just a single line:
Not Logged In: @Html.ActionLink("Login", "Login")As you can see the expressions is starting with the code>@</code symbol. Razor will know that the closing parenthesis indicates the end of the statement.
You simple single line expressions have to return markup that will be rendered. If you write code that returns void then you will encounter errors.
Code Blocks in Razor
A code block is a section of the view that contains strictly code rather than a combination of markup and code.
Code blocks are wrapped by @{ }. The code you write within a given block must be valid C# or VB.NET code and not a mixture of markup.
Here's an example of code block:
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Camposha.info";
Page.Header = "Amazing Universe";
}Unlike simple single line expressions, the code blocks won't render anything to a page. Instead we write code that don't return value to be rendered.
The @ Symbol
The code>@</code symbol is used by the Razor engine to differentiate code from markup.
It indicates to Razor engine our intention to switch from markup to code.
Razor relies on the current language’s syntax to determine the end of a code statement.
@foreach(var nebular in nebulars) {
<li>@nebular.Name</li>
}Comments in Razor
We can comment out portions of markup with the
code>@
@* This is a comment *@
Displayed @* Not Displayed *@ DisplayedCreate 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:
Project Structire
Here's our project structure:
site.css
Our css file.
ul {
list-style: none;
}
ul li {
width: 50%;
float: left;
border-right: 1px dotted #CCC;
padding: 2px;
}
_Layout.cshtml
<!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
Let's start"
Specify Layout and Page Variables
We need to specify the layout for this webpage. It resides in the same directory:
Layout = "~/_Layout.cshtml";Then some page variables like title and header:
Page.Title = "Camposha.info";
Page.Header = "Amazing Universe";
Page.SubHeader = "Nebulae in Universe";Create Our Data source
In this case our data source will be a dictionary. A Dictionary is a collection of keyValuePairs.
This will supply the data that will be used to populate our ListView:
Dictionary<string, string> galaxies = new Dictionary<string, string>
{...}Render Page Title and SubHeader
We will render them in the HTML markup. To access them we have to use the code>@</code symbol.
<h3 class="header center orange-text">@Page.Header.</h3>
<h5 class="header center light-blue-text">@Page.SubHeader.</h5>Loop and Render our Dictionary
We will then loop through our Dictionary KeyValuePairs, rendering the Keys and Values.
<ul class="collection with-header">
@foreach (KeyValuePair<string, string> s in galaxies)
{
<li>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">@s.Key</span>This is the Description for @s.Value
</div>
<div class="card-action">
<a onclick="alert('@s.Key shown')">Show</a>
<a onclick="alert('@s.Value viewed')">View</a>
</div>
</div>
</li>
}
</ul>Here's the full source code:
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Camposha.info";
Page.Header = "Amazing Universe";
Page.SubHeader = "Nebulae in Universe";
Dictionary<string, string> galaxies = new Dictionary<string, string>
{
["Ring Nebular"] = "The Ring Nebula is a planetary nebula in the northern constellation of Lyra. Such objects are formed when a shell of ionized gas is ",
["Cartwheel"] = "The Cartwheel Galaxy is a lenticular galaxy and ring galaxy about 500 million light-years away in the constellation Sculptor. It is an",
["Centaurus A"] = "Centaurus A or NGC 5128 is a galaxy in the constellation of Centaurus. It was discovered in 1826 by Scottish astronomer James Dunlop",
["IC 1011"] = "IC 1011 is a compact elliptical galaxy with apparent magnitude of 14.7, and with a redshift of z=0.02564 or 0.025703, yielding a distance",
["Virgo Stella Stream"] = "Virgo Stella Stream Group, located in the same part of the sky as the constellation Canis Major..................",
["Canis Majos"] = "The Canis Major Dwarf Galaxy or Canis Major Overdensity is a disputed dwarf irregular galaxy in the Local Group, located in the same part",
["Large Magellonic cloud"] = "The Large Magellanic Cloud is a satellite galaxy of the Milky Way.At a distance of 50 kiloparsecs, the LMC is the third-closest ",
["Ursa Minor"] = "The Ursa Minor descriptive milky is derived from the appearance from Earth of the Galaxy – a band of light seen in the night sky... ",
["Hoag's Object"] = "Centaurus A or NGC 5128 is a galaxy in the constellation of Centaurus. It was discovered in 1826 by Scottish astronomer James Dunlop",
["Milky Way"] = "The Milky Way is the galaxy that contains our Solar System. The descriptive milky is derived from the appearance from Earth of the galaxy – ",
["Pinwheel"] = "The Pinwheel Galaxy is a face - on spiral galaxy distanced 21 million light - years away from earth in the constellation Ursa Major. ",
["Whirlpool"] = "The Whirlpool Galaxy, also known as Messier 51a, M51a, and NGC 5194, is an interacting grand-design spiral galaxy with a Seyfert 2 active ",
["Sombrero"] = "Sombrero Galaxy is an unbarred spiral galaxy in the constellation Virgo located 31 million light-years from Earth. The galaxy has a diameter ",
["Own Nebular"] = "The Owl Nebula is a planetary nebula located approximately 2,030 light years away in the constellation Ursa Major. It was discovered by",
["StarBust"] = "A starburst Galaxy is a Galaxy undergoing an exceptionally high rate of star formation, as compared to the long-term average rate of",
["Small Magellonic cloud"] = "The Small Magellanic Cloud, or Nubecula Minor, is a dwarf galaxy near the Milky Way. It is classified as a dwarf irregular galaxy.",
["Mayall's Object"] = "Mayall's Object Galaxy is located approximately 2,030 light years away in the constellation Ursa Major. It was discovered ",
["Andromeda"] = "The Andromeda Galaxy,also known as Messier 31,M31,or NGC 224, is a spiral galaxy approximately 780 kiloparsecs from Earth.It is the nearest major ",
["Messier 87"] = "Messier 87 is a supergiant elliptical galaxy in the constellation Virgo. One of the most massive galaxies in the local universe, it is ",
["Messier 81"] = "Messier 81 is a spiral Galaxy about 12 million light-years away in the constellation Ursa Major. Due to its proximity to Earth, large",
["Triangulumn"] = "The Triangulum Galaxy is a spiral galaxy approximately 3 million light-years from Earth in the constellation Triangulum",
["Black Eye Galaxy"] = "Black Eye Galaxy Galaxy is a face-on spiral galaxy distanced 21 million light-years away from earth in the constellation Ursa Major ",
["Cosmos Redshift"]= "Cosmos Redshift 7 is a high-redshift Lyman-alpha emitter galaxy, in the constellation Sextans, about 12.9 billion light travel distance "
};
}
<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 (KeyValuePair<string, string> s in galaxies)
{
<li>
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<span class="card-title">@s.Key</span>This is the Description for @s.Value
</div>
<div class="card-action">
<a onclick="alert('@s.Key shown')">Show</a>
<a onclick="alert('@s.Value 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>
Result
ASP-NET Webpages Cards
You can click on the action buttons to show a dialog:
ASP.NET Webpages Cards Clicked
Cheers.
