注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天涯倦客的博客

祝福你朋友永远快乐!

 
 
 

日志

 
 

转载:asp.net mvc为什么无法正常使用Fckeditor等控件?  

2011-07-20 18:32:13|  分类: asp.net |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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,实例代码如:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客代码
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(string txtTitle//表单中控件的值必须相等,string txtContent)
{
string title = txtTitle;
string content = txtContent;
return View();
}

2、通过Action定义FormCollection参数接受,实例代码如:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客代码
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(FormCollection form)
{
string title = form["txtTitle"];
string content = form["txtContent"];
return View();
}

获取与设置Fckeditor控件的值

首先,测试项目目录结构:如图

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客

获取Fckeditor内容:Add(View)视图:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客代码
<%@ 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:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客代码
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Add(FormCollection form)
{
string title = form["Title"];
string content = form["ctl00$MainContent$content"];
return RedirectToAction("GetArticle");
}

测试取值效果图:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客

设置Fckeditor内容:GetArticle(View)视图:

转载:asp.net mvc为什么无法正常使用Fckeditor等控件? - 海里的贝壳 - apple的博客代码
<%@ 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等控件? - 海里的贝壳 - apple的博客

总结

通过上面的测试,我们发现无需修改或扩展使用第三方插件就能使asp.net mvc正常支持Fckeditor编辑器,同时也发现,如果将Fckeditor服务器控件用已经转换过后的Html代码代替,使用起来更加方便,这个任务就留个大家把,哈哈。

PS:本人在快下班的时候用JS写了一个,效果还不错的说。

  评论这张
 
阅读(615)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017