带有 Telerik 编辑器的 MVC4 无法正常工作答案

【问题标题】：MVC4 with Telerik Editor not working带有 Telerik 编辑器的 MVC4 无法正常工作
【发布时间】：2012-05-27 12:53:37
【问题描述】：

由于某种原因，我的 Telerik MVC Editor() 无法正常工作。谁能发现我做错了什么？

我正在使用带有 Razor 视图引擎和 Telerik 版本 2012.1.214 的 MVC4

_Layout.cshtml 包括：

@using Smekklegt.Models
@using Telerik.Web.Mvc.UI
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="is" xml:lang="is">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<!-- Skrár frá template-->
<link href="@Url.Content("~/Content/rikona/styles/galleriffic.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/rikona/style.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/jquery.opacityrollover.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/jquery.galleriffic.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/rikona/js/gallery-settings.js")" type="text/javascript"></script>
<!--[if IE 6]>
        <script src="../../Content/rikona/js/ie6-transparency.js"></script>
        <script>
            DD_belatedPNG.fix('#header .logo img, .subtitle img, .slideshow-container, .navigation-container #thumbs .thumbs li .thumb img, .navigation a.next, .footer-line, #sidebar .author-photo, .line, .commentlist .comment-reply-link, #contact-page #contact .submit');
        </script>
        <link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie6.css" />
    <![endif]-->
<!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie7.css" />
    <![endif]-->
<!--[if IE 8]>
        <link rel="stylesheet" type="text/css" href="../../Content/rikona/styles/ie8.css" />
    <![endif]-->
@(Html.Telerik().StyleSheetRegistrar()
                  .DefaultGroup(group => group
                      .Add("telerik.common.css")
                      .Add("telerik.simple.css")
                      .Combined(true)
                      .Compress(true))
                 )
</head>
<body>
<div id="wrap">
    <div id="header">
        <section id="login" style="float: right;">
            @Html.Partial("_LogOnPartial")
        </section>
        <section style="float: left;">
            <ul>
                <li>@Html.ActionLink("Flokkar", "Index", "Category")</li>
                <li>@Html.ActionLink("Vörur", "Index", "Product")</li>
            </ul>
        </section>
        <div class="logo">
            <img src="../../Content/rikona/images/smekklegt_banner2.jpg" alt="logo" width="400px;" />
        </div>
        <div id="nav">                
            <ul id="nav-pages">
                <li>@Html.ActionLink("Forsíða", "Index", "Home")<span>|</span></li>
                @foreach (Category category in (IEnumerable<Category>)ViewData["Categories"])
                {
                    <li>@Html.ActionLink(category.Name, "FindProductsByCategory", "Product", new { catId = category.Id }, null)<span>|</span></li>
                }
                <li>@Html.ActionLink("smekklegt.is", "Contact", "Home")</li>
            </ul>
        </div>
    </div>
    <div id="frontpage-content">
        <div id="container">
            @RenderSection("featured", false)
            <section class="content-wrapper main-content clear-fix">
                @RenderBody()
            </section>
        </div>
    </div>

    <div id="footer" style="margin-top: 15px;">
        <div class="footer-line">
        </div>
            <p>
                &copy; @DateTime.Now.Year Smekklegt ehf</p>
        <div class="float-right">
            <ul id="social">
                <li><a href="https://www.facebook.com/sersaumadir.smekkir" target="_blank" class="facebook">Facebook</a></li>
            </ul>
        </div>
    </div>
    @Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(g => g.Combined(true).Compress(true))
</div>

Create.cshtml 包括：

@using Telerik.Web.Mvc.UI
@model Smekklegt.Controllers.ProductFormViewModel

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>Product</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Product.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Product.Name)
        @Html.ValidationMessageFor(model => model.Product.Name)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Product.FK_Category)
    </div>
    <div class="editor-field">
        @*@Html.EditorFor(model => model.Product.FK_Category)*@
        @Html.DropDownListFor(d => d.Categories, new SelectList(Model.Categories, "Id", "Name"))
        @Html.ValidationMessageFor(model => model.Product.FK_Category)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Product.Description)
    </div>

    <div>
        @{ Html.Telerik().EditorFor(m => m.Product.Description)
               .Name("ProductCreateEditor")
               .Encode(false)
               .HtmlAttributes(new { style = "width: 500px;" })
               .Tools(t => t.Clear()
               .Bold().Italic().Underline().Separator().JustifyCenter().JustifyLeft().JustifyRight().JustifyFull())
               //.Value((string)ViewData["ProductDescription"])
               .Render(); }
    </div>

    <p>
        <input type="submit" value="Stofna" />
        <input type="button" value="Til baka" onclick="javascript:history.go(-1)"/>
    </p>
</fieldset>
}

我遇到的问题是，每次我加载页面时，telerik 编辑器都会出现，但我无法写入文本区域。（看起来它被禁用了）:(

【问题讨论】：

我注意到脚本注册商的位置会有所不同。例如，编辑器将在 RenderBody() 中调用的视图中工作，但如果它在 _Layout 中则不会。如果我在布局之后添加注册商，它似乎对我有用，不知道这是否会有所帮助。

标签： c# jquery asp.net-mvc razor telerik

【解决方案1】：

更新从您的布局中删除此行

<script src="@Url.Content("~/Content/rikona/js/jquery-1.3.2.js")" type="text/javascript"></script>

你只需要一个版本的 Jquery，它们是相互冲突的，这是我最好的选择。

其他一切看起来都不错

删除这一行

.Value((string)ViewData["ProductDescription"])

您正在使用 EditorFor 将值从模型中提取出来。所以你只需要在一个地方设置值。您试图将其设置在两个位置，EditorFor 和 Value。

如果您只使用Editor 而不是EditorFor，您可以使用Value

所以选择像这样EditorFor：

@{ Html.Telerik().EditorFor(m => m.Product.Description)
    .Name("ProductCreateEditor")
    ...
    .Render(); 
}

或Editor

@{ Html.Telerik().Editor()
    .Name("ProductCreateEditor")
    ...
    .Value((string)ViewData["ProductDescription"])
    .Render(); 
}

正如 John 所说，确保 Telerik 脚本的放置位置正确。它必须在底部的_Layout页面中，如下所示；

        @(Html.Telerik().ScriptRegistrar().jQuery(false).DefaultGroup(group => group.Combined(true).Compress(true)))
    </body>
</html>

【讨论】：

感谢两位的回答。 Telerik 脚本像您所说的那样放置在正文中 _Layout 页面的底部。我还尝试从编辑器声明的值部分中删除 ViewData，但编辑器仍然无法正常工作。编辑器出现在页面加载时，好像一切都应该正常工作，但由于某种原因，我无法将我的标记放在文本区域并开始选择编辑器。我检查了 Firebug，它没有抛出任何脚本错误（只是为了确定）。这可能是由于某些验证错误还是...？
我必须查看包含编辑器和布局的视图才能做出更明智的回答。您是否在布局中包含自己的 jQuery 脚本？
@gardarvalur 这里也是编辑器的 Telerik 支持表单线程。似乎还有其他人遇到了您的问题。其中一项建议是删除加载项。看起来您的 jquery 版本和加载项与 Telerik 正常工作有冲突
2012.1.214 的 Telerik 版本是 1.7.1 版。你包括 1.7.2 和 1.3.2 所以说 jquery(false) 它将使用你的 1.7.2。
我建议将版本 1.7.2 复制到 /Content/rikona/js/ 文件夹中，然后删除 1.3.2 的行并将 jquery(false) 留在 Telerik 脚本中