C# Basic Web Applications
Tags: csharp, beginners, codenewbie, webdev
Published: 2021-05-09 00:07:53

### HTTP CRUD Methods

**CRUD** stands for ***C**reate **R**ead **U**pdate **D**elete*.

**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**

```csharp
...

<form action="/items/delete" method="post">
  <button type="submit" name="button">Clear All Items</button>
</form>
```

### **Adding Delete to a Controller Example**

```csharp
[HttpPost("/items/delete")]
public ActionResult DeleteAll()
{
  // Code goes here.
}
```

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](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);
}
```

- 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](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**

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

    app.Run(async (context) =>
    {
      ...
    });
  }
```

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

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

```

Now we can link to an image like this:

```
<img src='~/img/photo1.jpg'/>
```

## 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:

```
@{
}
```

### **Using Layouts**

**Views/Shared/_Layout.cshtml**

```csharp
<!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>
```

Using the layout in a view:

**Views/Home/Index.cshtml**

```csharp
@{
  Layout = "_Layout";
}

...
```

### **Using Partials**

A sample partial for a footer:

**Views/Shared/Footer.cshtml**

```csharp
<div id="footer">Bottom div content</div>
```

Adding the partial to another file:

**Views/Shared/_Layout.cshtml**

```csharp
<body>
  @Html.Partial("Footer")
</body>
```