fix(00_ProjectStructure): modified the details and formattings
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 719 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@@ -0,0 +1,143 @@
|
||||
\# Part 0: Roadmap of this Session
|
||||
|
||||
## Getting Started with MVC Projects
|
||||
- [x] Directory Structure: Detailed explanation of the MVC directory
|
||||
- [x] (Controllers, Views, Models, wwwroot) and the role of Program.cs in configuration.
|
||||
- [x] Routing and Controllers: Custom routing, attribute routing, and handling various HTTP requests.
|
||||
- [x] Actions in Controllers: Exploring different return types and handling different HTTP requests.
|
||||
## Controllers and Routing
|
||||
- [x] Routing Basics: Attribute-based routing and custom route parameters.
|
||||
- [x] Controller Actions: How to handle different return types like JSON, HTML, and redirect results.
|
||||
- [x] The address can contain static parts
|
||||
- [ ] How to set the Default Page in ASP
|
||||
|
||||
---
|
||||
|
||||
# Part 1: Understanding Models in ASP.NET Core MVC
|
||||
|
||||
Models are a fundamental part of the MVC architecture, representing the data structure and logic of your application. They interact with the database and contain properties that hold data and methods that implement business logic.
|
||||
|
||||
### **Model Structure and Purpose**
|
||||
|
||||
- **Data Representation**: Models define the structure of data (often aligning with database tables).
|
||||
- **Data Handling**: Models encapsulate data manipulation logic, like validation and relationships.
|
||||
- **Data Transport**: Models pass data between the controller and the view.
|
||||
|
||||
In ASP.NET Core MVC, models are typically located in a **Models** folder, and each model represents a specific data entity, like `Product`, `Customer`, or `Order`.
|
||||
|
||||
---
|
||||
|
||||
# 2. Properties in Models and Object-Oriented Programming (OOP) in `C#`
|
||||
|
||||
To understand how models work, let’s cover key OOP concepts in C#, which is essential for defining and managing models in ASP.NET Core MVC.
|
||||
|
||||
### **Properties in C#**
|
||||
|
||||
Properties in C# provide a flexible way to access and modify the fields of a class. They use `get` and `set` accessors to control how data is read or assigned.
|
||||
|
||||
Here’s an example of a basic `Product` model with properties:
|
||||
|
||||
|
||||
```c#
|
||||
public class Product {
|
||||
|
||||
public int Id { get; set; }
|
||||
// Auto-implemented property
|
||||
public decimal Price { get; set; }
|
||||
```
|
||||
|
||||
- **Auto-implemented properties** (`Price`): Define a property without explicit backing fields, useful when no custom logic is needed.
|
||||
|
||||
|
||||
### **Encapsulation and Access Modifiers**
|
||||
|
||||
Encapsulation in OOP hides the internal state of an object and restricts access to its properties and methods. C# provides access modifiers like `public`, `private`, `protected`, and `internal` to control access.
|
||||
|
||||
In ASP.NET Core MVC, models typically use **public properties** for easy access from other parts of the application (like controllers and views).
|
||||
|
||||
---
|
||||
|
||||
# 3. Passing a Model to a View
|
||||
|
||||
In ASP.NET Core MVC, data is passed from the controller to the view using models. You can pass a single model, a list of models, or even multiple models in complex scenarios.
|
||||
|
||||
### **Steps to Pass a Model from Controller to View**
|
||||
|
||||
1. **Define the Model** First, define the model class. Let’s use the `Product` model as our example.
|
||||
|
||||
```c#
|
||||
public class Product
|
||||
{
|
||||
public int Id { get; set; }
|
||||
public string Name { get; set; }
|
||||
public decimal Price { get; set; }
|
||||
}
|
||||
```
|
||||
|
||||
1. **Create a Controller Action** In your controller, create an action that will pass the model data to the view.
|
||||
|
||||
```c#
|
||||
|
||||
public class ProductsController : Controller {
|
||||
public IActionResult Details()
|
||||
{
|
||||
var product = new Product{
|
||||
Id = 1,
|
||||
Name = "Laptop",
|
||||
Price = 1500.00m
|
||||
};
|
||||
// Pass the model to the view
|
||||
return View(product);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
In this example, the `Details` action creates an instance of `Product` and passes it to the view using `View(product);`.
|
||||
|
||||
3. **Strongly-Typed Views** When passing a model to a view, it’s common to make the view "strongly typed" to enable IntelliSense and compile-time checking.
|
||||
|
||||
- Open or create a view for your action (like `Details.cshtml`).
|
||||
|
||||
- At the top of the view, specify the model type with the `@model` directive.
|
||||
|
||||
```
|
||||
@model Product <h2>Product Details</h2> <p>Product Name: @Model.Name</p> <p>Price: @Model.Price</p>
|
||||
```
|
||||
|
||||
|
||||
In this example:
|
||||
|
||||
- `@model Product` specifies that the view expects a `Product` model.
|
||||
- `@Model.Name` and `@Model.Price` retrieve properties of the `Product` instance.
|
||||
|
||||
### **Passing a List of Models**
|
||||
|
||||
To pass a collection of models, define the controller action to return a list and set the view model type accordingly.
|
||||
|
||||
|
||||
```c#
|
||||
public IActionResult List() {
|
||||
var products = new List<Product> {
|
||||
new Product { Id = 1, Name = "Laptop", Price = 1500.00m }, new Product { Id = 2, Name = "Smartphone", Price = 800.00m }
|
||||
};
|
||||
return View(products); }
|
||||
```
|
||||
|
||||
In the `List.cshtml` view:
|
||||
|
||||
|
||||
```c#
|
||||
@model IEnumerable<Product>
|
||||
<h2>Product List</h2>
|
||||
<ul>
|
||||
@foreach (var product in Model)
|
||||
{
|
||||
<li>@product.Name - @product.Price</li>
|
||||
}
|
||||
</ul>
|
||||
```
|
||||
|
||||
This example uses `IEnumerable<Product>` as the model type to handle a list of `Product` objects.
|
||||
|
||||
---
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 576 KiB |
@@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Podcast Page</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1></h1>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="podcast-header">
|
||||
<img src="podcast-cover.jpg" alt="Podcast Icon" class="podcast-icon">
|
||||
<div class="podcast-info">
|
||||
<h1 class="podcast-title">Pardazeh</h1>
|
||||
<p class="podcast-author">SBU Computer Science Scientific Association</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="episodes">
|
||||
<h2>Episodes</h2>
|
||||
<div class="episode">
|
||||
<img src="episode-zero.jpg" alt="Episode Cover">
|
||||
<div class="episode-details">
|
||||
|
||||
<h3>#0000 - Welcome to Tech Insights Podcast!</h3>
|
||||
<div class="meta">
|
||||
<span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
|
||||
<span><i class="fas fa-calendar-alt"></i> Oct 17</span>
|
||||
<span><i class="fas fa-clock"></i> 2 hr 27 min</span>
|
||||
</div>
|
||||
<br />
|
||||
<p>In this very first episode, we introduce you to the world of technology from a fresh perspective. Whether
|
||||
you're a developer, engineer, or tech enthusiast, this podcast is here to demystify emerging trends in
|
||||
technology. Join us as we break down complex topics into digestible conversations with industry experts.
|
||||
Tune in as we embark on a journey through machine learning, deep learning, artificial intelligence, and
|
||||
beyond. Let's kick things off!</p>
|
||||
</div>
|
||||
|
||||
<div class="episode-icons">
|
||||
|
||||
<div class="play-episode"><i class="fas fa-play"></i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="episode">
|
||||
<img src="episode-zero.jpg" alt="Episode Cover">
|
||||
<div class="episode-details">
|
||||
|
||||
<h3>#0012 - Welcome to Tech Insights Podcast!</h3>
|
||||
<div class="meta">
|
||||
<span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
|
||||
<span><i class="fas fa-calendar-alt"></i> Oct 17</span>
|
||||
<span><i class="fas fa-clock"></i> 2 hr 27 min</span>
|
||||
</div>
|
||||
<br />
|
||||
<p>In this very first episode, we introduce you to the world of technology from a fresh perspective. Whether
|
||||
you're a developer, engineer, or tech enthusiast, this podcast is here to demystify emerging trends in
|
||||
technology. Join us as we break down complex topics into digestible conversations with industry experts.
|
||||
Tune in as we embark on a journey through machine learning, deep learning, artificial intelligence, and
|
||||
beyond. Let's kick things off!</p>
|
||||
</div>
|
||||
|
||||
<div class="episode-icons">
|
||||
|
||||
<div class="play-episode"><i class="fas fa-play"></i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode">
|
||||
<img src="episode-one.jpg" alt="Episode Cover">
|
||||
<div class="episode-details">
|
||||
|
||||
<h3>#0001 - Machine Learning 101</h3>
|
||||
<div class="meta">
|
||||
<span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
|
||||
<span><i class="fas fa-calendar-alt"></i> Oct 17</span>
|
||||
<span><i class="fas fa-clock"></i> 2 hr 27 min</span>
|
||||
</div>
|
||||
<br />
|
||||
<p>In this episode, we dive into the fundamentals of Machine Learning. What exactly is it, and how does it
|
||||
impact our everyday lives? From predictive analytics to recommendation engines, ML is revolutionizing
|
||||
industries across the globe. We'll explore key concepts like supervised learning, unsupervised learning, and
|
||||
real-world applications, including healthcare, finance, and marketing. Listen in to understand how machines
|
||||
are learning to make decisions and predictions with minimal human intervention.</p>
|
||||
</div>
|
||||
|
||||
<div class="episode-icons">
|
||||
|
||||
<div class="play-episode"><i class="fas fa-play"></i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode">
|
||||
<img src="episode-two.jpg" alt="Episode Cover">
|
||||
<div class="episode-details">
|
||||
|
||||
<h3>#0002 - Deep Learning Demystified</h3>
|
||||
<div class="meta">
|
||||
<span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
|
||||
<span><i class="fas fa-calendar-alt"></i> Oct 17</span>
|
||||
<span><i class="fas fa-clock"></i> 2 hr 27 min</span>
|
||||
</div>
|
||||
<br />
|
||||
<p>Join us as we take a deep dive into Deep Learning, the advanced subset of Machine Learning that powers some
|
||||
of the most exciting AI applications today. Discover how neural networks mimic the human brain, enabling
|
||||
breakthroughs in image recognition, natural language processing, and even autonomous driving. We’ll break
|
||||
down the differences between traditional ML and deep learning, the role of massive datasets, and why this
|
||||
technology is becoming essential in AI research and development.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="episode-icons">
|
||||
|
||||
<div class="play-episode"><i class="fas fa-play"></i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode">
|
||||
<img src="episode-three.png" alt="Episode Cover">
|
||||
<div class="episode-details">
|
||||
|
||||
<h3>#0003 - AI</h3>
|
||||
<div class="meta">
|
||||
<span><i class="fas fa-video"></i> Video • Pardazeh Podcast</span>
|
||||
<span><i class="fas fa-calendar-alt"></i> Oct 17</span>
|
||||
<span><i class="fas fa-clock"></i> 2 hr 27 min</span>
|
||||
</div>
|
||||
<br />
|
||||
<p>Artificial Intelligence is no longer science fiction—it's shaping the future of how we live and work. In this
|
||||
episode, we explore what AI truly means, its current capabilities, and where it’s headed. From chatbots and
|
||||
virtual assistants to AI-driven decision-making in businesses, we discuss how AI is already being integrated
|
||||
into our daily lives. We'll also touch on the ethical concerns and the importance of responsible AI
|
||||
development. Get ready to envision a future powered by intelligent machines!</p>
|
||||
</div>
|
||||
|
||||
<div class="episode-icons">
|
||||
|
||||
<div class="play-episode"><i class="fas fa-play"></i></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const episodes = document.querySelectorAll(".episode");
|
||||
const observer = new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
entries.forEach((entry, index) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.style.animationDelay = `${index * 0.2}s`;
|
||||
entry.target.style.opacity = 1;
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.1,
|
||||
}
|
||||
);
|
||||
|
||||
episodes.forEach(episode => {
|
||||
observer.observe(episode);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
@@ -0,0 +1,178 @@
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #181818;
|
||||
color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 30px auto;
|
||||
padding: 20px;
|
||||
background-color: #282828;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.episodes {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.episode:hover {
|
||||
background-color: #444444;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.episode img {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.episode-details {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.episode-details h3 {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.episode-details p {
|
||||
font-size: 20px;
|
||||
color: #b3b3b3;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.episode-details .meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.meta span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: #b3b3b3;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
.play-episode {
|
||||
background-color: #1db954;
|
||||
padding: 12px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.episode-icons {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.episode-icons i {
|
||||
background-color: #444;
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.icon-play::before {
|
||||
content: '▶';
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon-add::before {
|
||||
content: '+';
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.icon-share::before {
|
||||
content: '⇪';
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.podcast-header {
|
||||
background-color: #003049;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.episode {
|
||||
background-color: #333333;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
transition: background-color 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeIn 1s ease forwards;
|
||||
}
|
||||
|
||||
.podcast-icon {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 8px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.podcast-info {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.podcast-title {
|
||||
font-size: 48px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.podcast-author {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
Reference in New Issue
Block a user