asp.net mvc 正常支持Fckeditor编辑器
在接近下班的时候，快速的浏览了博客园的首页，被该贴“建站专家：让 MVC 支持 CuteEditor Using CuteEditor under MVC”中的话题“Asp.net mvc无法正常支持Fckeditor编辑器”所吸引，由于当前的开发环境也正式asp.net mvc 2.0，因此快速的做了一下“试探性的测试”，测试的结果很满意----成功。因此，早早就回家进行详细的测试。
asp.net mvc为什么无法正常使用Fckeditor等控件？
在asp.net中，页面的表现形式与逻辑代码(cs)使用了（codebehind）代码分离技术，表面上他们是各不相干，实际上它们就是一根绳子上的蚂蚱栓在一起的。因此我们在(cs)中可以直接使用控件的ID来获取或设置它相应的值。
而在asp.net mvc中，根据mvc模式，我们能非常清楚他们之间只有联系或通信，而不是一个整体，因此我们无法向asp.net那样去通过控件的ID获取或设置相应的值。
asp.net mvc Post提交的应用
在asp.net中一个Post一下直接是回传给当前页面，而asp.net mvc的任何动作都是直接对应Control中的Action，因此在asp.net mvc中必须有对应的Aciton来接受请求，那表单的数据怎么传递呢？根据我平常的应用，使用这2种方法：
1、通过Action的参数直接对应着表单中的name，实例代码如：
代码
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult Add(
string
txtTitle//表单中控件的值必须相等,
string
txtContent)
{
string
title
=
txtTitle;
string
content
=
txtContent;
return
View();
}
2、通过Action定义FormCollection参数接受，实例代码如：
代码
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult Add(FormCollection form)
{
string
title
=
form[
"
txtTitle
"
];
string
content
=
form[
"
txtContent
"
];
return
View();
}
获取与设置Fckeditor控件的值
首先，测试项目目录结构：如图
获取Fckeditor内容：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
>
标题
</
h4
>
<
p
><%=
Html.TextBox(
"
Title
"
,
"
defualt
"
)
%></
p
>
<
h4
>
内容
</
h4
>
<
FckV2:FCKeditor runat
=
"
server
"
BasePath
=
"
/Content/
"
ID
=
"
content
"
></
FckV2:FCKeditor
>
<
input type
=
"
submit
"
value
=
"
添加
"
/>
<%
}
%>
</
asp:Content
>
获取Fckeditor内容：对应Add视图POST提交方式的Action：
代码
[AcceptVerbs(HttpVerbs.Post)]
public
ActionResult Add(FormCollection form)
{
string
title
=
form[
"Title
"
];
string
content
=
form[
"ctl00$MainContent$content
"
];
return
RedirectToAction(
"
GetArticle
"
);
}
测试取值效果图：
设置Fckeditor内容：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
>
设置Fckeditor内容：对应GetArticle视图Action：
public
ActionResult GetArticle() {
Entity model
=
new
Entity() {Title
=
"
测试Fck
"
,Content
=
"
Jeffrey.Dan，测试
"
};
return
View(model);
}
测试效果图：
总结
通过上面的测试，我们发现无需修改或扩展使用第三方插件就能使asp.net mvc正常支持Fckeditor编辑器,同时也发现，如果将Fckeditor服务器控件用已经转换过后的Html代码代替，使用起来更加方便，这个任务就留个大家把，哈哈。
PS:本人在快下班的时候用JS写了一个，效果还不错的说。