We Keep Coding

Linking 2 pages with Razor (WinFormApp)

I'm working on a WinFormApp that is using a WebView as my UI (the razor part). I have 2 files that exist in the same directory (Index.razor and Test.razor).
Using HTML, I have setup so list items (Index and Test) that should open the appropriate page when I click on the appropriate item. However, I cannot seem to get this to work. I have tried basic with no success. I have added the #page tags but this doesn't help. I have also tried using but this only seems to remove my clickable link.
I feel like I'm missing something obvious, and I'm not sure what. Any guidance would be greatly appreciated.
Here is my Home code(Index.razor). Right now Test.razor just contains a header to show it switched pages:
<div class="header">
<h1>Index Page</h1>
</div>
<div class="main">
<div class="ui-options">
<ul>
<li>Index</li>
<li>Test</li>
</ul>
</div>
</div>
#code {
}

Iframe not showing S3 stored PDF

I have an application which I am building using EF and C# with using Amazon S3 as the file server. What I do is that I upload some PDF's to S3 and store it's URL in my database and then show it in the application. I pass the model using a session to the view and then use For Each to iterate through the URL's and for each URL, create a new iframe just like below:
#{int i = 1;}
#foreach (var tempimg in (List<TempImage>)Session["TempImages"])
{
<fieldset class="invoiceFieldsets" data-step="#i" id="FieldSet_#i" hidden>
<div class="row">
<div class="col-xs-4">
<div class="fixed-actions invoiceContainer">
<div class="card text-center" id="Picture_#i" style="width:450px;height:500px;background-color:ghostwhite;border:none">
#*<div class="card-header">
Profit and Loss
</div>*#
<input type="hidden" id="ImagePath_#i" runat="server" value="#tempimg.ImagePath" hidden />
<div class="card-body" display="inline-block" id="imagepreview_#i" style="background-image:url(#tempimg.ImagePath)" hidden>
<iframe id="pdfviewer_#i" src="#tempimg.ImagePath" style="width:500px; height:500px;" sandbox="allow-same-origin" hidden></iframe>
#*<embed width="500" height="500" name="plugin" id="pdfviewer_#i" src="#tempimg.ImagePath" type="application/pdf">*#
</div>
</div>
</div>
</div>
Based on the value (i.e if the returned URL contains .pdf), I hide or unhide the iframe:
var imgtype = $("#ImagePath_"+current).val();
if (imgtype.indexOf(".pdf") >= 0) {
$("#pdfviewer_"+current).prop('hidden', false);
$("#pdfviewer_"+current).attr('src', imgtype);
}
else {
$("#imagepreview_"+current).prop('hidden', false);
}
The problem I keep having is that the pictures are shown correctly but the PDF is not showing. I do get a warning from CORBS from google but I have tried even bypassing it and it still does not work. Can you help me on this?

I found the issue . I found out that this part of the code sandbox="allow-same-origin" when defining the iframe was causing the issue. Once i removed it , it started working. I hope this helps anyone else who is going through the same problem.

ASP.NET Razor Pages Error: InvalidOperationException: Incorrect Content-Type

So I'm relatively new to ASP.NET Razor and I'm getting a consistent error that I'm not sure how to fix. I've created an ASP.NET Core Web Application MVC with Razor Pages.
I'm currently getting the error: InvalidOperationException: Incorrect Content-Type: Microsoft.AspNetCore.Http.Features.FormFeature.ReadForm()
when I load the project. It's telling me that the error is in the line email = Request.Form["email];
File the error is relating to:
#page
#model IndexModel
#{
ViewData["Title"] = "Login";
var email = "";
var pswd = "";
bool rem = false;
email = Request.Form["email"];
pswd = Request.Form["pswd"];
}
<div class="progress mt-5">
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
</div>
<br />
<div class="container mx-auto bg-warning" style="width:50%;">
<h1 class="title" style="text-align:center">TestWebApp</h1>
<form method="post" class="px-3 py-5">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-primary border-0 text-light" style="width:100px">Email</span>
</div>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email" value="">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text bg-primary border-0 text-light" style="width:100px">Password</span>
</div>
<input type="password" class="form-control" placeholder="Enter password" name="pswd" value="#pswd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" value="#rem"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary" name="submit">Submit</button>
</form>
</div>
The weird thing is I ran this code multiple times before, just making small design changes with no relation to the form itself and it worked fine without an error but has now started showing this error and I'm not sure how to fix it. Would be very thankful for some help.

