Scribd
Upload
8 views8 pages

Practical 7

The document outlines a practical assignment for creating a file upload feature using ASP.NET Core Razor Pages, including tasks for file validation, layout creation, and theming. It details the implementation of a file upload form, backend logic for handling file uploads, and the creation of a master layout page for consistent navigation across the application. Additionally, it emphasizes the importance of styling and dynamic navigation based on user roles, culminating in a submission requirement for the project solution and documentation of the implemented features.

Uploaded by

rrelaxing17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views8 pages

Practical 7

The document outlines a practical assignment for creating a file upload feature using ASP.NET Core Razor Pages, including tasks for file validation, layout creation, and theming. It details the implementation of a file upload form, backend logic for handling file uploads, and the creation of a master layout page for consistent navigation across the application. Additionally, it emphasizes the importance of styling and dynamic navigation based on user roles, culminating in a submission requirement for the project solution and documentation of the implemented features.

Uploaded by

rrelaxing17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Practical 7: File Upload, Master Pages, Themes and Navigation

Complete all tasks.

Task 1: File Upload


In this task, you will develop a Razor Page that allows users to upload files. The
application should:
1. Provide a file upload form with a "Choose File" button and a submit option.
2. Restrict the allowed file types to .jpg, .png, .pdf, and .txt.
3. Enforce a maximum file size limit of 5MB.
4. Save the uploaded file in the wwwroot/uploads/ directory.
5. Display a success message with the uploaded file name, size, and type.
6. Handle errors if the file type is not allowed or if the file size exceeds the limit.

Create a New ASP.NET Core Razor Pages Project


 Open Visual Studio and create a ASP.NET Core Web App (Razor Pages) project.
 Name it FileUploadDemo and configure it with .NET Core 6 or later.

Add a Razor Page (Upload.cshtml & Upload.cshtml.cs)


 Right-click on the Pages folder → Add → Razor Page → Name it Upload.cshtml.

Modify Upload.cshtml (Frontend UI)


 Create a form with a file input field and submit button.

Upload.cshtml (UI - HTML & Bootstrap)

@page
@model FileUploadDemo.Pages.UploadModel
@{
ViewData["Title"] ="File Upload";
}

<h2>Upload a File</h2>

@if (!string.IsNullOrEmpty(Model.Message))
{
<div class="alert alert-info">@Model.Message</div>
}

<form method="post" enctype="multipart/form-data">


<div class="form-group">
<label>Select a file (JPG, PNG, PDF, TXT - Max: 5MB):</label>
<input type="file" class="form-control" asp-for="UploadedFile" required />
</div>
<button type="submit" class="btn btn-primary mt-2">Upload</button>
</form>
Upload.cshtml.cs (Backend Logic - C#)
Modify Upload.cshtml.cs (Backend Logic)
 Implement file validation (type and size).
 Save the file in wwwroot/uploads/.
 Display success or error messages.
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System.ComponentModel.DataAnnotations;
using System.IO;
using System.Threading.Tasks;

namespace FileUploadDemo.Pages
{
public class UploadModel : PageModel
{
[BindProperty]
[Required]
public IFormFile UploadedFile {get; set; }

public string Message {get; set; }

private readonly string[] AllowedExtensions ={".jpg", ".png", ".pdf", ".txt" };


private const long MaxFileSize =5 * 1024 * 1024; // 5MB

public async Task<IActionResult>OnPostAsync()


{
if (UploadedFile ==null || UploadedFile.Length ==0)
{
Message ="Please select a file.";
return Page();
}

var fileExtension =Path.GetExtension(UploadedFile.FileName).ToLower();


if (!AllowedExtensions.Contains(fileExtension))
{
Message ="Invalid file type! Only JPG, PNG, PDF, and TXT files are allowed.";
return Page();
}

if (UploadedFile.Length >MaxFileSize)
{
Message ="File size exceeds the 5MB limit!";
return Page();
}

var uploadPath =Path.Combine("wwwroot", "uploads");


if (!Directory.Exists(uploadPath))
{
Directory.CreateDirectory(uploadPath);
}

var filePath =Path.Combine(uploadPath, UploadedFile.FileName);


using (var fileStream =new FileStream(filePath, FileMode.Create))
{
await UploadedFile.CopyToAsync(fileStream);
}

Message =$"File '{UploadedFile.FileName}' uploaded successfully!";


return Page();
}
}
}
Task 2: Create the Master Page
1. Create the Layout Page
First, create a new Razor layout page. This page will act as your master page.

File: _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewData["Title"] - My Application</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/About">About</a></li>
<li><a href="/Contact">Contact</a></li>
</ul>
</nav>
</header>
<main role="main" class="container">
@RenderBody()
</main>
<footer>
<p>&copy; 2025 - My Application</p>
</footer>
<script src="~/js/site.js"></script>
</body>
</html>

2. Use the Layout Page in Other Pages


Next, you need to reference this layout page in your other Razor pages.

Page: Index.cshtml
@page
@model IndexModel
@{
Layout ="_Layout";
ViewData["Title"] ="Home Page";
}

<h1>Welcome to My Application</h1>
<p>This is the home page.</p>

Configure the Layout in _ViewStart.cshtml


To ensure that all your Razor pages use the layout by default, you can configure it in
the _ViewStart.cshtml file.

File: _ViewStart.cshtml

4. Add Styles and Scripts


Ensure you have the necessary CSS and JavaScript files referenced in your layout
page. You can place these files in the wwwroot folder.

CSS: site.css

body {
font-family: Arial, sans-serif;
}

header {
background-color: #f8f9fa;
padding: 10px 0;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

footer {
text-align: center;
padding: 10px 0;
background-color: #f8f9fa;
}

JavaScript: site.js
Task 3: Theme and Navigation

To set up a theme, you typically need to work with CSS and possibly some
JavaScript. Here’s a basic example:

Step 1: Create a CSS File


Create a CSS file in the wwwroot/css directory. Name it site.css.

/* wwwroot/css/site.css */
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
}

header {
background-color: #007bff;
color: white;
padding: 10px 0;
text-align: center;
}

nav {
margin: 10px 0;
}

nav a {
margin: 0 15px;
text-decoration: none;
color: #007bff;
}

nav a:hover {
text-decoration: underline;
}

Step 2: Reference the CSS in Layout


In your _Layout.cshtml file, reference the CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - My ASP.NET Application</title>
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<h1>My ASP.NET Application</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/About">About</a>
<a href="/Contact">Contact</a>
</nav>
<div class="container">
@RenderBody()
</div>
</body>
</html>

2. Creating Navigation
Navigation is typically handled in the _Layout.cshtml file, as shown above. Here’s a
more detailed example:

Step 1: Define Navigation Links


In the _Layout.cshtml file, you can define your navigation links within a <nav>
element:

Step 2: Style the Navigation


You can add styles to your site.css to make the navigation look better:
3. Dynamic Navigation

If you need dynamic navigation based on user roles or other conditions, you can use
Razor syntax to conditionally render links:

Task 4:
Based on the GUI you have created before, apply the file upload, master page,
themes and navigation wherever possible/suitable.
Submission:
1. The project solution folder for all tasks.
2. The justification of the elements you applied for Task 4 and the screenshot of
the result in Ms. Word file.

You might also like