2010-07-19 2 views
6

nel controllo utente di mvc chiamato form.ascx, ho una griglia di Telerik contenuta in un div chiamato "dettagli".utilizzando la griglia di telerik con la finestra di dialogo ui jquery!

da una pagina chiamata Edit.aspx ho scritto il seguente:

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

il problema è la finestra di dialogo non viene mai mostrato !! e il controllo utente è mostrato all'interno della pagina master come se non stia usando una finestra di dialogo.

all'interno del controllo utente "modulo", quando disattivo la griglia, ogni cosa funziona correttamente e la finestra di dialogo viene visualizzata correttamente. quando ho usato il firebug per capire il problema, è apparso il seguente errore:

$ non definito ????

qualsiasi organismo ha un'idea ??

Ecco la pagina master:

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

e qui è la vista parziale 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

Puoi pubblicare maggiori informazioni? La pagina principale e la vista parziale sarebbero di aiuto. –

+0

hi korchev, grazie per la risposta, ho modificato la domanda e aggiunto ulteriori informazioni. –

risposta

2

ho capito il problema:

ho disabilitato i seguenti file di script (che sono già disabilitati nella situazione):

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

e cambiato il seguente codice:

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

a

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

non so come è potuto risolvere il problema.

e io non sono così professionale in JavaScript.

13

Quando si utilizza Telerik ScriptRegistrar, per impostazione predefinita verrà generato un collegamento a jQuery nella parte inferiore della pagina. Se si dispone di codice "superiore" nella vostra pagina che ha bisogno di jQuery, o se si sta aggiungendo manualmente jQuery per la tua pagina (come siete nel vostro esempio di codice), è possibile disattivato il comportamento del ScriptRegistrar, in questo modo:

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

Si noti inoltre che non è necessario "telerik.examples.js" o "prettyPrint();" codice a meno che non si stia effettivamente utilizzando quel codice. Queste risorse vengono utilizzate nelle demo di Telerik, ma non in genere in altri siti Web.

Dovresti essere in grado di aggiornare ScriptRegistrar come mostrato sopra e quindi riattivare gli script di convalida jQuery senza problemi.

Come nota finale, se avete intenzione di utilizzare la compressione ScriptRegistrar, è necessario registrare l'Asset HttpHandler nel web.config:

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

Maggiori dettagli sono available in the online docs.

+0

Grazie Todd, hai ragione. –