TinyMCE的在MVC 3剃须刀，Ajax.ActionLinks第一Ajax调用失败后剃须刀、MVC、TinyMCE、Ajax
我使用TinyMCE的一个asp.net MVC 3剃须刀的应用程序中。一个Ajax.ActionLink加载通过调用TinyMCE的编辑器命名为的getContent的控制器操作。所述的getContent方法加载从文件系统的文本文件。一切都很好。但是，在我省通过$就调用TinyMCE的文本，该Ajax.ActionLink不再触发控制器方法。换句话说，什么东西在$就Post把Ajax.ActionLink在客户端上，使其不再调用的getContent控制器动作。
有趣的是，Ajax.ActionLink仍然加载TinyMCE的编辑器，但是从浏览器缓存。在下面的例子中我有2个环节FileOne和FileTwo传送，其中载两种不同的文本文件。在我调用$阿贾克斯的链接从磁盘加载文件。当我调用$阿贾克斯的链接加载从浏览器缓存中的最后一个FileOne或FileTwo传送。
这是该视图。发生tiny_mce_save_click（）函数，这是有线到TinyMCE的保存按钮，点击里面的$阿贾克斯后：
@model TestTinyMCE.Models.HomeModel
@ {
ViewBag.Title =主页;
}
@section的JavaScript
{
＆LT;脚本SRC =@ Url.Content（〜/脚本/ tiny_mce / jquery.tinymce.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =@ Url.Content（〜/脚本/ jquery.unobtrusive-ajax.min.js）类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
$（）。就绪（函数（）{
init_tiny_mce（）;
}）;
功能init_tiny_mce（）{
$（'textarea.tinymce）。TinyMCE的（{
// TinyMCE的脚本的位置
SCRIPT_URL：/Scripts/tiny_mce/tiny_mce.js，
//调用时TinyMCE的保存按钮JavaScript函数被点击。
save_onsavecallback：tiny_mce_save_click
编码：XML，
主题：先进的，
插件：拯救，
theme_advanced_buttons1：拯救，
theme_advanced_toolbar_location：顶
}）;
}
功能tiny_mce_save_click（tinyMceInstance）{
$阿贾克斯（{
键入：POST，
网址：/首页/ SaveContent'，
数据：$（'形式'）序列化（）。
成功：功能（数据，状态，XML）{
$（'＃结果）HTML（数据）;
}，
错误：功能（XML，状态，错误）{
$（'＃结果）HTML（错误）;
}
}）;
返回false;
}
＆LT; / SCRIPT＆GT;
}
@using（Html.BeginForm（））
{
＆LT; UL＆GT;
@foreach（在Model.FileList字符串文件名）
{
＆LT;李＆GT; @ Ajax.ActionLink（文件名的getContent，新{文件名=文件名}，新AjaxOptions（）{UpdateTargetId =divContent}）＆LT; /李＆GT;
}
＆LT; / UL＆GT;
＆LT; DIV ID =divContent＆GT;
@ Html.Partial（的getContent，模型）
＆LT; / DIV＆GT;
}
局部视图的getContent是：
@model TestTinyMCE.Models.HomeModel
@ {
布局= NULL;
}
＆LT; DIV ID =divContent＆GT;
＆所述;字段集的id =fsContent＆GT;
＆LT;跨度ID =结果 - GT;＆LT; / SPAN＆GT;＆LT;传奇＆gt;编辑内容和放大器; NBSP; @ Html.DisplayTextFor（M =＆GT; m.FileName）＆LT; /传说＆GT;
@ Html.TextAreaFor（M =＆GT; m.Content，
新的字典＆LT;字符串，对象＆gt; {
{类，TinyMCE的}，{COLS，80}，{行，10}}
）
@ Html.HiddenFor（M =＆GT; m.FileName）
＆LT; /字段集＆GT;
@if（@IsAjax）
{
＆LT;文本＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; init_tiny_mce（）;＆LT; / SCRIPT＆GT;
＆LT; /文＆GT;
}
＆LT; / DIV＆GT;
这是控制器。该的getContent方法$阿贾克斯后，后不再被调用时：
使用系统;
使用System.Collections.Generic;
使用System.Linq的;
使用的System.Web;
使用System.Web.Mvc;
使用TestTinyMCE.Models;
命名空间TestTinyMCE.Controllers
{
公共类的HomeController：控制器
{
公众的ActionResult指数（）
{
返回查看（新HomeModel（））;
}
公众的ActionResult的getContent（HomeModel homeModel）
{
如果（！string.IsNullOrEmpty（homeModel.FileName））
{
字符串路径=的String.Format（〜/ App_Data文件/ {0}的.htm，homeModel.FileName）;
字符串physicalPath =使用Server.Mappath（路径）;
如果（！System.IO.File.Exists（physicalPath））
homeModel.Content =的String.Format（文件{0}不存在，physicalPath）;
其他
homeModel.Content = System.IO.File.ReadAllText（physicalPath）;
}
返回查看（homeModel）;
}
[HttpPost]
[ValidateInput（假）]
公众的ActionResult SaveContent（HomeModel homeModel）
{
字符串路径=的String.Format（〜/ App_Data文件/ {0}的.htm，homeModel.FileName）;
字符串physicalPath =使用Server.Mappath（路径）;
System.IO.File.WriteAllText（physicalPath，homeModel.Content）;
ViewBag.Result =该文件已成功保存。
返回查看（）;
}
}
}
解决方案
现在的问题是broswer缓存。要在Ajax.ActionLink prevent缓存必须添加AjaxOption HttpMethod =POST。在上述code修改的ActionLink为
＆LT;李＆GT; @ Ajax.ActionLink（文件名的getContent，新{文件名=文件名}，新AjaxOptions（）{UpdateTargetId =divContent，HttpMethod =POST }）＆LT; /李取代。
请参阅http://forums.asp.net/t/1681358.aspx?Disable+cache+in+Ajax+ActionLink+extension+method+in+asp+net+MVC
I am using Tinymce inside an asp.net mvc 3 Razor application. An Ajax.ActionLink loads the tinymce editor via a call to a controller action named "GetContent". The GetContent method loads a text file from the file system. All is well. But, after I save the tinymce text via an $.ajax call, the Ajax.ActionLink no longer fires the controller method. In other words, something in the $.ajax post breaks the Ajax.ActionLink on the client so that it no longer calls the GetContent controller action.
Interestingly, the Ajax.ActionLink still loads the tinymce editor, but from the browser cache. In the example below I have 2 links "FileOne" and "FileTwo", which load two different text files. Before I call $.ajax the links load the file from disk. After I call $.ajax the links load the last "FileOne" or "FileTwo" from the browser cache.
This is the view. The $.ajax post occurs inside the tiny_mce_save_click() function, which is wired to the tinymce save button click:
@model TestTinyMCE.Models.HomeModel
@{
ViewBag.Title = "Home Page";
}
@section JavaScript
{
<script src="@Url.Content("~/Scripts/tiny_mce/jquery.tinymce.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function () {
init_tiny_mce();
});
function init_tiny_mce() {
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url: '/Scripts/tiny_mce/tiny_mce.js',
//javascript function called when tinymce save button is clicked.
save_onsavecallback: "tiny_mce_save_click",
encoding: "xml",
theme: "advanced",
plugins: "save",
theme_advanced_buttons1: "save",
theme_advanced_toolbar_location: "top"
});
}
function tiny_mce_save_click(tinyMceInstance) {
$.ajax({
type: 'POST',
url: '/Home/SaveContent',
data: $('form').serialize(),
success: function (data, status, xml) {
$('#results').html(data);
},
error: function (xml, status, error) {
$('#results').html(error);
}
});
return false;
}
</script>
}
@using (Html.BeginForm())
{
<ul>
@foreach (string fileName in Model.FileList)
{
<li>@Ajax.ActionLink(fileName, "GetContent", new { FileName = fileName }, new AjaxOptions() { UpdateTargetId = "divContent" })</li>
}
</ul>
<div id="divContent">
@Html.Partial("GetContent", Model)
</div>
}
The partial view "GetContent" is:
@model TestTinyMCE.Models.HomeModel
@{
Layout = null;
}
<div id="divContent">
<fieldset id="fsContent">
<span id="results"></span><legend>Edit Content @Html.DisplayTextFor(m => m.FileName)</legend>
@Html.TextAreaFor(m => m.Content,
new Dictionary<string, object>{
{"class","tinymce"}, {"cols","80"}, {"rows","10"}}
)
@Html.HiddenFor(m => m.FileName)
</fieldset>
@if (@IsAjax)
{
<text>
<script type="text/javascript">init_tiny_mce();</script>
</text>
}
</div>
This is the controller. The GetContent method no longer gets called after the $.ajax post occurs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestTinyMCE.Models;
namespace TestTinyMCE.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View(new HomeModel());
}
public ActionResult GetContent(HomeModel homeModel)
{
if (!string.IsNullOrEmpty(homeModel.FileName))
{
string path = string.Format("~/App_Data/{0}.htm", homeModel.FileName);
string physicalPath = Server.MapPath(path);
if (!System.IO.File.Exists(physicalPath))
homeModel.Content = string.Format("The file '{0}' does not exist.", physicalPath);
else
homeModel.Content = System.IO.File.ReadAllText(physicalPath);
}
return View(homeModel);
}
[HttpPost]
[ValidateInput(false)]
public ActionResult SaveContent(HomeModel homeModel)
{
string path = string.Format("~/App_Data/{0}.htm", homeModel.FileName);
string physicalPath = Server.MapPath(path);
System.IO.File.WriteAllText(physicalPath, homeModel.Content);
ViewBag.Result = "The file was successfully saved.";
return View();
}
}
}
解决方案
The problem is broswer caching. To prevent caching on the Ajax.ActionLink you must add AjaxOption HttpMethod = "POST". In the above code change ActionLink to
<li>@Ajax.ActionLink(fileName, "GetContent", new { FileName = fileName }, new AjaxOptions() { UpdateTargetId = "divContent", HttpMethod = "POST" })</li>.
See http://forums.asp.net/t/1681358.aspx?Disable+cache+in+Ajax+ActionLink+extension+method+in+asp+net+MVC
