Thumb

Photo upload into DataBase from ckFinder | ckEditor photo upload into Database | Part-3

10/15/2019 1:57:04 AM

Download Project  (Full Project)

Step-1

In this part i will show how to Photo upload using ckFinder and ckEditor. Now  Open visual studio then open our existing project. Create database and add column  like Id, editor1. Id is primary key. Now connect ADO.Net Entity Framework. Now create the object of database class. Then access the table. There are two methods one is http post and http get. Get method return the view and post method receive the object from the view then save the object into database. Given bellow the Controller source code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ckEditorTutorial.Controllers
{
    public class HomeController : Controller
    {
        TestDBEntities context = new TestDBEntities();
        public ActionResult Index()
        {
            return View();
        }
        [ValidateInput(false)]
        [HttpPost]

        public ActionResult Index(ckEditor obj)
        {
            context.ckEditors.Add(obj);
            context.SaveChanges();
            return View();
        }
        public ActionResult List()
        {
            return View(context.ckEditors.ToList());
        }
    }
}

Step-2

Now add the began form for post the data into controller. Then controller receive the data and save to database. This view also post data and design so in method decorate by [validateinput(false)].  Given bellow the View source code:

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/ckeditor/ckeditor.js"></script>
<script src="~/Scripts/ckfinder/ckfinder.js"></script>

<div class="jumbotron">
    @using (Html.BeginForm())
    {
        <textarea class="ckeditor" name="editor1"></textarea>
        <button type="submit">save</button>
    }
</div>

Step-3

Now build and run the project.

About Teacher

Reza Karim

Software Engineer

More about him