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>
