ASP.NET MVC：JavaScript在创建视图时正确执行，但不能编辑视图

Question

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

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

另外，尽管页面源代码中的路径与创建视图之间的路径相同，但编辑视图上site.master的图像不会加载。我使用WYSIWYG编辑器将​​HTML保存到数据库，并将其加载到编辑视图的textarea上，这可能是问题吗？

相关代码如下：

创建视图

<%@ 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); 
     } 

编辑观点：

个​​

编辑操作

// 
     // 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/Create。通过一个三层深的路径，比如News/Edit/5，你现在有一个糟糕的脚本路径，当浏览器试图跟踪它时，web服务器将返回一个404错误。如果您在加载站点时查看Fiddler或Firebug的网络面板，则会看到此错误。

而是相对路径，你应该在你的脚本引用使用URL.Content，如：

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