代码之家  ›  专栏  ›  技术社区  ›  Grahame A

ASP.NETMVC:Javascript在create视图上正确执行,而不是edit视图

  •  1
  • Grahame A  · 技术社区  · 14 年前

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

    我在共享编辑器模板上有一个jQuery所见即所得编辑器,在create视图上没有错误,但是当我加载edit视图时,firefox报告“$is not defined”“jQuery is not defined”等等。

    还有,来自站点.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);
            } 
    

    编辑视图:

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

    脚本来自站点.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>
    
    1 回复  |  直到 14 年前
        1
  •  0
  •   Craig Stuntz    14 年前

    script 标记时,对jQuery源文件的引用将只适用于恰好位于站点路径层次结构中两层的页面,如News/Create。对于一个三层深的路径,比如News/Edit/5,您现在有一个错误的脚本路径,当浏览器尝试跟踪它时,web服务器将返回404错误。如果在加载站点时查看Fiddler或Firebug的Net面板,就会看到这个错误。

    您应该使用URL.内容在脚本引用中,例如:

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