ajax - mvc 3 razor 中的 tinymce，Ajax.ActionLinks 在第一次 ajax 调用后失败

Question

我在 asp.net mvc 3 Razor 应用程序中使用 Tinymce。 Ajax.ActionLink 通过调用名为“GetContent”的 Controller 操作加载 tinymce 编辑器。 GetContent 方法从文件系统加载一个文本文件。一切都很好。但是，在我通过 $.ajax 调用保存 tinymce 文本后，Ajax.ActionLink 不再触发 Controller 方法。换句话说，$.ajax post 中的某些内容破坏了客户端上的 Ajax.ActionLink，因此它不再调用 GetContent Controller 操作。

有趣的是，Ajax.ActionLink 仍然加载 tinymce 编辑器，但是从浏览器缓存加载。在下面的示例中，我有 2 个链接“FileOne”和“FileTwo”，它们加载两个不同的文本文件。在我调用 $.ajax 之前，链接从磁盘加载文件。在我调用 $.ajax 之后，链接从浏览器缓存中加载最后一个“FileOne”或“FileTwo”。

这是 View 。 $.ajax post 出现在 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>
    }

部分 View “GetContent”是:

    @model TestTinyMCE.Models.HomeModel
        @{
            Layout = null;
        }
        <div id="divContent">
            <fieldset id="fsContent">
                <span id="results"></span><legend>Edit Content &nbsp; @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>

这是 Controller 。在 $.ajax post 发生后不再调用 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();
                }
            }
        }

Answer 1

问题是浏览器缓存。要防止在 Ajax.ActionLink 上缓存，您必须添加 AjaxOption HttpMethod = "POST"。在上面的代码中，将 ActionLink 更改为

<li>@Ajax.ActionLink(fileName, "GetContent", new { FileName = fileName }, new AjaxOptions() { UpdateTargetId = "divContent", HttpMethod = "POST" })</li>. 

参见 http://forums.asp.net/t/1681358.aspx?Disable+cache+in+Ajax+ActionLink+extension+method+in+asp+net+MVC