Dotnet Core TinyMCE In View

In this tutorial, we are going to learn how to show TinyMCE in .NET core views.

1. @Html.Raw()

Html.Raw allows to output text containing HTML elements to the client.

let's see below example


@model Spice.Models.ViewModels.MenuItemViewModel
@using Spice.Extensions
@{
    ViewData["Title"] = "Detail";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2 class="text-info">
    Detail Menu Item
</h2>

<form method="post" asp-action="Detail" enctype="multipart/form-data">
    <div class="border row p-3">
        <input type="hidden" asp-for="MenuItem.Id" />
        <div class="col-md-8">
            <div class="text-danger" asp-validation-summary="ModelOnly">
            </div>
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.Name" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    <input asp-for="MenuItem.Name" class="form-control" />
                </div>
                <span class="text-danger" asp-validation-for="MenuItem.Name"></span>
            </div>

            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.Description" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    @Html.Raw($"{Model.MenuItem.Description}");
                </div>
                <span class="text-danger" asp-validation-for="MenuItem.Description"></span>
            </div>

            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.Price" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    <input asp-for="MenuItem.Price" class="form-control" />
                </div>
                <span class="text-danger" asp-validation-for="MenuItem.Price"></span>
            </div>
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.CategoryId" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    <select asp-for="@Model.MenuItem.CategoryId" id="CategoryId" asp-items="Model.Category.ToSelectListItem(Model.MenuItem.CategoryId)" class="form-control"></select>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.SubCategoryId" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    <select asp-for="@Model.MenuItem.SubCategoryId" name="SubCategoryId" id="SubCategoryId" asp-items="@(new SelectList(string.Empty,"Id","Name"))" class="form-control"></select>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.Image" class="col-form-label"></label>
                </div>
                <div class="col-md-8">
                    <input type="file" name="files" multiple class="form-control" />
                </div>
            </div>
            <div class="form-group row">
                <div class="col-md-2">
                    <label asp-for="MenuItem.Spicyness" class="col-form-label"></label>
                </div>


                <div class="col-md-8">
                    <select asp-for="MenuItem.Spicyness" asp-items="Html.GetEnumSelectList<MenuItem.ESpicy>()" class="form-control"></select>
                </div>
            </div>

            <div class="form-group row">
                <div class="col-5 offset-2">
                    <div class="row">
                        <partial name="_EditAndBackPartial" model="Model.MenuItem.Id" />
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div>
                <img src="@Model.MenuItem.Image" />
            </div>
        </div>
    </div>
</form>
@section Scripts{
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}