DEV Community

loading...
Cover image for C# Basic Web Applications

C# Basic Web Applications

saoud profile image Saoud ・3 min read

HTTP CRUD Methods

CRUD stands for **Create Read Update Delete.

GET requests information from the server, which is usually displayed to users. ASP.NET includes a HttpGet() method for GET requests.

POST alters information on the server. MVC has an HttpPost() method for POST requests.

PATCH updates existing information on the server.

DELETE removes data from the server.

We must use POST requests to update and delete records because HTML5 forms don't recognize PATCH AND DELETE.

Adding Delete to a Form Example

...

<form action="/items/delete" method="post">
  <button type="submit" name="button">Clear All Items</button>
</form>
Enter fullscreen mode Exit fullscreen mode

Adding Delete to a Controller Example

[HttpPost("/items/delete")]
public ActionResult DeleteAll()
{
  // Code goes here.
}
Enter fullscreen mode Exit fullscreen mode

Finding Objects with Unique IDs

Readonly property: a property that can be read but not overwritten.

Introduction to RESTful Routing

Terminology

  • REST: Short for Representational State Transfer.
  • RESTful Routing: A set of standards used in many different languages to create efficient, reusable routes.

REST Conventions

https://www.dropbox.com/s/k7mkxev38ddw1eo/intro-to-restful-routing-rest-routes.png?raw=1

  • Route Name refers to the name of the route method in the controller.
  • URL Path refers to the path listed above the route in a route decorator. This will also be the URL a user sees when navigating to this area of the site.
  • HTTP Method refers to the HTTP method that route will respond to, or be invoked for.
  • Purpose details what each route is responsible for.
  • :id is a placeholder for where a specific object's unique ID will be placed.

Applying RESTful Routing

Dynamic Routing

Dynamic Routing refers to routes and their URL paths that can dynamically change. Here's an example of a dynamic route:

[HttpGet("/items/{id}")]
public ActionResult Show(int id)
{
  Item foundItem = Item.Find(id);
  return View(foundItem);
}
Enter fullscreen mode Exit fullscreen mode
  • The {id} portion of the path is a placeholder.
  • The corresponding link in the view looks like this: <a href='/items/@item.Id'>.

Objects Within Objects Interface Part 2

RESTful routing conventions for applications that use objects within objects look like the image below.

Following RESTful routing doesn't require we use all routes. It just requires that the routes we do need in our applications follow these conventions.

https://www.dropbox.com/s/xj4t5jvk4atflaa/objects-within-objects-screenshot-1.png?raw=1

Using Static Content

In order to add CSS or images to our application, we need to update the Startup.cs to UseStaticFiles():

Startup.cs

  public void Configure(IApplicationBuilder app)
  {
    ...
    app.UseStaticFiles(); //THIS IS NEW
    ...

    app.Run(async (context) =>
    {
      ...
    });
  }
Enter fullscreen mode Exit fullscreen mode

img and css directories need to be inside of wwwroot, which should be in the project's root directory.

└── wwwroot
       └── img
       └── css
           └── styles.css

Enter fullscreen mode Exit fullscreen mode

Now we can link to an image like this:

<img src='~/img/photo1.jpg'/>
Enter fullscreen mode Exit fullscreen mode

Layouts and Partials

Layout view: A view that allows us to reuse the same code and content on multiple pages.

Partial view: Reusable section of code that can be inserted into other views.

Razor code block: A way to indicate Razor code that looks like this:

@{
}
Enter fullscreen mode Exit fullscreen mode

Using Layouts

Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My To-Do List!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    @RenderBody()
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Using the layout in a view:

Views/Home/Index.cshtml

@{
  Layout = "_Layout";
}

...
Enter fullscreen mode Exit fullscreen mode

Using Partials

A sample partial for a footer:

Views/Shared/Footer.cshtml

<div id="footer">Bottom div content</div>
Enter fullscreen mode Exit fullscreen mode

Adding the partial to another file:

Views/Shared/_Layout.cshtml

<body>
  @Html.Partial("Footer")
</body>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app