当前位置： 文江博客话题详情

使用 Telerik 网格和 jquery ui 对话框！

发布于 2024-09-10 14:18:01 字数 6131 浏览 12 评论 0原文

在名为 form.ascx 的 mvc 用户控件中，我有一个包含在名为“details”的 div 中的 Telerik Grid。

从一个名为 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>
原文

in mvc user control called form.ascx, I have a Telerik Grid contained in a div called "details".

from a page called edit.aspx i wrote the following:

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

the problem is the dialog is never shown!!
and the user control is shown inside the master page as if i'm not using a dialog.

inside the "form" user control, when i disable the grid, every thing works fine and the dialog is shown correctly.
when i used the firebug to figure out the problem, the following error appeared:

$ is not defined????

any body has an idea ??

here is the master page:

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

and here is the partial view 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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

￡噩梦荏苒 2024-09-17 14:18:01

当您使用 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"/>

更多详细信息为 可在在线文档中找到。

When you use the Telerik ScriptRegistrar, by default it will output a link to jQuery at the bottom of your page. If you have code "higher" in your page that needs jQuery, or if you're manually adding jQuery to your page (as you are in your code example), you can disabled the ScriptRegistrar's behavior, like this:

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

Also note that you do not need the "telerik.examples.js" or the "prettyPrint();" code unless you are actually using that code. These resources are used in the Telerik demos, but not typically in other websites.

You should be able to update your ScriptRegistrar as shown above and then re-enable your jQuery validation scripts without issue.

As a final note, if you are going to use ScriptRegistrar compression, you need to register the Asset HttpHandler in your web.config:

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

More details are available in the online docs.

回复 原文
彻夜缠绵 2024-09-17 14:18:01

我找出了问题：

我禁用了以下脚本文件（在这种情况下已禁用）：

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

i figured out the problem:

i disabled the following script files (which are already disabled in the situation):

<%--<script type="text/javascript" src="../../Scripts/Jquery.Validate.js"></script>--%>
<%--<script type="text/javascript" src="../../Scripts/MicrosoftMvcJQueryValidation.js">/script>--%>

and changed the following code:

% Html.Telerik().ScriptRegistrar().DefaultGroup(group => { group.Add("telerik.examples.js").Compress(true); }).
           OnDocumentReady(() =>
           { %>prettyPrint();<% }).Render(); %>

to

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

i don't know how did this solve the problem.

and I'm not that professional in JavaScript.

回复 原文
~没有更多了~

关于作者

缱绻入梦

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

Promise

文章 0 评论 0

qq_lbRlsh

文章 0 评论 0

待＂谢繁草

文章 0 评论 0

yy2010hell

文章 0 评论 0

漫无边际

文章 0 评论 0

傲娇萝莉攻

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文