Trouble with Request.Form inside .cshtml - asp.net-core

Question

Trying to create a page that will have a drop down selector with three image names and when an image name is selected and you hit submit it will then display that image on the page.
I found an example of this here(Seems to be outdated): https://learn.microsoft.com/en-us/aspnet/web-pages/overview/ui-layouts-and-themes/9-working-with-images
has: if(Request["photoChoice"] != null)
Read somewhere that the correction is Request.Form
#{ var imagePath = "";
if (Request.Form["photoChoice"] != null)
{
imagePath = #"images\" + Request.Form["photoChoice"];
}
}
<form method="post" action="">
<div>
I want to see:
<select name="photoChoice">
<option value="Photo1.jpg">Photo 1</option>
<option value="Photo2.jpg">Photo 2</option>
<option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
</div>
<div style="padding:10px;">
#if (imagePath != "")
{
<img src="#imagePath" alt="Sample Image" width="300" />
}
</div>
</form>
The first error I was having was:
" Operator '!=' is ambiguous on operands of type 'StringValues' and 'null' "
adding (object) at the start of the Request there in the if statement
#{ var imagePath = "";
if ((object)Request.Form["photoChoice"] != null)
{
imagePath = #"images\" + Request.Form["photoChoice"];
}
Now I am getting another error "InvalidOperationException: Incorrect Content-Type" when I try to compile the site. It does refer to the If line of code

Answer 1

The link you refer to is used in asp.net, not in core.
The main reason for the error is that you put the request.Form in the
wrong place. Your current requirements should put the code
into the OnPost method in the code behind.
There are many ways to implement this function in the core, but they need to be triggered in the post method in the code behind.
Please refer to this.
The simplest way is to bind fields in the code behind. Please refer to the following for details.
Page.cs:
public class ShowImagesModel : PageModel
{
[BindProperty]
public string imagePath { get; set; }
[BindProperty]
public string photoChoice { get; set; }
public void OnGet()
{
imagePath = "";
}
public void OnPost()
{
if (!string.IsNullOrEmpty(photoChoice))
{
imagePath = #"images\" + photoChoice;
}
}
}
View:
#page
#model WebApplication1_razor_page.ShowImagesModel
#{
ViewData["Title"] = "ShowImages";
Layout = "~/Pages/Shared/_Layout.cshtml";
}
<h1>ShowImages</h1>
<form method="post" action="">
<div>
I want to see:
<select asp-for="photoChoice" >
<option value="Photo1.jpg">Photo 1</option>
<option value="Photo2.jpg">Photo 2</option>
<option value="Photo3.jpg">Photo 3</option>
</select>
<input type="submit" value="Submit" />
</div>
<div style="padding:10px;">
#if (Model.imagePath != "")
{
<img src="#Model.imagePath" alt="Sample Image" width="300" />
}
</div>
</form>
Here is the result: