The html tags are displayed as plain text in asp.net core mvc razor pages

Question

I am working on Asp.Net Core 6.0 MVC Razor pages. On the Login.cshtml page, I want to show the following error message when the user tries to login with in invalid credential: Invalid: User Name and/or Password. The problem is this message is displayed as a text instead of an html with the "User Name" and "Password" in bold. The following is my C# code in Login.cshtml.cs

var invalidLogin = await LockOut(Input.UserUserName, Input.Password);

if (!string.IsNullOrEmpty(invalidLogin))

{

   invalidLogin = WebUtility.HtmlEncode(invalidLogin);

   ModelState.AddModelError(string.Empty, invalidLogin);



   return Page();

}

As shown above, I even tried to html encode the message. Still it's displayed as a text, "Invalid: User Name and/or Password." However, since the div in which it is displayed has the class, "text-danger" the color of the text is correctly set as red.

Based on Google search, I have verified that the page source has this line at the top:

Accepted Answer

Hi @Sherpa,

Firstly, no need encode the error message as HTML(no need use WebUtility.HtmlEncode):

invalidLogin ="Invalid: User Name and/or Password";
ModelState.AddModelError(string.Empty, invalidLogin);

In your Razor Pages .cshtml file, get the ModelState with key name which is empty string here, then use @Html.Raw() to interpret the HTML tags:

@if (ModelState[""] != null && ModelState[""]?.Errors.Count!=0)
{
    var error = ModelState[""]?.Errors.First().ErrorMessage;
    @Html.Raw(error)
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Rena

Answer

the model error collection does not support markup. the string will aways be html encoded before display, which will convert "" to "<b>" which the browser displays as ""

Share via

The html tags are displayed as plain text in asp.net core mvc razor pages

1 additional answer