asp.net-coretelerik-editor

Telerik Editor doesn't display formatted text


I face with CRUD operations in ASP Net Core web app when I use Telerik UI Editor, create sample text with some formatting it is stored well in DB. But if I want to edit this text again telerik editor display it with html tags and without formatting. Did someone have same issue?

Here is my code:

Controller

 public async Task<IActionResult> Edit(int? id)
    {
        if (id == null)
        {
            return NotFound();
        }

        var editorData = await _context.Prescriptions.FindAsync(id);
        if (editorData == null)
        {
            return NotFound();
        }
        return View(editorData);
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Edit(int id, [Bind("PrescriptionID,PrescriptionText")] Prescription editorData)
    {
        if (id != editorData.PrescriptionID)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _context.Update(editorData);
                await _context.SaveChangesAsync();
            }
            catch (DbUpdateConcurrencyException)
            {
                if (!EditorDataExists(editorData.PrescriptionID))
                {
                    return NotFound();
                }
                else
                {
                    throw;
                }
            }
            return RedirectToAction(nameof(Index));
        }
        return View(editorData);
    }

and View

@model WebApplication3.Models.Prescription

<h4>EditorData</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Edit" id="EditorDataForm">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <input type="hidden" asp-for="PrescriptionID" />
            <div class="form-group">
                <label asp-for="PrescriptionText"></label>

                @Html.Kendo().EditorFor(m => m.PrescriptionText).Encoded(false)

                <span asp-validation-for="PrescriptionText" class="text-danger k-invalid-msg" data-for="EditorContent"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Save" class="k-button k-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="EditorContent" class="k-button">Back to List</a>
</div>

when I run and create new it work

Create

but If I want to edit it display like this Edit


Solution

  • I have tried your code, it works for me. You can try my sample code, if it not works, it means there are something missed in your project.

    First, I suggest you need set breakpoint at

    👉 var editorData = await _context.Prescriptions.FindAsync(id);
    

    this line in public async Task<IActionResult> Edit(int? id) method. And you need check the value of editorData.PrescriptionText. It should be like below.

    <p>Hello world</p><p>My Sample</p><p><strong><em>Italic <span style="text-decoration:underline;">Underline</span></em></strong></p>
    

    Second, you can try my sample code to check your configuration|static files in your project.


    My HomeController code:

    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    
    namespace TelerikAspNetCoreApp1.Controllers
    {
        public class HomeController : Controller
        {
            public IActionResult Index()
            {
                Prescription a = new Prescription();
                string aa = "<p>Hello world</p><p>My Sample</p><p><strong><em>Italic <span style=\"text-decoration:underline;\">Underline</span></em></strong></p>";
                int id = 1;
                a.PrescriptionText = aa;
                return View(a);
            }
            public string edit = string.Empty;
            public IActionResult Edit()
            {
                Prescription a = new Prescription();
                a.PrescriptionText = HttpContext.Session.GetString("key");
                return View(a);
            }
            [HttpPost]
            [ValidateAntiForgeryToken]
            public async Task<IActionResult> Edit(int id, [Bind("PrescriptionID,PrescriptionText")] Prescription editorData)
            {
                if (id != editorData.PrescriptionID)
                {
                    return NotFound();
                }
    
                if (ModelState.IsValid)
                {
                    string aa = editorData.PrescriptionText;
                    HttpContext.Session.SetString("key", aa);
                    return RedirectToAction(nameof(Edit));
                }
                return View(editorData);
            }
            public IActionResult About()
            {
                ViewData["Message"] = "Your application description page.";
    
                return View();
            }
    
            public IActionResult Contact()
            {
                ViewData["Message"] = "Your contact page.";
    
                return View();
            }
    
            public IActionResult Error()
            {
                return View();
            }
        }
    }
    

    Edit.cshtml and Index.cshtml is same

    @{
        ViewData["Title"] = "Home Page";
    }
    @model TelerikAspNetCoreApp1.Prescription;
    
    <h4>EditorData</h4>
    <hr />
    <div class="row">
        <div class="col-md-4">
            <form asp-action="Edit" id="EditorDataForm">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="PrescriptionID" />
                <div class="form-group">
                    <label asp-for="PrescriptionText"></label>
    
                    @Html.Kendo().EditorFor(m => m.PrescriptionText).Encoded(false)
    
                    <span asp-validation-for="PrescriptionText" class="text-danger k-invalid-msg" data-for="EditorContent"></span>
                </div>
                <div class="form-group">
                    <input type="submit" value="Save" class="k-button k-primary" />
                </div>
            </form>
        </div>
    </div>
    
    <div>
        <a asp-action="EditorContent" class="k-button">Back to List</a>
    </div>
    

    Prescription.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading.Tasks;
    
    namespace TelerikAspNetCoreApp1
    {
        public class Prescription
        {
            public string PrescriptionText { get; set; }
            public int PrescriptionID { get; set; }
        }
    }
    

    Test Result:

    enter image description here