Web Programming ASP NET Core In Visual Studio IDE : Part 1
By: Luis A. Sierra
 |
Introduction
|
• Most of the projects we will do to explain the use of the language will be just the intructions of ASP NET Core. In this way, the ASP NET Core can be understood natively so that the reader can clearly understand the instructions of ASP NET Core
• Once the language has been mastered, the use of HTML5/CSS and JQuery will be explain leter.
• At the end of use this tutorial the reader will can create and design a Web application they want with on ASP NET Core
What is ASP
ASP and ASP.NET are server side technologies.
Both technologies enable computer code to be executed by an Internet server.When a browser requests an ASP or ASP.NET file, the ASP engine reads the file, executes any code in the file, and returns the result to the browser.
History
It was first released in January 2002 with version 1.0 of the .NET Framework and is the successor to Microsoft's Active Server Pages (ASP) technology. ASP.NET is built on the Common Language Runtime (CLR), allowing programmers to write ASP.NET code using any supported .NET language. The ASP.NET SOAP extension framework allows ASP.NET components to process SOAP messages.
In 2016, Microsoft released ASP.NET Core as ASP.NET's successor. This new version is a re-implementation of ASP.NET as a modular web framework, together with other frameworks like Entity Framework. The new framework uses the new open-source .NET Compiler Platform (codename "Roslyn") and is cross platform. ASP.NET MVC, ASP.NET Web API, and ASP.NET Web Pages (a platform using only Razor pages) have merged into a unified MVC 6.
IDEs
- Sharp develop (Open Source) - Discontinued
- MonoDevelop (Licenced and Open Source)
Overview
ASP.NET Web Pages is an SPA application model (Single Page Application).
ASP.NET Web Pages is being merged into the new ASP.NET Core.
ASP.NET supports a number of programming models for building web applications:
ASP.NET Web Forms: A framework for building modular pages out of components, with UI events being processed server-side. This framework is not included in the ASP.NET Core versions; it only works in the "classic" ASP.NET, on Windows.
ASP.NET MVC: allows building web pages using the model–view–controller design pattern.
ASP.NET with Razor Pages: This is the latest and recommended way. This hasbecome the "default" approach for ASP.NET today. It mixes the best from all thenothers combined with PHP like syntax (PHP is probably the most popular Web Framework today)
ASP.NET Web Pages: A lightweight syntax for adding dynamic code and data access directly inside HTML markup.
ASP.NET Web API: A framework for building Web APIs on top of the .NET Framework.
ASP.NET WebHooks: Implements the Webhook pattern for subscribing to and publishing events via HTTP.
SignalR: A real-time communications framework for bi-directional communication between client and server.
Other ASP.NET extensions include:
ASP.NET Handler: Components that implement the System.Web.IHttpHandler interface. Unlike ASP.NET Pages, they have no HTML-markup file, no events and other supporting. All they have is a code-file (written in any .NET-compatible language) that writes some data to the server HTTP response. HTTP handlers are similar to ISAPI extensions.ASP.NET AJAX: An extension with both client-side as well as server-side components for writing ASP.NET pages that incorporate Ajax functionality.
ASP.NET Dynamic Data: A scaffolding extension to build data driven web applications.
ASP NET Web Forms
The same programming model as WinForms. If you already know WinForms, this is an easy
access to the world of web programming
ASP.NET Core with Razor
Again, we have different options we can use:
- Razor with MVC
- Razor Single Page Model (comparable to PHP but using C# syntax instead)
- Razor with Page Model (Code and Layout are separated in different Files)
contains a mix of HTML and Razor syntax. The Razor syntax is actually C# code mixed
together with the HTML code.
The Razor parts of the file are executed on the web server before the page is sent to the
client (your web browser).
The Razor page may also have a C# code file linked to it, this file has the extension
“.cshtml.cs” (e.g., “Index.cshtml.cs”). The “.cshtml.cs” file is called the Page Model.
In Razor with Page Model each Razor page is a pair of files:
- A “.cshtml” file that contains HTML markup with C# code using Razor syntax.
- A “.cshtml.cs” (“code behind”) file that contains C# code that handles page events.
Creating ASP .NET ProjectsASP .NET Web Forms
Create a new ASP NET Web Forms application using a C# programming language; for that, Go to Create a New project like as shown below.
In Create a new project, select the ASP.NET Web Application (.NET Framework) template for C# like as shown below.
In the next screen, We choose the option “Empty” and After that click on Create like as shown below.
Now click on Show All Templates as shown below
After that, select Web Form and Add to your projects as shown below
Add the HTML code below in WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HelloWorld.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<b style="color:orange">Hello World From HTML</b><br><br>
<b style="color:red">
<%
string text = "Hello World From ASP NET Web Form Mixed with HTML";
Response.Write(text);
%>
</b><br><br>
<asp:Label style="color:blue" ID="Label1" runat="server" Text="Label" ></asp:Label><br><br>
<i>Example created by: https://interesting-homemade-projects.blogspot.com</i>
</div>
</form>
</body>
</html>
Add the C# code below in WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace HelloWorld
{
public partial class WebForm1 : System.Web.UI.Page
{
public void Page_Load(object sender, EventArgs e)
{
string text = "Hello World From ASP NET Web Form Server Side on C#";
Label1.Text = text;
}
}
}
ASP .NET MVC
Create a new ASP NET MVC application using a C# programming language; for that, Go to Create a New project like as shown below.
In Create a new project, select the ASP.NET Web Application (.NET Framework) template for C# like as shown below.
In the next screen, We choose the option “Empty” and select the "MVC" check on the right.
After that click on Create like as shown below.
In your project, add a Class called “GreetingsModel” below the “Models” folder like as shown below.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace HelloWorld.Models
{
public class GreetingsModel
{
public string Greeting { get; set; }
}
}
Add the C# code below in HomeController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using HelloWorld.Models;
namespace HelloWorld.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
var model = new GreetingsModel
{
Greeting = "HelloWorld from ASP NET MVC",
};
return View(model);
}
}
}
Now In your project, add a view called “Index” below the “Views” folder like as shown below.
@model HelloWorld.Models.GreetingsModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div>
<h2 style="color:blue">@Model.Greeting</h2>
</div>
</body>
</html>
ASP NET Core As this point you should be familiar with Visual Studio, the C# Programming Language, and
basic concepts regarding Web Programming in general. This part gives an overview of
ASP.NET Core
ASP.NET Core is based on the .NET Core Framework (not the ordinary .NET Framework).
We have:
- ASP.NET Core MVC (Model-View Controller). If you are familiar with the MVC approach, this could be your choice.
- ASP.NET Core with Razor Pages. This is the latest and recommended way. This has become the "default" approach for ASP.NET today. It mixes the best from all the others combined with PHP like syntax (PHP is probably the most popular Web Framework today)
Important Folders and Files in ASP NET Core Projects:
appSettings.json: This file contains configuration data, such as connection strings.
Program.cs: This file contains the entry point for the program.
Startup.cs: This file contains code that configures app behavior.
wwwroot folder: Contains static files, such as Images, HTML files, JavaScript files,
and CSS files.
Pages folder: Here you are supposed to put your ASP.NET (".cshtml") web pages
Nowadays It is standard to have a folder called “Models”. This folder contains C# classes
that takes care of the data. The data can, e.g., be a database or a file, e.g., a JSON file.
In addition, we have what we call Supporting files. Supporting files have names that begin
with an underscore (_).
_Layout.cshtml: file configures UI elements common to all pages. You can use this file
to set up the navigation menu at the top of the page
Creating ASP .NET Core ProjectsCreate a new ASP.NET Core Web Application application using a C# programming language; for that, Go to Create a New project like as shown below.
In Create a new project, select the ASP.NET Core Web Application template for C# like as shown below.
In the next screen, Configure your project application, choose the name HelloWorld and save to a directory and click on Next like as shown below.
In the next screen, click on Create like as shown below.
In your project, add a Class called “GreetingsModel” below the “Models” folder like as shown below.
Add the C# code below in GreetingsModel.cs
namespace HelloWorld.Models
{
public class GreetingsModel
{
public string Greeting { get; set; }
}
}
Now In your project, select a controller called “HomeController” below the “Controller” folder and open it like as shown below.
using System.Diagnostics;
using HelloWorld.Models;
using Microsoft.AspNetCore.Mvc;
namespace HelloWorld.Controllers
{
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public IActionResult Index()
{
var model = new GreetingsModel
{
Greeting = "HelloWorld from ASP NET Core MVC",
};
return View(model);
}
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 });
}
}
}
Now In your project, select the view called “Index” below the “Views” folder and open it like as shown below.
Replace the C# code by the code below in Index
@{
ViewData["Title"] = "Home Page";
}
@model HelloWorld.Models.GreetingsModel
<div class="text-center">
<h1 class="display-4">@Model.Greeting</h1>
<br/>
<br />
<p>For More informations go to<a href="https://interesting-homemade-projects.blogspot.com"> Interesting-homemade-projects.blogspot.com</a>.</p>
</div>
ASP .NET Core Razor ConceptsBefore you start with ASP NET Core Razor You need to know the following concepts:
Razor is a markup syntax for embedding server-based code into webpages. The Razor syntax
consists of Razor markup, C#, and HTML. Files containing Razor generally have a .cshtml file
extension.
Razor supports C# and uses the @ symbol to transition from HTML to C#. Razor evaluates C#
expressions and renders them in the HTML output.
Assume the following Razor code in the .cshtml file:
<p>@DateTime.Now</p>
This outputs the current date and time in the browser window.
Creating ASP .NET Core Razor ProjectsCreate a new ASP.NET Core Razor Web Application application using a C# programming language; for that, Go to Create a New project like as shown below.
In Create a new project, select the ASP.NET Core Web Application template for C# like as shown below.
In the next screen, Configure your project application, choose the name HelloWorld and save to a directory and click on Next like as shown below.
In the next screen, click on Create like as shown below.
Now In your project, select the Page called “Index” below the “Pages” folder and open it like as shown below.
Replace the C# code by the code below in Index.cshtml
@page
@model IndexModel
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">HelloWorld</h1>
<br/>
<br />
<p>For More informations go to<a href="https://interesting-homemade-projects.blogspot.com"> Interesting-homemade-projects.blogspot.com</a>.</p>
</div>
Let’s add a message in addition to the HelloWorld.
Replace the C# code by the code below in Index.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace HelloWorld.Pages
{
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public string message = "Hi everyone, My Name is Luis A. Sierra";
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
public void OnGet()
{
}
}
}
Now Let’s make the necessary changes in the Index.cshtml file.
@page
@model IndexModel
@{
ViewData["Title"] = "Home Page";
}
<div class="text-center">
<h1 class="display-4">HelloWorld</h1>
<br/>
<b>@Model.message</b>
<br />
<br />
<p>For More informations go to<a href="https://interesting-homemade-projects.blogspot.com"> Interesting-homemade-projects.blogspot.com</a>.</p>
</div>
Post a Comment