Question

I have two views: create and edit. Both share a strongly typed editor template user control.

I have a jQuery wysiwyg editor on the shared editor template, and it works fine without errors on the create view, but when I load up the edit view, firefox reports that “$ is not defined” “jquery is not defined” etc.

Also, the images from the site.master on the edit view don’t load, despite the paths in the page source are identical between it and the create view. I’m using the WYSIWYG editor to save HTML to a database, and this is loaded into the textarea on the edit view, could that be the issue?

Relevant code below:

Create View

<%@ 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>

Create Action

//
        // GET: /News/Create

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

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

            return View(viewModel);
        } 

Edit View:

<%@ 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>

The Edit Action

 //
        // 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);
        }

The shared edit template

<%@ 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>

Scripts from 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

Because you are using a relative path in your script tag, the reference to the jQuery source file will only work for pages which happen to be two levels deep in your site’s path hierarchy, like News/Create. With a path which is three levels deep, like News/Edit/5, you now have a bad script path and the web server will return a 404 error when the browser tries to follow it. You will see this error if you look at Fiddler or Firebug’s Net panel when your site is loading.

Instead of relative paths, you should be using URL.Content in your script references, like:

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