在接近下班的時(shí)候，快速的瀏覽了博客園的首頁，被該貼“建站專家：讓 MVC 支持 CuteEditor Using CuteEditor under MVC”中的話題“Asp.net mvc無法正常支持Fckeditor編輯器”所吸引，由于當(dāng)前的開發(fā)環(huán)境也正式asp.net mvc 2.0，因此快速的做了一下“試探性的測(cè)試”，測(cè)試的結(jié)果很滿意----成功。因此，早早就回家進(jìn)行詳細(xì)的測(cè)試。

asp.net mvc為什么無法正常使用Fckeditor等控件？

在asp.net中，頁面的表現(xiàn)形式與邏輯代碼(cs)使用了（codebehind）代碼分離技術(shù)，表面上他們是各不相干，實(shí)際上它們就是一根繩子上的螞蚱栓在一起的。因此我們?cè)?cs)中可以直接使用控件的ID來獲取或設(shè)置它相應(yīng)的值。

而在asp.net mvc中，根據(jù)mvc模式，我們能非常清楚他們之間只有聯(lián)系或通信，而不是一個(gè)整體，因此我們無法向asp.net那樣去通過控件的ID獲取或設(shè)置相應(yīng)的值。

asp.net mvc Post提交的應(yīng)用

在asp.net中一個(gè)Post一下直接是回傳給當(dāng)前頁面，而asp.net mvc的任何動(dòng)作都是直接對(duì)應(yīng)Control中的Action，因此在asp.net mvc中必須有對(duì)應(yīng)的Aciton來接受請(qǐng)求，那表單的數(shù)據(jù)怎么傳遞呢？根據(jù)我平常的應(yīng)用，使用這2種方法：

1、通過Action的參數(shù)直接對(duì)應(yīng)著表單中的name，實(shí)例代碼如：

代碼 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(string txtTitle//表單中控件的值必須相等,string txtContent)
{
string title = txtTitle;
string content = txtContent;
return View();
}

?2、通過Action定義FormCollection參數(shù)接受，實(shí)例代碼如：

代碼 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(FormCollection form)
{ string title = form["txtTitle"];
string content = form["txtContent"];
return View();
}

獲取與設(shè)置Fckeditor控件的值

首先，測(cè)試項(xiàng)目目錄結(jié)構(gòu)：如圖

獲取Fckeditor內(nèi)容：Add(View)視圖：

代碼 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FckV2"%>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Add
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<%using (Html.BeginForm()) { %>
<h2>添加</h2>
<h4>標(biāo)題</h4>
<p><%=Html.TextBox("Title","defualt")%></p>
<h4>內(nèi)容</h4>
<FckV2:FCKeditor runat="server" BasePath="/Content/" ID="content"></FckV2:FCKeditor>
<input type="submit" value="添加" />
<%} %>
</asp:Content>

獲取Fckeditor內(nèi)容：對(duì)應(yīng)Add視圖POST提交方式的Action：

代碼 [AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(FormCollection form)
{
string title = form["Title"];
string content = form["ctl00$MainContent$content"];
return RedirectToAction("GetArticle");
}

測(cè)試取值效果圖：

?

設(shè)置Fckeditor內(nèi)容：GetArticle(View)視圖:

代碼 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MvcFckTest.Entity>" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FckV2"%>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
GetArticle
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>GetArticle</h2>
<% using (Html.BeginForm()) {%>
<fieldset>
<legend>Fields</legend>
<p>
<label for="Content">Content:</label>
<FckV2:FCKeditor runat="server" BasePath="/Content/" ID="content"></FckV2:FCKeditor>
</p>
</fieldset>
<% } %>
<div>
</div>
<script>
window.onload = function() {
document.getElementById("<%=content.ClientID%>").setAttribute("value", "<%=Model.Content %>");
}
</script>
</asp:Content>

設(shè)置Fckeditor內(nèi)容：對(duì)應(yīng)GetArticle視圖Action：

public ActionResult GetArticle() {
Entity model = new Entity() {Title="測(cè)試Fck",Content="Jeffrey.Dan，測(cè)試"};
return View(model);
}

測(cè)試效果圖：

總結(jié)

通過上面的測(cè)試，我們發(fā)現(xiàn)無需修改或擴(kuò)展使用第三方插件就能使asp.net mvc正常支持Fckeditor編輯器,同時(shí)也發(fā)現(xiàn)，如果將Fckeditor服務(wù)器控件用已經(jīng)轉(zhuǎn)換過后的Html代碼代替，使用起來更加方便，這個(gè)任務(wù)就留個(gè)大家把，哈哈。

PS:本人在快下班的時(shí)候用JS寫了一個(gè)，效果還不錯(cuò)的說。

轉(zhuǎn)載于:https://www.cnblogs.com/cbbukn/archive/2010/03/23/1693300.html

總結(jié)

以上是生活随笔為你收集整理的asp.net mvc 正常支持Fckeditor编辑器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。