logo标签列表

使用Telerik网格与jQuery UI对话框！

c#asp.net-mvcjquery-uiteleriktelerik-mvc
6
在MVC用户控件form.ascx中，我有一个包含在名为“details”的div中的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>
问题是对话框从未显示！！并且用户控件显示在主页面中，就好像我没有使用对话框。 在“表单”用户控件内部，当我禁用网格时，一切正常，对话框正确显示。当我使用Firebug查找问题时，出现了以下错误： $未定义？？ 有人有想法吗？ 这是主页面： 
    <%@ 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>
你能发布更多信息吗？母版页和部分视图会很有帮助。 - Atanas Korchev
嗨，korchev，感谢您的回复，我已经修改了问题并添加了更多信息。 - Nour
2个回答
阿里云服务器只需要99元/年，新老用户同享，点击查看详情
13

如果你使用Telerik的ScriptRegistrar，默认情况下它会在页面底部输出一个指向jQuery的链接。如果你在页面中较高的位置需要jQuery，或者如果你手动在页面中添加了jQuery（就像你的代码示例一样），你可以通过以下方式禁用ScriptRegistrar的行为：

Html.Telerik().ScriptRegistrar().jQuery(false).Render();

注意，除非您实际使用该代码，否则您不需要“telerik.examples.js”或“prettyPrint();”代码。这些资源在Telerik演示中使用，但通常不在其他网站上使用。

按照上面所示的方式更新ScriptRegistrar后，您应该能够重新启用jQuery验证脚本而没有问题。

最后提醒一下，如果您要使用ScriptRegistrar压缩功能，则需要在web.config中注册Asset HttpHandler：

<add verb="GET,HEAD" path="asset.axd" validate="false" type="Telerik.Web.Mvc.WebAssetHttpHandler, Telerik.Web.Mvc"/>

更多细节请查看在线文档。

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(); %>

to 

<% Html.Telerik().ScriptRegistrar(); %>

我不知道这是如何解决问题的。

而且我在JavaScript方面并不是那么专业。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，