在mvc 3剃须刀中的tinymce，Ajax.ActionLinks在第一次ajax调用后失败
问题描述：
我在一个asp.net mvc 3 Razor应用程序中使用了Tinymce。 Ajax.ActionLink通过调用名为“GetContent”的控制器操作加载tinymce编辑器。 GetContent方法从文件系统加载文本文件。一切都很好。但是，在我通过$ .ajax调用保存tinymce文本后，Ajax.ActionLink不再触发控制器方法。换句话说，$ .ajax文章中的某些内容会打破客户端上的Ajax.ActionLink，使其不再调用GetContent控制器操作。在mvc 3剃须刀中的tinymce，Ajax.ActionLinks在第一次ajax调用后失败
有趣的是，Ajax.ActionLink仍然加载tinymce编辑器，但是从浏览器缓存中加载。在下面的示例中，我有两个链接“FileOne”和“FileTwo”，它们载入两个不同的文本文件。在我调用$ .ajax之前，链接会从磁盘加载文件。在我调用$ .ajax之后，链接会从浏览器缓存中加载最后一个“FileOne”或“FileTwo”。
这是视图。的$就交的tiny_mce_save_click（）函数，其被连接到TinyMCE的保存按钮点击内部发生：
@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>
}
局部视图 “的getContent” 是：
@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>
这是控制器。在发生$ .ajax后不再调用GetContent方法：
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();
}
}
}
答
问题是broswer缓存。为了防止对Ajax.ActionLink进行缓存，您必须添加AjaxOption HttpMethod =“POST”。在上面的代码变化的ActionLink到
<li>@Ajax.ActionLink(fileName, "GetContent", new { FileName = fileName }, new AjaxOptions() { UpdateTargetId = "divContent", HttpMethod = "POST" })</li>.
找到答案 - 必须防止缓存在Ajax.ActionLink通过添加AjaxOption列举HTTPMethod = “POST”。在上述代码中将ActionLink更改为
+1提供解决方案（您可能添加这个答案并接受它） – Thariama