Telerik Editor doesn't display formatted text

145 views Asked by At

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

1

There are 1 answers

1
Jason Pan On BEST ANSWER

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