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=".....