[转载]asp.net mvc 正常支持Fckeditor编辑器

baacloud免费翻墙vpn注册使用

[转载]asp.net mvc 正常支持Fckeditor编辑器 – Mr.d’s Time – 博客园.

在接近下班的时候,快速的浏览了博客园的首页,被该贴“建 站专家:让 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代码代替,使用起来更加方便,这个任 务就留个大家把,哈哈。

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