https://code.tutsplus.com/courses/aspnet-web-pages-web-forms-and-mvc/lessons/introduction
- Done in WebMatrix2 (deprecated) and Visual Studio
- Web Pages framework, Microsoft's version of dumbing-down ASP.NET
- Use to create simple old school websites.
- Web Page framework is a modern take of mixing markup and server side code together.
@{
var errorMessage = "Something went wrong";
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Site's Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<style>
.bold { font-weight: bold;}
.italic { font-style: italic; }
</style>
</head>
<body>
@if (!string.IsNullOrEmpty(errorMessage)) {
<h1>@errorMessage</h1>
}<?xml version="1.0" encoding="utf-8" ?>
<people>
<person>
<firstName>Jeremy</firstName>
<lastName>McPeak</lastName>
</person>
<person>
<firstName>Jeffrey</firstName>
<lastName>Way</lastName>
</person>
<person>
<firstName>John</firstName>
<lastName>Doe</lastName>
</person>
<person>
<firstName>Johnny</firstName>
<lastName>Bravo</lastName>
</person>
</people>@using System.Xml.Linq;
@{
var path = Server.MapPath("people.xml");
var root = XElement.Load(path);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
@{
// select with anonymous obj
var people = from el in root.Elements("person")
select new {
FirstName = (string)el.Element("firstName"),
LastName = (string)el.Element("lastName")
};
foreach (var person in people) {
<p>@person.FirstName @person.LastName</p>
}
}- App_Code is a special folder within ASP.NET website, you can drop code in here and the data type in here is global within the application and this is not accessible to the client and is compiled.
- People.cshtml is the method style (statically typed webpage) while People2.cs is the class style. The class style is better.
- See lesson 5 folder.
- Lesson 6 simple contact form that post to itself and then use
Requestto get the data and store into the database. - Also provides a sample database object.
public IEnumerable<dynamic> GetAll() {
return _db.Query("SELECT * FROM ContactLog ORDER BY DateSent DESC");
}
@using (var repo = new ContactLogRepository("Lesson06")) {
var counter = 1;
foreach (var log in repo.GetAll()) {
var cssClass = counter++ % 2 == 0 ? "even" : "odd";
<tr class="@cssClass">
<td>@log.Name</td>
<td>@log.Subject</td>
<td>@log.DateSent.ToString("yyyy-MM-dd HH:mm")</td>
</tr>
}
}- Lesson 7
- Interesting way to server side validate.
- Lesson 8
- CSRF and Line 82-97 ASP.NET auto-captures if a input may have HTML in it.
var id = Request.QueryString["id"];
var isInvalidId = id == null || !id.IsInt(); // true if ID == null or not integer
dynamic message = null;-
- Lesson 10 *
- Simple page that allows input and show records from a table.
- localhost:1111/contact/log/1
<!-- /contact/success.chtml -->
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Thank You!";
}
<p>Thanks for submitting your message. <a href="contact.cshtml">Contact us again!</a></p>
<!-- /contact/log.chtml -->
@{
Layout = "~/_Layout.cshtml";
Page.Title = "Contact Log";
var id = UrlData[0];
}
@if (string.IsNullOrEmpty(id)) {
@RenderPage("logdisplay.cshtml", id);
} else {
Page.Title = "Contact Message Detail";
@RenderPage("contactdetail.cshtml", id);
}<!-- Layout.chtml -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
<style>
.field-validation-error { color: red; }
.even { background-color: #e1f3ff;}
.odd { background-color: white; }
</style>
</head>
<body>
@RenderBody()
</body>
</html>- Lesson 12 and Lesson 13
- Simple registration, login, logout and protected areas.
if (WebSecurity.IsAuthenticated) {
<p>Welcome, @WebSecurity.CurrentUserName | <a href="/logout">Logout</a></p>
}- _AppStart.cshtml contains the database schema and ASP.NET will create the table appropriately.
@{
WebSecurity.InitializeDatabaseConnection("Lesson12", "UserProfile", "UserID", "Email", false);
}
@if(Roles.IsUserInRole("Admin")) {
<p>This is super protected information.</p>
}
- New Project and New Web Sites are essentially the same thing in that they are ASP.NET application. However they are handling different during run-time. A project is compiled, and you put the compiled binary on the server. The server has to just run the binary and perhaps compile a few other files, the binaries are in memory for about 20 minutes then shutdown and release from memory. A Web Site is not compiled. The server compiles and then put in the memory. And at a low about 20 minutes then release from memoery.
- Projects are faster but Web Sites allows for flexibility to drop in a file.
- Web Pages can be found in project. You just see Web Forms and MVC.
- Web Pages are apart of Web Sites. ASP.NET Web Site (Razor v2)
- Lesson 14 has a sample Web Sites created from Visual Studio.
- Done in Visual Studio
- Deprecated.
- Skip learning.
- Done in Visual Studio
- MVC prioneer by Xerox
- Easier to maintain and test in today's TDD environment.
- Model - data representation, its not the data itself - that's the data store, its not the data-access - that's the data-access layer. It does represent the data. Model is used by the View to show data to the user.
- View - The View knows about the Model, but the Model does not know about the View, also responsible of getting data from the user. Serves as both input and output data.
- Controller - Glues the Model and View together. Gets request from the View and gets what it needs from the Model onto the View. Sometimes even straight to the data-access layer.
- ASP.NET MVC 4 > Basic
- Unlike Web Pages & Web Sites the routing is central to MVC. And the 2 predecessor methods, the routing is based on the physical file on the file server that handles the request. MVC app is not file based. The response from that is sent back to the browser is the result of calling a method on a class.
- Below in RouteConfig.cs, we have one route specified named Default with 3 pattern parameters
- controller - class
- action - method on that controller class
- id - any other parameters
// matches: localhost.home/index/10
// look for HomeController the look for index method and then pass value of 10
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } // if nothing is specified for controller/action/id then use these default and id is optional
);- Lesson 25, uses a simple contact form MVC5 example, good use of seperation of concerns, view the following:
- Model/ContactMessage.cs - model binding class with validation and label error code
- View/Contact/Index.cshtml - show the error codes
- Controller/ContactController.cs - pass binding class to view
// in a view
@Html.ActionLink("Contact Us", "Index", "Contact");
// alternative - which uses the route map in RouteConfig.cs
@Html.RouteLink("Contact Us", new { controller = "Contact"});- Create strongly typed view with model binding
// model
public class ContactMessage {
public string Name { get; set; }
public string Email { get; set; }
}
// controller
public string index (ContactMessage post) {
return post.Name;
}
// view
@model ContactMVC.Models.ContactMessage- When you have Visual Studio create the view (Right Click on the Controller), make sure it's Razor (CSHTML), Create A Strongly-Typed View, and Reference Script Library.
public ActionResult Index(ContactMessage post)
{
if (ModelState.IsValid) // if pass validation
{
// TempData is extremely temporary to pass modelview data to the successfulmessage controller
// and we can't directly pass the post to it since it's not being called directly.
// TempData is a built in datastore.
TempData["ContactMessage"] = post;
return RedirectToAction("SuccessfulMessage"); // redirect to successful view
}
return View(post); // return back the post to the same view
}
public ActionResult SuccessfulMessage()
{
var message = (ContactMessage)TempData["ContactMessage"]; //convert some of the tempdata to modelview
return View(message);
}- Lesson on Entity Framework Code-First
- Use Lesson 25.
- Objects that interacts with the database are organized under Data, author preference
- Look at the following files and how they are organized
- Controllers/ContactController.cs
- Data/ContactDatabase.cs
- Model/ContactMessage.cs
- Use
NonActionif you want the routing to not use a particular function and not make it not able to route a request. Good for SEO.
[NonAction]
public ActionResult LogList()
{ }- Nullable int and set id to null
public ActionResult Log(int? id = null){}- Partial Views are views you can use within other views. Perfect for re-purposeable code.
Html.Partials("Message", Model)returns a string and can save the result to a variable if you want or use it with the @ sign prefix to render.Html.RenderPartial("Message", Model)renders it right away to the response stream and needs to be in a code-block.