2011-06-13 65 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內鍵入的值。
  2. 在我的viewModel中,描述一直爲空
  3. ckEditor減慢了頁面的創建速度。我該如何讓它更快?我不需要所有的選項。
  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); 
       } 




      } 
     } 

感謝您的任何建議!

EDITED例如使用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

您未使用該博客文章中發佈的解決方案;你根本就不在任何地方打電話給助手。 – 2011-06-13 18:31:40

回答

7

你實際上並沒有使用CKEditor的助手都喜歡的博客頁面上的描述(這是我自己的博客)

助手的目的是,一旦你正確地包括了代碼到您的項目,你可以簡單地這樣做:

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

但是,你似乎簡單地後「手動」創建一個純舊文本區域,並與它的工作。沒有任何東西可以將它綁定到你的財產上,就像你使用那篇文章中描述的幫手一樣。

另請注意,您並未使用更新後臺文本區域的代碼;因此如果您的模型在Description字段中設置了Required,則在首次提交正確配置的CKEditorFor()時,您將收到客戶端驗證錯誤。這對我的幫助者來說並不是唯一的; 「必需」的任何綁定屬性都需要該博客文章中提到的那一點Javascript。我將它作爲onclick關閉提交按鈕,但您可以在任何地方運行相同的代碼。你只需要將它包含在頁面中,但你還沒有完成。

+0

嗨,謝謝你的答覆。我沒有使用過你的代碼,因爲我不明白你是如何保存ckeditor的內容的,它肯定看起來不錯。我現在要試試。你有我可以下載的解決方案嗎? – user712923 2011-06-13 18:29:38

+0

你不需要做任何特殊的事情來保存內容;它和其他任何綁定屬性一樣工作。 – 2011-06-13 18:31:03

+0

是@HtmlCKEditorFor所有的工作,並將其保存到描述字段? – user712923 2011-06-13 18:31:21

3

你可能想嘗試設置textarea的name屬性爲 「描述」

這樣:

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

如果沒有那麼你可能不得不使用javascript來獲取編輯器中的內容,並將其設置在帖子前的隱藏字段中。