Learning mvc, and I'm trying to implement a page with three Name-Surname-Description fields. Therefore, in my case study, I load employees, and I should be able to create and edit them.
The description should use CKEditor.
- I can load employees.
- I can save them
However, I cannot save the description, for example, everything that the user enters in the description field. I have seen several examples on the net, but none of them have a download solution, since I cannot link. I found this guy with a cool html helper but can't seem to give an example together
http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx
Problems:
- How do you get the value that is entered inside ckEditor.
- In my view, Model description is null all the time
- ckEditor slows down page creation quite a bit. How can I do it faster? I do not need all the options.
- Is there an example of using mvc3 that I can use as a template.
I performed all the plumbing as follows:
Create.chtml
@model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
@{
ViewBag.Title = "Create";
}
<h2>
Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeViewModel</legend>
<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.PhotoPath)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PhotoPath)
@Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10"></textarea>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
EmployeeController
public class EmployeeController : Controller
{
public ActionResult Index()
{
var employeeRepository=new EmployeeRepository();
var employees = employeeRepository.GetAll();
var employeeList = employees.Select(employee => new EmployeeViewModel
{
EmployeeId = employee.EmployeeId,
FirstName = employee.FirstName,
LastName = employee.LastName,
PhotoPath = employee.PhotoPath,
Email = employee.Email,
Description = employee.Description
}).ToList();
return View(employeeList);
}
public ActionResult Create()
{
return View(new EmployeeViewModel());
}
[HttpPost]
public ActionResult Create(EmployeeViewModel vm)
{
if(ModelState.IsValid)
{
var employeeRepository=new EmployeeRepository();
var emp=new Employee
{
FirstName = vm.FirstName,
LastName = vm.LastName,
Description = vm.Description,
Email = vm.Email,
PhotoPath = vm.PhotoPath
};
employeeRepository.Insert(emp);
return RedirectToAction("Index");
}
return View(vm);
}
}
}
Thanks for any suggestions !!!
CONNECTED EXAMPLE USING A CKEditor Helper
@using MvcApplicationCKEditorIntegration.Helpers
@model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
@{
ViewBag.Title = "Create";
}
<h2>
Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@Html.CKEditorHeaderScripts()
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeViewModel</legend>
<div class="editor-label">
@Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.PhotoPath)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.PhotoPath)
@Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Description)
</div>
@Html.CKEditorFor(model=>model.Description)
<p>
<input type="submit" value="Create" onclick="@Html.CKEditorSubmitButtonUpdateFunction()" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>