Download Project  (Full Project)

Step-1

In this tutorial I will show you how to create CKeditor and save data into database also show data in view. First open SQL server management studio then create a database name as MVCtutorial then create table name as postManage. This table have three property like  id, Title, Content. Id is primary key. Now open visual studio and select ASP.NET MVC Application. Select  MVC then click ok. Now connect   ADO.NET entity framework. Now install ckeditor pakeg. AddPost method receive the value and save to database, And Ckview method return the view. Given bellow the controller code:

namespace WebApplicationForRezor.Controllers
{
    public class HomeController : Controller
    {

public ActionResult Ckview()
        {
            return View();
        }
        [ValidateInput(false)]
        [HttpPost]
        public ActionResult AddPost(CkEditorModel obj)
        {
            StudentManagerDBEntities mYdb = new StudentManagerDBEntities();
            WebApplicationForRezor.MyData.CKeditor myObj = new WebApplicationForRezor.MyData.CKeditor();
            myObj.Title = obj.Title;
            myObj.Content = obj.Content;
            mYdb.CKeditor.Add(myObj);
            mYdb.SaveChanges();
            return View("Ckview");
        }
        

        public ActionResult GetDataDesign()
        {
            StudentManagerDBEntities mYdb = new StudentManagerDBEntities();
            var data = mYdb.CKeditor.ToList();
            return View(data);
        }
}
}

Step-2

In this view it uses BeginForm to submit the value of the controller. This view also linked bootstrap.min.js, ckeditor.js, jquery-3.3.1.min.js, Help to pass the data. Given bellow the view code:

@model IEnumerable<WebApplicationForRezor.MyData.CKeditor>
@{
    ViewBag.Title = "Ckview";
    Layout = null;
}

<h2>Ckview</h2>

<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/ckeditor/ckeditor.js"></script>

@using (Html.BeginForm("AddPost", "Home", FormMethod.Post))
{
<form method="post">
    <div class="container">
        <div class="row">
            <input class="form-control" type="text" placeholder="Title" name="Title" />
        </div>
        <div class="row">
            <textarea class="ckeditor" name="Content"></textarea>
        </div>
    </div>
    <input type="submit" value="submit" />
</form>
   
}

Step-3

Also when this list are show in the view then the design also are include by the rezor syntax. Given bellow the view list code:

@model IEnumerable<WebApplicationForRezor.MyData.CKeditor>

@{
    ViewBag.Title = "GetDataDesign";
}

<h2>GetDataDesign</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
 

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.Raw(item.Title)
        </td>
        <td>
            @Html.Raw(item.Content)
           
        </td>
      
    </tr>
}

Step-4

Now run the project.