代码之家  ›  专栏  ›  技术社区  ›  Nour

使用带有jqueryui对话框的telerik网格!

  •  6
  • Nour  · 技术社区  · 15 年前

    在名为form.ascx的mvc用户控件中,我有一个包含在名为“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>
    

    用户控件显示在母版页中,就好像我没有使用对话框一样。

    在“form”用户控件中,当我禁用网格时,一切正常,对话框显示正确。

    $未定义????

    任何人都有想法??

    这是母版页:

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

    <%@ 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 回复  |  直到 12 年前
        1
  •  13
  •   Todd    15 年前

    当你用遥控器的时候 ScriptRegistrar ,默认情况下,它将在页面底部输出到jQuery的链接。如果页面中有需要jQuery的代码“更高”,或者正在手动将jQuery添加到页面中(如代码示例中所示),则可以禁用ScriptRegistrar的行为,如下所示:

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

    您应该能够如上所示更新scriptregister,然后重新启用jQuery验证脚本而不会出现问题。

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

    更多细节如下 available in the online docs

        2
  •  2
  •   Nour    15 年前

    <%--<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也不是那么专业。

    推荐文章