I don't know what does Request stand for in your code. Because nothing in your page is named that way. If you have some sort of shortcut somewhere I guess you're getting the Request property from your model. So you're referring to the PageModel's Request property that gets exposed because your model IndexModel inherits from PageModel.
If the aforementioned is true, then I suspect you're using the Request.Form in the wrong place here.
What are you trying to accomplish reading Request.From at that point in time, i.e - when the razor engine parses and renders your template? Please note, there's no form there yet. So that's probably why you're getting such error.
The error could be misleading because your code is messing with the request too early in the process. You're basically forcing the engine to read the form when nothing is there and the exception that pops out is telling you that the form doesn't have, neither application/x-www-form-urlencoded nor multipart/form-data as its Content-Type header value. But again, the main reason for the failure is that you're using the Request.Form in the wrong place.
Perhaps you should explain better what your final goal is, so we can get a better idea of what can be wrong?
Hope this helps!

Why are both asp-validation-for and #Html.ValidationMessage() required?

I'm checking out Asp.Net Core on .Net core. Scaffolding has created some templates. The default validation for the model is not sufficient, so I've added some extra validation when the object is send to the controller
ViewData.ModelState.AddModelError(nameof(Invoice.InvoiceNr), "Invoice number should be unique.");
Now in the browser I only see that message when #Html.ValidationMessage("InvoiceNr") is added to the cshtml file. Only asp-validation-for="InvoiceNr" does not seem to present any property errors.
It took some time before I figured this out. Can someone shed some light on this why this is, it seems counter-intuitive to me, to have to add 2 lines to show all validation errors.
Thanks!
#Shyju
<div class="form-group">
<label asp-for="InvoiceNr" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="InvoiceNr" class="form-control"/>
<span asp-validation-for="InvoiceNr" class="text-danger" />
</div>
</div>
#GSerg

The reason it is not working is because you are not using the validation-for tag helper correctly. Instead of using the self closing notation, you should use an explicit closing for the span.
Replace
<span asp-validation-for="InvoiceNr" class="text-danger" />
With
<span asp-validation-for="InvoiceNr" class="text-danger"></span>
In short, you do not need to use both the tag helper and the html helper together to the the validation error. With the correct usage of tag helper, you will be able to see the validation error message.

MVC Nested DisplayForModel not working

I can't get nested DisplayForModel to work at all, I have tried everything. All display templates are in the correct DisplayTemplates folder.
The ratings file just never gets called, although if I do #Html.DisplayFor(x => x.Likes, "Ratings") it would call it correctly but obviously only pass the likes property through, anyone know what is going on here?
Index file, works fine:
#model IList<UploadedSongViewModel>
<section id="music-grid">
<div class="container">
#Html.DisplayForModel() //Works fine
</div>
</section>
UploadedSongViewModel template:
#model UploadedSongViewModel
<div class="col-md-5ths col-xs-6">
#Html.DisplayForModel("Ratings") //Never calling the ratings display template
</div>
Ratings file:
<span class="like-percentage" data-likes="#Model.Likes" data-dislikes="#Model.Dislikes">
<i class="fa fa-thumbs-up" data-toggle="tooltip" data-placement="bottom" title="Like percentage">
</i>
</span>

Never calling the ratings display template
That is by design. The MVC engine tags each object it renders by type by setting the TemplateInfo.Visited() method. If it's already visited the model, it won't visit it again (to avoid stack overflows / infinite loops). Simply changing it to the following should work (can't test atm).
#model UploadedSongViewModel
<div class="col-md-5ths col-xs-6">
#Html.DisplayFor(m => m, "Ratings")
</div>