Реализация CKEditor MVC 3
Изучая mvc, и я пытаюсь реализовать страницу с 3 полями Имя-Фамилия-Описание Итак, в моем примере обучения я загружаю сотрудников, и у меня должна быть возможность создавать и редактировать их.
В описании следует использовать CKEditor .
- Я могу загружать сотрудников
- Я могу спасти их
Однако я не могу сохранить описание, например, что бы пользователь ни вводил в поле описания. Я видел несколько примеров в сети, но ни одного из них не было решения для загрузки, так как я не могу собрать их вместе. Я нашел этого парня с отличным помощником по html, но, кажется, не могу собрать пример http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx
Проблемы:
- Как вы получаете значение, которое вводится внутри ckEditor.
- В моей viewModel описание все время равно нулю
- ckEditor значительно замедляет создание страницы. Как я могу сделать это быстрее? Мне не нужны все варианты.
- Есть ли пример использования mvc3, который я могу использовать в качестве шаблона.
Я сделал всю сантехнику следующим образом:
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);
}
}
}
Спасибо за любые предложения!!!
РЕДАКТИРОВАННЫЙ ПРИМЕР С ИСПОЛЬЗОВАНИЕМ 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>
2 ответа
Вы вообще не используете помощника CKEditor, как описано на этой странице блога (это мой собственный блог)
Цель этого помощника состоит в том, что, как только вы правильно включите код в свой проект, вы можете просто сделать это:
@Html.CKEditorFor(model=>model.Description)
Тем не менее, вы, кажется, просто создаете простую текстовую область и работаете с ней "вручную" после этого. Там нет ничего, чтобы связать это с вашей собственностью, как существовало бы, если бы вы использовали помощник, описанный в этом посте.
Также обратите внимание, что вы не используете код, который обновляет текстовую область за кулисами; так что если ваша модель имеет Required установить на Description поле, вы получите ошибку проверки на стороне клиента при первой отправке правильно настроенного в противном случае CKEditorFor() Это не уникально для моего помощника; Любое связанное свойство, которое является "обязательным", нуждается в кусочке Javascript, который также упоминается в этом посте. Я делаю это как onclick от кнопки отправки, но вы можете запустить этот код в любом месте. Вам просто нужно включить его в страницу, чего вы еще не сделали.
Возможно, вы захотите попробовать установить для атрибута имени текстовой области значение "Описание".
так:
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10" name="Description"></textarea>
</div>
если это не сработает, то вам, возможно, придется использовать javascript, чтобы получить значение того, что находится в редакторе, и установить его в скрытом поле перед публикацией.