использование telerik сетка с jQuery ui диалоговое окно!
в mvc пользовательском элементе управления, названном form.ascx, мне содержали Сетку Telerik в названных "деталях" отделения.
от страницы, названной edit.aspx, я записал следующее:
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="details">
<%Html.RenderPartial("form", Model != null ? Model.CurrentEntity : null); %>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('#details').dialog(
{ modal: true,
title: "add",
width: 815,
buttons: {
'save': function () { $("form:first").trigger("submit"); },
'close': function () { $(this).dialog('close'); }
}
});
});
</script>
</asp:Content>
проблемой является диалоговое окно, никогда не показывается!! и пользовательский элемент управления показывают в основной странице, как будто я не использую диалоговое окно.
в пользовательском элементе управления "формы", когда я отключаю сетку, хорошо работает каждая вещь, и диалоговое окно показывают правильно. когда я использовал поджигателя для выяснения проблемы, следующая ошибка появилась:
$ не определяется????
какое-либо тело имеет идею??
вот основная страница:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<%@ Import Namespace="Telerik.Web.Mvc.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link type="text/css" href="../../Content/Site.css" rel="stylesheet" />
<link type="text/css" href="../../content/css/start/jquery-ui-1.8.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.2.custom.js"></script>
<%--<script type="text/javascript" src="../../Scripts/Jquery.Validate.js"></script>--%>
<%--<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js"></script>--%>
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
</head>
<body>
<%= Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group => group.Add("telerik.common.css")
.Add("telerik.outlook.css"))
<!----- some html content only ----->
<div id="maincontent" class="fixed">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<asp:ContentPlaceHolder runat="server" ID="Footer" />
<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("telerik.examples.js").Compress(true); }).
OnDocumentReady(() =>
{ %>prettyPrint();<% }).Render(); %>
</body>
</html>
и вот частичное представление form.acsx:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Bereau.Core.IncommingCorrespondence>" %>
<%@ Import Namespace="System.Web.Mvc.Html" %>
<%@ Import Namespace="BureauModule.Utility" %>
<%@ Import Namespace="Telerik.Web.Mvc.UI" %>
<%--<%= Html.ValidationSummaryJQuery("Error must be fixed.", new Dictionary<string, object> { { "id", "valSumId" } })%>--%>
<%--<% Html.EnableClientValidation(); %>--%>
<% using (Html.BeginForm())
{ %>
<%=Html.DisplayFor (c=>c.Photocopy ) %>
<%--<% ViewContext.FormContext.ValidationSummaryId = "valSumId"; %>--%>
<form action="" method="post" id="customer_form" dir="rtl">
<div class="editor-label">
<%:Html.LabelFor(c => c.Overstatment)%>
<%=Html.TextBoxFor(c => c.Overstatment,new { @class ="text ui-widget-content ui-corner-all"})%>
<%--<%= Html.ValidationMessageFor(model => model.Overstatment,"*") %>--%>
</div>
<div>
<label for="CorrespondenceNumber">CorrespondenceNumber:</label>
<%=Html.TextBoxFor(c => c.CorrespondenceNumber, new { @class = "text ui-widget-content ui-corner-all" })%>
<span>
<%--<%= Html.ValidationMessageFor(model => model.CorrespondenceNumber, "*")%>--%></span>
</div>
<div>
<label for="Nature">Nature:</label>
<%=Html.DropDownList("Nature")%>
<%--<%= Html.ValidationMessageFor(model => model.Nature, "*")%>--%>
</div>
<div>
<label for="Sender">Sender:</label>
<%=Html.DropDownList("Sender")%>
<%--<%= Html.ValidationMessageFor(model => model.Sender, "*")%>--%>
</div>
<div class="correspondenceReceiver">
<% Html.Telerik().Grid<Bereau.Core.CorrespondenceDetail>(Model != null ? Model.Details : null)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.CorrespondenceDetailID))
.HtmlAttributes(new { @class = "t-grid-rtl" })
.Columns(columns =>
{
columns.Bound(c => c.CorrespondenceDetailID).Visible(false);
columns.Bound(c => c.Sender).Title("Sender");
columns.Bound(c => c.Count).Title("Count");
columns.Bound(c => c.Date).Title("Date").Format("{0:yyyy/MM/dd}");
columns.Bound(c => c.Notes).Title("Notes");
columns.Command(c => c.Edit());
})
.ToolBar(t => t.Insert())
.DataBinding
(c => c.Ajax()
.Select("Select", "IncommingCorespondence")
.Insert("InsertDetail", "IncommingCorespondence")
.Update("UpdateDetail", "IncommingCorespondence")
)
.Scrollable()
.Sortable()
.Pageable()
.Render();
%>
<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() =>
{
%>
$('.insert-button').click(function(e) { e.preventDefault(); $('#Grid').data('tGrid').createRow();
});
<% }); %>
</div>
<input type="submit" runat="server" />
<% } %>
</form>
2 ответа
я разобрался с проблемой:
я отключил следующие файлы скриптов (которые уже отключены в данной ситуации):
<%--<script type="text/javascript" src="../../Scripts/Jquery.Validate.js"></script>--%>
<%--<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js">/script>--%>
и изменил следующий код:
% Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("telerik.examples.js").Compress(true); }).
OnDocumentReady(() =>
{ %>prettyPrint();<% }).Render(); %>
на
<% Html.Telerik().ScriptRegistrar(); %>
я не знаю как это решило проблему.
и я не настолько профессионал в JavaScript.
Когда вы используете Telerik ScriptRegistrar, по умолчанию он выводит ссылку на jQuery в нижней части вашей страницы. Если у вас есть код "выше" на странице, которому нужен jQuery, или если вы вручную добавляете jQuery на страницу (как в вашем примере кода), вы можете отключить поведение ScriptRegistrar, например, так:
Html.Telerik().ScriptRegistrar().jQuery(false).Render();
Также обратите внимание, что вам не нужен код "telerik.examples.js" или "prettyPrint();", если вы не используете этот код. Эти ресурсы используются в демонстрационных версиях Telerik, но обычно не используются на других веб-сайтах.
Вы должны иметь возможность обновить ScriptRegistrar, как показано выше, а затем снова включить сценарии валидации jQuery без проблем.
В качестве последнего замечания, если вы собираетесь использовать сжатие ScriptRegistrar, вам необходимо зарегистрировать Asset HttpHandler в вашем web.config:
<add verb="GET,HEAD" path="asset.axd" validate="false" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>
Более подробная информация доступна в онлайн-документации.