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

本文关键字：常工作 工作 编辑器 Telerik MVC4 带有 | 更新日期: 2023-09-27 18:35:24

由于某种原因，我的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 编辑器，但我无法写入文本区域。 （看起来它被禁用了）:(

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

更新从布局中删除此行

<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>
相关文章：