ASP.NET MVC Razor Display HTML String from Model

ASH

4 years ago

In previous post we saw how we can convert MVC Model object into JSON object on Razor view and parse it in Javascript. In this post we will parse HTML content from MVC controller on to our MVC Razor View. Often times in our project we need to display HTML string stored in Database or from user input on to the front-view. In this post we will see how we can display HTML string or data on MVC View from Model. We will pass HTML string from our Controller and parse it on Razor View in normal HTML format instead of plain text. To parse HTML content/string on the mvc view in html format we can use @Html.Raw.

DOWNLOAD SOURCE CODE

Example: @Html.Raw(Model.VariableName)

Now let’s look at a practicals example: We will create a MVC Model class and display it on the View and parse the HTML content using @Html.Raw

Model class – Products.cs:

namespace AngularJSApp.Models
{
public class Products
{
public string ProductName { get; set; }
public string Price { get; set; }
public string Description { get; set; }
}
}

Now create a MVC controller with name DefaultController.cs and edit it as below:

DefaultController.cs:

using AngularJSApp.Models;
using System.Web.Mvc;

namespace AngularJSApp.Controllers
{
public class DefaultController : Controller
{
// GET: Default
public ActionResult Index()
{
Products products = new Products();
products.ProductName = "Asus ROG Strix G15 Core i7 10th Gen";
products.Price = "Rs. 94990";

products.Description = "<center><img src='/images/asus_laptop.jpeg' width='137px' height='100px'/></center>";
products.Description += "<p><b>Product Description</b></p><table class='table table-bordered'>";
products.Description += "<tr><td>Processor</td><td>Intel i7 - 10th Gen</td><tr>";
products.Description += "<tr><td>RAM</td><td>8 GB</td><tr>";
products.Description += "<tr><td>RAM Type</td><td>DDR4</td><tr>";
products.Description += "<tr><td>Clock Speed</td><td>2.6 GHz Turbo Boost Upto 5 GHz</td><tr>";
products.Description += "<tr><td>Graphic Processor</td><td>NVIDIA Geforce GTX 1650 Ti</td><tr>";
products.Description += "<tr><td>Number of Cores</td><td>6</td><tr>";
products.Description += "<tr><td>Dedicated Graphic Memory Capacity</td><td>4 GB</td><tr>";
return View(products);
}
}
}

We are passing HTML content for the Product description data along with Product name and price. This can come from a database server or a Web API. Also create a folder named “Images” in your project and copy any image with name asus_laptop.jpeg (YourProject>Images>asus_laptop.jpeg) as we are also passing the Product image in HTML image tag format. And we will use Bootstrap css link to parse the HTML table class from our Razor Model HTML string. Now create the MVC view for our Index() method and edit it as below:

Index.cshtml:

@model AngularJSApp.Models.Products

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<style>
body
{
padding:10px !important;
}
</style>
</head>
<body>
<div>
<h2>@Html.DisplayFor(m => m.ProductName)</h2>

<h4>@Html.DisplayFor(m => m.Price)</h4>

@Html.Raw(Model.Description)
</div>
</body>
</html>

Now when you run it you will get below view:

DOWNLOAD SOURCE CODE

Share this: