ASP.NET MVC：Javascript 在创建视图上正确执行，但不是编辑视图

Question

我有两个视图：创建和编辑。两者共享一个强类型编辑器模板用户控件。

我在共享编辑器模板上有一个 jQuery 所见即所得编辑器，它在创建视图上工作正常，没有错误，但是当我加载编辑视图时，firefox 报告“$ 未定义”“jquery 未定义”等等。

此外，尽管页面源中的路径与创建视图之间的路径相同，但编辑视图中来自 site.master 的图像不会加载。我正在使用 WYSIWYG 编辑器将 HTML 保存到数据库，并将其加载到编辑视图的文本区域中，这可能是问题吗？

相关代码如下：

创建视图

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MHNHub.ViewModels.NewsViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Create
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
    <strong>Create</strong>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm())
       {%>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>News Article</legend>
        <div id="form_wrapper">
            <div id="form_top">
                <p class="formTitle">
                    New Post</p>
                <p class="requiredField">
                    <span class="valid">*</span>Required Field</p>
            </div>
            <div id="form_mid">
                <% if (Model.HasError)
                   { %>
                <em class="error">
                    <%: Model.ErrorMessage %></em>
                <%} %>
                <%: Html.EditorFor(model => model.NewsArticle)%>
                <div id="form_buttons">
                    <input type="submit" value=" " id="Create" />
                    <%: Html.ActionLink(" ", "Index", "News", null, new{ id = "BackToList"}) %>
                </div>
            </div>
            <div id="form_bottom">
            </div>
        </div>
    </fieldset>
    <% } %>
</asp:Content>

创建动作

//
        // GET: /News/Create

        public ActionResult Create()
        {
            var newsArticle = new NewsArticle();

            var viewModel = new NewsViewModel()
            {
                NewsArticle = newsArticle
            };

            return View(viewModel);
        } 

编辑视图：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MHNHub.ViewModels.NewsViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Edit
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeaderContent" runat="server">
    <strong>Edit</strong>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm("Edit", "News", new { id = Model.NewsArticle.ArticleID }))
       {%>
    <%: Html.ValidationSummary(true) %>
    <fieldset>
        <legend>News Article</legend>
        <div id="form_wrapper">
            <div id="form_top">
                <p class="formTitle">
                    Existing Post</p>
                <p class="requiredField">
                    <span class="valid">*</span>Required Field</p>
            </div>
            <div id="form_mid">
                <% if (Model.HasError)
                   { %>
                <em class="error">
                    <%: Model.ErrorMessage %></em>
                <%} %>
                <%: Html.EditorFor(model => model.NewsArticle)%>
                <div id="form_buttons">
                    <input type="submit" value=" " id="Update" />
                    <%: Html.ActionLink(" ", "Index", "News", null, new{ id = "BackToList"}) %>
                </div>
            </div>
            <div id="form_bottom">
            </div>
        </div>
    </fieldset>
    <% } %>
</asp:Content>

编辑操作

 //
        // GET: /News/Edit/5

        public ActionResult Edit(int id)
        {
            var viewModel = new NewsViewModel()
            {
                NewsArticle = mhndb.NewsArticles.Single(n => n.ArticleID == id)
            };

            TempData["NewsViewModel"] = viewModel;

            return View(viewModel);
        }

共享编辑模板

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MHNHub.Models.NewsArticle>" %>

    <div class="editor-label">
        Article Title<span class="valid">*</span>
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Title) %>
        <%: Html.ValidationMessageFor(model => model.Title) %>
    </div>

    <div class="editor-label">
        Subtitle
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Subtitle) %>
        <%: Html.ValidationMessageFor(model => model.Subtitle) %>
    </div>

    <div class="editor-label">
        Description
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.Description) %>
        <%: Html.ValidationMessageFor(model => model.Description) %>
    </div>

    <div class="editor-label">
        Article Content <span class="valid">*</span>
    </div>
    <div class="editor-field">
        <%: Html.TextAreaFor(model => model.ArticleContent, new{id="wysiwyg", name="wysiwyg"}) %>
        <%: Html.ValidationMessageFor(model => model.ArticleContent) %>
    </div>

    <div class="editor-label">
        Category ID
    </div>
    <div class="editor-field">
        <%: Html.TextBoxFor(model => model.CategoryID) %>
        <%: Html.ValidationMessageFor(model => model.CategoryID) %>
    </div>

来自 site.master 的脚本

<link href="../../Content/jquery.cleditor.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.cleditor.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#wysiwyg").cleditor();
    });
</script>

Answer 1

因为您在 script 标记中使用了相对路径，所以对 jQuery 源文件的引用仅适用于恰好位于站点路径层次结构中的两个级别的页面，例如新闻/创建。使用三层深度的路径，例如 News/Edit/5，您现在有一个错误的脚本路径，当浏览器尝试跟踪它时，Web 服务器将返回 404 错误。如果您在网站加载时查看 Fiddler 或 Firebug 的 Net 面板，您将看到此错误。

您应该在脚本引用中使用 URL.Content 而不是相对路径，例如：

<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type=".....