2011-06-13 5 views
5

mvc를 배우고 3 개의 필드가있는 페이지를 구현하려고합니다. 성 - 설명 학습 예제에서 직원을로드 중이므로 생성하고 편집 할 수 있어야합니다.CKEditor MVC 3 implementaion 도움이 필요

설명에 CKEditor를 사용해야합니다.

  • 내가로드 할 수 있습니다 직원
  • 내가 그들을 나는 그런 설명 필드에 어떤 사용자 유형으로, 설명을 저장할 수 수없는 것 그러나

을 절약 할 수 있습니다. 나는 그물에 대한 몇 가지 예를 보았지만 다운로드 할 수있는 해결책은 없었습니다. 나는 멋진 HTML 도우미와이 남자를 발견하지만 함께 http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx

를 예를 넣을 수있을 것 같지 수있는 문제는 다음과 같습니다

  1. 당신은 ckEditor 내부에 입력 된 값을 얻는 방법 . 내 ViewModel에 설명에
  2. 내가 그것을 빨리 할 수 ​​
  3. ckEditor 페이지의 생성 꽤 lot.How를 느리게 항상 널? 나는 모든 옵션이 필요 없다.
  4. 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 도우미

@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> 
+0

해당 블로그 게시물에 게시 된 솔루션을 사용하고 있지 않습니다. 당신은 어디에서나 도우미를 부르는 것이 아닙니다. –

답변

7

그 도우미의 목적입니다 (내 자신의 블로그 인)이 블로그 페이지에 설명되어 있습니다 좋아하는 당신은 당신의 프로젝트에 코드를 올바르게 포함 일단

@Html.CKEditorFor(model=>model.Description) 

그러나 간단히 말해서 평범한 텍스트 영역을 만들고 그 다음에 수동으로 작업하는 것처럼 보일 수 있습니다. 당신이 그 지위에 묘사 된 도우미를 사용했다면 당신의 소유물에 그것을 묶을 것이 없습니다.

또한 코드를 사용하고 있지 않으므로주의해야합니다. 장면 뒤에서 텍스트 영역을 업데이트하십시오. 따라서 모델의 RequiredDescription 필드에 설정된 경우 처음 제대로 제출하면 클라이언트 측 유효성 검사 오류가 발생합니다 CKEditorFor() 이것은 내 도우미에게 고유하지 않습니다. '필수'인 모든 바인딩 된 속성에는 해당 블로그 게시물에 언급 된 Javascript가 약간 필요합니다. 제출 버튼에서 onclick으로 처리하지만 동일한 코드를 아무 곳에서나 실행할 수 있습니다. 당신은 단지 당신이하지 않은 페이지에 그것을 포함시킬 필요가 있습니다.

+0

안녕하십니까, 답장을 보내 주셔서 감사합니다. ckeditor의 내용을 저장하는 방법을 이해할 수 없어 위의 코드를 사용하지 않았습니다. 분명히 좋아 보입니다. 지금 시도 할 것입니다. 다운로드 할 수있는 솔루션이 있습니까? – user712923

+0

내용을 '저장'하기 위해 특별한 작업을 수행하지 마십시오. 다른 바운드 프로퍼티처럼 작동합니다. –

+0

은 @HtmlCKEditor입니다. 모든 작업을 수행하고 설명 필드에 저장 하시겠습니까? – user712923

3

당신은 텍스트 영역의 이름 속성을 설정하는 "설명"그래서

시도 할 수 있습니다 : 그것은하지 않는 경우

<div class="editor-field">    
    <textarea class="ckeditor" id="ckeditor" rows="10" name="Description"></textarea> 
</div> 

을 그럼 당신은 자바 스크립트를 사용하여 편집자의 가치를 얻고 게시물 앞에 숨겨진 필드에 설정해야 할 수도 있습니다. 당신은 실제로 모두에서 CKEditor 도우미를 사용하지 않는