Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Lab 6: Upload file contents to a Razor Page in ASP .Net Core
This topic builds upon the sample app in Get started with Razor Pages in ASP.NET Core.
This topic shows how to use simple model binding to upload files, which works well for uploading small files.
In the following steps, a flower schedule (regarding to the plants’ coming produce time) file upload feature is added to the sample app. A flower schedule is represented by a Schedule class. The class includes two versions of the schedule. One version is provided to customers, PublicSchedule. The other version is used for company employees, PrivateSchedule. Each version is uploaded as a separate file.
The tutorial demonstrates how to perform two file uploads from a page with a single POST to the server.
a. Use the Lab 5 Project Solution to continue the Lab 6 Exercise
Estimation time for this section A: 5 Minutes 1.
2. Then, open the folder of “MVCFlowerShop-Lab 6” and open the solution with the Visual Studio.
Open the Folder Explorer and go to C:\Users\
Lab 6”.
Level 3
Asia Pacific University of Technology & Innovation Page 1 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
b. AddaFileUploadclass
Estimation time for this section B: 5 Minutes
3.
Right click the Models folder. Select Add > Class. Name the class FileUpload and
add the following properties:
Level 3 Asia Pacific University of Technology & Innovation Page 2 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
c. Add a helper method to upload files.
Estimation time for this section C: 10 Minutes
To avoid code duplication for processing uploaded schedule files, add a static helper method first.
1.
Create a Utilities folder in the app.
Add a FileHelpers.cs file with the following contents at the top of the page:
2.
Level 3
Asia Pacific University of Technology & Innovation Page 3 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
using MVCFlowerShop.Models;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc.ModelBinding; using System.ComponentModel.DataAnnotations; using System.IO;
using System.Net;
using System.Reflection;
using System.Text;
3. Then add the helper method, ProcessFormFile under the public class FileHelpers{}. This method should takes an IFormFile and ModelStateDictionary and returns a string containing the file’s size and content.
4.
Then add the below codes to the ProcessFormFile() method. In this codes, the content type and length of a file are checked. If the file doesn’t pass a validation check, an error is added to the ModelState.
var fieldDisplayName = string.Empty;
// Use reflection to obtain the display name for the model property associated with this IFormFile. If a display name isn’t found, error messages simply won’t show a display name.
MemberInfo property = typeof(FileUpload).GetProperty(formFile.Name.Substring(formFile.Name.IndexOf (“.”) + 1));
if (property != null)
{
var displayAttribute = property.GetCustomAttribute(typeof(DisplayAttribute)) as DisplayAttribute;
Level 3
Asia Pacific University of Technology & Innovation Page 4 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
if (displayAttribute != null)
{
fieldDisplayName = $”{displayAttribute.Name} “; }
}
// Use Path.GetFileName to obtain the file name, which will strip any path information passed as part of the FileName property. HtmlEncode the result in case it must be returned in an error message.
var fileName = WebUtility.HtmlEncode(Path.GetFileName(formFile.FileName));
if (formFile.ContentType.ToLower() != “text/plain”) {
modelState.AddModelError(formFile.Name, $”The {fieldDisplayName}file ({fileName}) must be a text file.”);
}
// Check the file length and don’t bother attempting to read it if the file contains no content. This check doesn’t catch files that only have a BOM as their content, so a content length check is made later after reading the file’s content to catch a file that only contains a BOM.
if (formFile.Length == 0)
{
modelState.AddModelError(formFile.Name, $”The {fieldDisplayName}file ({fileName}) is empty.”);
}
else if (formFile.Length > 1048576)
{
modelState.AddModelError(formFile.Name, $”The {fieldDisplayName}file ({fileName}) exceeds 1 MB.”);
}
else
{
try
{
string fileContents;
// The StreamReader is created to read files that are UTF-8 encoded. If uploads require some other encoding, provide the encoding in the using statement. To change to 32-bit encoding, change new UTF8Encoding(…) to new UTF32Encoding().
using (var reader = new StreamReader(formFile.OpenReadStream(), new UTF8Encoding(encoderShouldEmitUTF8Identifier: false,
throwOnInvalidBytes: true), detectEncodingFromByteOrderMarks: true)
) {
fileContents = await reader.ReadToEndAsync();
// Check the content length in case the file’s only content was a BOM and
the content is actually empty after removing the BOM.
if (fileContents.Length > 0)
{
return fileContents;
}
else
{
modelState.AddModelError(formFile.Name,
$”The {fieldDisplayName}file ({fileName}) is empty.”);
} }
}
catch (Exception ex)
{
modelState.AddModelError(formFile.Name,
$”The {fieldDisplayName}file ({fileName}) upload failed. ” + $”Please contact the Help Desk for support. Error: {ex.Message}”); // Log the exception
} }
return string.Empty;
Level 3 Asia Pacific University of Technology & Innovation Page 5 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
d. Add the Schedule class.
Estimation time for this section C: 5 Minutes
1. Right click the Models folder. Select Add > Class. Name the class Schedule and
add the following properties:
Level 3 Asia Pacific University of Technology & Innovation Page 6 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
e.
Update the MVCFlowerShopContext and add the Schedule table to the database
Estimation time for this section E: 10 Minutes
1. Specify a DbSet in the MVCFlowerShopContext (Data/MVCFlowerShopContext.cs)
for the schedules:
2. Open the Package Manger Console (PMC): Tools > NuGet Package Manager > Package Manager Console.
3. In the PMC, execute the following commands. These commands add a Schedule table to the database:
Add-Migration AddScheduleTable
Update-Database
Level 3
Asia Pacific University of Technology & Innovation Page 7 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
f.
Add a file upload Razor Page
Estimation time for this section F: 20 Minutes
1.
In the Pages folder, create a Schedules folder.
2.
In the Schedules folder, create a page named Index.cshtml for schedule with the following content:
uploading a
Level 3
Asia Pacific University of Technology & Innovation
Page 8 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Level 3 Asia Pacific University of Technology & Innovation Page 9 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
3. Edit the page model (Index.cshtml.cs) in the Schedules folder with the below contents:
Add the below lines at the top of the page:
Add the below lines inside the public class IndexModel : PageModel{}
Level 3 Asia Pacific University of Technology & Innovation Page 10 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
g.
Link the file upload Razor Page
Estimation time for this section G: 10 Minutes
1.
2.
Open Pages/Shared/_Layout.cshtml and add a link to the navigation bar to reach the Schedules page:
Now, run your project to see whether can upload the file to the SQL Database.
Level 3
Asia Pacific University of Technology & Innovation Page 11 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Level 3
Asia Pacific University of Technology & Innovation Page 12 of 18
Error message due to the system only accept the text file. Now, re-upload the text file to the DB.
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Level 3 Asia Pacific University of Technology & Innovation Page 13 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
h.
Add a page to confirm schedule deletion
Estimation time for this section H: 20 Minutes
1. When the user clicks to delete a schedule, a chance to cancel the operation is provided. Therefore, now, add a delete confirmation page (Delete.cshtml) to the Schedules folder:
Level 3
Asia Pacific University of Technology & Innovation Page 14 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
2. In the Delete.cshtml, edit the page to have the below codes.
3. The page model (Delete.cshtml.cs) loads a single schedule identified by id in the request’s route data. Therefore, open the Delete.cshtml.cs file which located in the Schedules folder, and add the below code to it:
Level 3 Asia Pacific University of Technology & Innovation Page 15 of 18
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Level 3
Asia Pacific University of Technology & Innovation Page 16 of 18
4. Now, re-run the code again and you able to delete the item from the database.
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
Level 3
Asia Pacific University of Technology & Innovation Page 17 of 18
5. Publish the website to the Azure Portal.
Design and Developing Application in Cloud (CT071-3-5-3-DDAC) Upload file contents to a Razor Page in ASP .Net Core
i. Exercise: Modify the Index page to show the contents in the table.
Estimation time for this section I: 5 Minutes
1. In this exercise, you have to add the column of the Public Schedule in the table,
which is located in the index.cshtml page. The result view should as below:
Summary:
In this tutorial, we learned how to build an upload file page in the system. Besides, we also learnt how to read the contents from a file and store them to the SQL database.
Level 3 Asia Pacific University of Technology & Innovation Page 18 of 18