2010-07-19 31 views
6

trong điều khiển người dùng mvc được gọi là form.ascx, tôi có một Lưới Telerik chứa trong một div được gọi là "chi tiết".sử dụng lưới telerik với hộp thoại jquery ui!

từ một trang gọi là edit.aspx tôi đã viết như sau:

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

vấn đề là hộp thoại không bao giờ được thể hiện !! và điều khiển người dùng được hiển thị bên trong trang chính như thể tôi không sử dụng hộp thoại.

bên trong điều khiển người dùng "biểu mẫu", khi tôi vô hiệu hóa lưới, mọi thứ hoạt động tốt và hộp thoại được hiển thị chính xác. khi tôi sử dụng con bọ lửa để tìm ra sự cố, lỗi sau xuất hiện:

$ không được định nghĩa ????

bất kỳ nội dung nào đều có ý tưởng ??

đây là trang chủ:

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

và đây là quan điểm phần 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> 
+0

Bạn có thể đăng thêm thông tin không? Trang chính và chế độ xem một phần sẽ là trợ giúp. –

+0

hi korchev, cảm ơn bạn đã trả lời, tôi đã sửa đổi câu hỏi và thêm thông tin. –

Trả lời

2

tôi đã tìm ra vấn đề:

tôi vô hiệu hóa các tập tin kịch bản sau đây (đã bị tắt trong tình huống này):

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

và thay đổi đoạn mã sau:

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

để

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

tôi không biết làm thế nào giải quyết vấn đề này.

và tôi không chuyên nghiệp về JavaScript.

13

Khi bạn sử dụng Telerik ScriptRegistrar, theo mặc định nó sẽ xuất ra một liên kết tới jQuery ở cuối trang của bạn. Nếu bạn có mã "cao hơn" trong trang cần jQuery hoặc nếu bạn thêm jQuery vào trang của mình theo cách thủ công (như bạn đang ở trong ví dụ mã), bạn có thể vô hiệu hóa hành vi của ScriptRegistrar, như sau:

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

Cũng lưu ý rằng bạn không cần "telerik.examples.js" hoặc "prettyPrint();" mã trừ khi bạn đang thực sự sử dụng mã đó. Các tài nguyên này được sử dụng trong các bản trình diễn Telerik, nhưng không thường trong các trang web khác.

Bạn sẽ có thể cập nhật ScriptRegistrar của mình như được hiển thị ở trên và sau đó bật lại các tập lệnh xác thực jQuery mà không gặp vấn đề gì.

Là một lưu ý cuối cùng, nếu bạn đang sử dụng nén ScriptRegistrar, bạn cần phải đăng ký HttpHandler Asset trong web.config của bạn:

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

Chi tiết có available in the online docs.

+0

Cảm ơn Todd, bạn đã đúng. –

Các vấn đề liên quan