ASP.NET MVC: Javascript выполняется правильно при создании представления, но не при редактировании представления

У меня есть два вида: создать и редактировать. Оба имеют строго типизированный пользовательский элемент управления шаблона редактора.

У меня есть редактор wysiwyg 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>

person Grahame A    schedule 20.08.2010    source источник
comment
Является ли сгенерированный HTML действительным (проверьте с помощью validator.w3.org)?   -  person davehauser    schedule 21.08.2010


Ответы (1)


Поскольку вы используете относительный путь в теге script, ссылка на исходный файл jQuery будет работать только для страниц, которые находятся на два уровня глубже в иерархии путей вашего сайта, например News/Create. С путем, который имеет три уровня в глубину, например News/Edit/5, у вас теперь будет неверный путь сценария, и веб-сервер вернет ошибку 404, когда браузер попытается следовать ему. Вы увидите эту ошибку, если посмотрите на панель Fiddler или Firebug Net во время загрузки вашего сайта.

Вместо относительных путей вы должны использовать URL.Content в своих ссылках на скрипты, например:

<script src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>" type=".....
person Craig Stuntz    schedule 21.08.2010
comment
Это совершенно логично, почему ни один из моих скриптов не работает должным образом в моих представлениях редактирования, потому что они имеют дополнительный уровень для URL-адреса. Спасибо - person Grahame A; 21.08.2010