Detecting page refresh c#

Question

I have created a document upload site with asp.net core web app's, and I have encountered a small bug but I'm not sure how to fix it.

On my site, you first create a 'file' like so:

It then appears in a list like so:

And when you press upload attachment, it passes the id from the previous table to ensure it uploads to the correct file.

The code behind the upload page is as below, and the error is if you press upload before choosing a file, it does a page refresh to display an error and then the ID passed through before has been lost, so myInv ends up being null.

using FarmersPortal.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using File = FarmersPortal.Data.File;

namespace FarmersPortal.Pages.Admin
{
    [Authorize(Roles ="Admin")]
    public class UploadModel : PageModel
    {
        private readonly filedbContext _context;

        public UploadModel(filedbContext context)
        {

            _context = context;
        }
        public int? myID { get; set; }

        [BindProperty]
        public IFormFile file { get; set; }

        [BindProperty]
        public int? ID { get; set; }
        public void OnGet(int? id)
        {
            myID = id;
        }

        [BindProperty]
        public File File { get; set; }
        public async Task<IActionResult> OnPostAsync()
        {
            if (file != null)
            {
                if (file.Length > 0 && file.Length < 300000)
                {
                    var myInv = _context.Files.FirstOrDefault(x => x.Id == ID);
                    var date = DateTime.Today;

                    using (var target = new MemoryStream())
                    {
                        file.CopyTo(target);
                        myInv.UploadDate = date;
                        myInv.Attachment = target.ToArray();
                    }
                    if (myInv == null)
                    {
                        return NotFound();
                    }
                    else
                    {
                        File = myInv;
                    }
                    _context.Files.Update(myInv);
                    await _context.SaveChangesAsync();
                }

            }

            if (File.FileType == "Purchase Order")
            {
                return RedirectToPage("./PurchaseOrders");
            }
            else if (File.FileType == "Remittance")
            {
                return RedirectToPage("./Remittance");
            }
            else if (File.FileType == "Haulage Self Bill")
            {
                return RedirectToPage("./HaulageSelfBill");
            }
            else if (File.FileType == "Growers Return")
            {
                return RedirectToPage("./GrowersReturn");
            }
            return Page();
        }
    }
}

I am not sure how to work my way around this, any ideas?

@page
@model FarmersPortal.Pages.Admin.UploadModel
@{
}

<h1 style="color:white">Upload File</h1>

<style>
    body {
        background-image: url("http://10.48.1.215/PORTAL/hero-range-1.jpg");
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post" enctype="multipart/form-data">
            <div class="form-group">
                <div class="col-md-10">
                    <p style="color:white">Upload file</p>
                    <input type="hidden" asp-for="@Model.ID" value="@Model.myID" />
                    <input asp-for="file" class="form-control" accept=".pdf" type="file" />
                    <span asp-validation-for="file" class="text-white"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    <input class="btn btn-success" type="submit" value="Upload" />
                </div>
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

Above is the front end code.

Answer 1

You can custom the error message

[BindProperty]
[Required(ErrorMessage ="You must select a file before upload this form")]
public IFormFile file { get; set; }

And you also need to add Jquery validation library to your view:

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
}

Then when user don't select any file and click the upload button, View will show error message and stop uploading the form.