AjaxManager with User Control

3 posts, 0 answers
  1. Melvin
    Melvin avatar
    14 posts
    Member since:
    Apr 2015

    Posted 03 May Link to this post

    Hi,

    I have a problem when I use the ajaxmanager with user control. This generate a error on JavaScript and I don't understand why?  

    The first time everything is Ok, but when I press submit the page generate this issue:

    Uncaught Sys.WebForms.PageRequestManagerParserErrorException: Sys.WebForms.PageRequestManagerParserErrorException: No se pudo analizar el mensaje recibido del servidor. Este error suele producirse cuando la respuesta resulta modificada por llamadas a Response.Write() o cuando los filtros de respuesta, los HttpModules o el seguimiento de servidor están habilitados.
    Detalles: Error de análisis cerca de ':"text/javascript"}|
     
    <!DOCTYPE html>
    '.

     

    I have tried placing a radajaxmanagerproxy in the user control as shown in Demo. But I always get the same result.

    Any ideas?

     

    Code User Control.

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <style>
            .rcInputCell
            {
                padding: 0 !important;
                width: 0 !important;
            }
     
            .HiddenTextBox
            {
                width: 1px !important;
                border: 0 !important;
                margin: 0 !important;
                background: none transparent !important;
                display: none;
            }
        </style>
        <script type="text/javascript">
            function isValidDate(str) {
                var parts = str.split('/');
                if (parts.length < 3)
                    return false;
                else {
                    var day = parseInt(parts[0]);
                    var month = parseInt(parts[1]);
                    var year = parseInt(parts[2]);
                    if (isNaN(day) || isNaN(month) || isNaN(year)) {
                        return false;
                    }
                    if (day < 1 || year < 1)
                        return false;
                    if (month > 12 || month < 1)
                        return false;
                    if ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)
                        return false;
                    if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30)
                        return false;
                    if (month == 2) {
                        if (((year % 4) == 0 && (year % 100) != 0) || ((year % 400) == 0 && (year % 100) == 0)) {
                            if (day > 29)
                                return false;
                        } else {
                            if (day > 28)
                                return false;
                        }
                    }
                    return true;
                }
            }
     
            function getPosition(element) {
                var xPosition = 0;
                var yPosition = 0;
                while (element) {
                    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                    element = element.offsetParent;
                }
                return { x: xPosition, y: yPosition };
            }
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadMaskedTextBox ID="rmtbFechaInicial" runat="server"  ClientIDMode="Static" Width="130px">
    </telerik:RadMaskedTextBox>
    <telerik:RadDatePicker ID="rdpFechaInicial" runat="server" Culture="es-ES" ClientIDMode ="Static" Width="30px">
        <DateInput CssClass="HiddenTextBox"></DateInput>
    </telerik:RadDatePicker>

    Code behind User Control

    public partial class ctrlFecha : System.Web.UI.UserControl
        {
            public enum TipoDeUso
            {
                Normal,
                Periodo
            }
     
            #region Propiedades
             
            public DateTime? FechaSeleccionada
            {
                get { return rdpFechaInicial.SelectedDate; }
                set { rdpFechaInicial.SelectedDate = Convert.ToDateTime(value); }
            }
     
            private string _nombreCtrlMascara = "rmtbFechaInicial";
            public string NombreCtrlMascara { get { return _nombreCtrlMascara; } set { _nombreCtrlMascara = value; } }
     
            private string _nombreCtrlPicker = "rdpFechaInicial";
            public string NombreCtrlPicker { get { return _nombreCtrlPicker; } set { _nombreCtrlPicker = value; } }
     
            private TipoDeUso _tipoDeUso = TipoDeUso.Normal;
            public TipoDeUso TipoUso { get { return _tipoDeUso; } set { _tipoDeUso = value; } }
     
            private string _mascaraUsar = "##/##/####";
            public string MascaraUsar { get { return _mascaraUsar; } set { _mascaraUsar = value; } }
     
            private bool _usarValidacionJS = false;        ]
            public bool UsarValidacionJS { get { return _usarValidacionJS; } set { _usarValidacionJS = value; } }
             
             
            public RadMaskedTextBox CtrolMaskedTextBox { get { return rmtbFechaInicial; } set { rmtbFechaInicial = value; } }
             
            public RadDatePicker CtrolDatePicker { get { return rdpFechaInicial; } set { rdpFechaInicial = value; } }
            #endregion
     
            protected void Page_Load(object sender, EventArgs e)
            {
                //if (!IsPostBack)
                //{
                rmtbFechaInicial.ID = NombreCtrlMascara;
                rmtbFechaInicial.Mask = MascaraUsar;
                rmtbFechaInicial.ClientEvents.OnBlur = "UpdateCalendar_" + NombreCtrlPicker;
     
                rdpFechaInicial.DateInput.DateFormat = TipoUso == TipoDeUso.Normal ? "dd/MM/yyyy" : "MM/yyyy";
                rdpFechaInicial.ID = NombreCtrlPicker;
                rdpFechaInicial.DatePopupButton.Attributes["OnClick"] = "Popup_" + NombreCtrlPicker + "(); return false;";
                rdpFechaInicial.ClientEvents.OnDateSelected = "UpdateTextBox_" + NombreCtrlPicker;
                if (FechaSeleccionada != null)
                    rmtbFechaInicial.TextWithLiterals = Convert.ToDateTime(FechaSeleccionada).ToString(rdpFechaInicial.DateInput.DateFormat);
     
                //rdpFechaInicial.SelectedDate = FechaSeleccionada;
                rdpFechaInicial.Calendar.FastNavigationSettings.TodayButtonCaption = "Hoy";
                rdpFechaInicial.Calendar.FastNavigationSettings.OkButtonCaption = "Aceptar";
                rdpFechaInicial.Calendar.FastNavigationSettings.CancelButtonCaption = "Cancelar";
                rdpFechaInicial.DatePopupButton.ToolTip = "Abrir calendario";
     
                StringBuilder sbJS = new StringBuilder();
                sbJS.AppendLine("");
                sbJS.AppendLine("function UpdateTextBox_" + rdpFechaInicial.ID + "(sender, args) { ");
                sbJS.AppendLine("   var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");
                sbJS.AppendLine("   maskedInput.set_value(\"\");");
                sbJS.AppendLine("   var fecha = args.get_newDate();");
                sbJS.AppendLine("   var datePicker = $find('" + rdpFechaInicial.ClientID + "');");
                sbJS.AppendLine("   var date = datePicker.get_dateInput().parseDate(args.get_newDate());");
                sbJS.AppendLine("   var dateInput = datePicker.get_dateInput();");
                sbJS.AppendLine("   var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());");
                sbJS.AppendLine("   maskedInput.set_value(formattedDate);");
                sbJS.AppendLine("}");
                sbJS.AppendLine("");
                sbJS.AppendLine("function UpdateCalendar_" + rdpFechaInicial.ID + "() {");
                sbJS.AppendLine("   var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");
                sbJS.AppendLine("   var datePicker = $find(\'" + rdpFechaInicial.ClientID + "');");
                sbJS.AppendLine("   //Determinando si viene vacio");
                sbJS.AppendLine("   if (maskedInput.get_value()==\"\") { datePicker.set_selectedDate(null); return; }");
                sbJS.AppendLine("   //Determinando si es una fecha validad");
                if (TipoUso == TipoDeUso.Periodo)
                {
                    sbJS.AppendLine("   var dateValid = isValidDate(\"01/\" + maskedInput.get_valueWithLiterals());");
                }
                else if (TipoUso == TipoDeUso.Normal)
                {
                    sbJS.AppendLine("   var dateValid = isValidDate(maskedInput.get_valueWithLiterals());");
                }
                sbJS.AppendLine("   if (!dateValid) {");
                if (UsarValidacionJS)
                {
                    sbJS.AppendLine("       var oAlert = radalert(\"Debe de ingresar una fecha valida.\", 256, 47, \"Campo requerido\", null, \"../imagenes/error1.jpg\");");
                    sbJS.AppendLine("       oAlert.show();");
                }
                //sbJS.AppendLine("       maskedInput.set_value(\"\");");
                sbJS.AppendLine("       datePicker.set_selectedDate(null);");
                sbJS.AppendLine("       return;");
                sbJS.AppendLine("   }");
                if (TipoUso == TipoDeUso.Periodo)
                {
                    sbJS.AppendLine("   var fecha = \"01\" + maskedInput.get_value()");
                    sbJS.AppendLine("   var date = datePicker.get_dateInput().parseDate(fecha);");
                }
                else if (TipoUso == TipoDeUso.Normal)
                {
                    sbJS.AppendLine("   var date = datePicker.get_dateInput().parseDate(maskedInput.get_value());");
                }
                sbJS.AppendLine("   var dateInput = datePicker.get_dateInput();");
                sbJS.AppendLine("   if (date == null) {");
                sbJS.AppendLine("       date = datePicker.get_selectedDate();");
                sbJS.AppendLine("   }");
                sbJS.AppendLine("   var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat()); ");
                sbJS.AppendLine("   datePicker.set_selectedDate(date);");
                sbJS.AppendLine("   if (!isNaN(date) && date > datePicker.get_minDate() && date < datePicker.get_maxDate()) {");
                sbJS.AppendLine("       datePicker.set_selectedDate(date);");
                sbJS.AppendLine("   }");
                sbJS.AppendLine("   else {");
                sbJS.AppendLine("       var oldSelectedDate = datePicker.get_selectedDate();");
                sbJS.AppendLine("       if (oldSelectedDate == null) return;");
                sbJS.AppendLine("       if (oldSelectedDate.toString() == datePicker.get_minDate().toString()) {");
                sbJS.AppendLine("           maskedInput.set_value(\"\");");
                sbJS.AppendLine("       }");
                sbJS.AppendLine("       else {");
                sbJS.AppendLine("           maskedInput.set_value(DateToString(oldSelectedDate));");
                sbJS.AppendLine("          }");
                sbJS.AppendLine("   }");
                sbJS.AppendLine("}");
                sbJS.AppendLine("");
                sbJS.AppendLine("function Popup_" + rdpFechaInicial.ID + "() {");
                sbJS.AppendLine("   var datePicker = $find('" + rdpFechaInicial.ClientID + "');");
                sbJS.AppendLine("   var maskedInput = $find('" + rmtbFechaInicial.ClientID + "');");
                sbJS.AppendLine("   var textBox = datePicker.get_textBox();");
                sbJS.AppendLine("   var position = getPosition(maskedInput._textBoxElement);");
                sbJS.AppendLine("   var popupElement = datePicker.get_popupContainer();");
                sbJS.AppendLine("   datePicker.showPopup(position.x, position.y + maskedInput._textBoxElement.offsetHeight);");
                sbJS.AppendLine("}");
     
                ScriptManager.RegisterStartupScript(Page, typeof(Page), rdpFechaInicial.ID.ToString(), sbJS.ToString(), true);
                //}
            }
        }

    Code page .aspx

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <ClientEvents OnRequestStart="onRequestStart" />
            <AjaxSettings>           
                <telerik:AjaxSetting AjaxControlID="btnconsultar">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="divContenido" LoadingPanelID="ralpCasos"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>           
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="ralpCasos" runat="server"></telerik:RadAjaxLoadingPanel>
     
     
        <div class="row" id="divContenido" runat="server">
            <div class="col-xs-12">
                <div class="panel panel-info" style="margin-left: 10px; margin-right: 10px;">
                    <table class="table" border="0">                       
                        <tr>
                            <td style="width: 60px;"></td>
                            <td style="width: 100px; vertical-align: middle;">
                                <asp:Label ID="lblFechaInicial" runat="server" Font-Size="14px" Text="Desde"></asp:Label>
                            </td>
                            <td>
                                <uc1:ctrlFecha runat="server"
                                    ID="ctrlFecha"
                                    MascaraUsar="##/##/####"
                                    NombreCtrlMascara="rmtbFechIni"
                                    NombreCtrlPicker="rdpFechIni"
                                    TipoUso="Normal" UsarValidacionJS="false" />
                                <asp:Label ID="lbErrorFechaIni" runat="server"></asp:Label>
                            </td>
                            <td></td>
                            <td style="width: 100px; vertical-align: middle;">
                                <asp:Label ID="lblFechaFinal" runat="server" Font-Size="14px" Text="Hasta"></asp:Label>
                            </td>
                            <td>
                                <uc1:ctrlFecha runat="server"
                                    ID="ctrlFecha1"
                                    MascaraUsar="##/##/####"
                                    NombreCtrlMascara="rmtbFechaFinCasos"
                                    NombreCtrlPicker="rdpFechaFinCasos"
                                    TipoUso="Normal" UsarValidacionJS="false" />
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 60px;"></td>
                            <td style="width: 100px; vertical-align: middle;">
                                <asp:Label ID="Label1" runat="server" Text="Buscar por"></asp:Label>
                            </td>
                            <td colspan="2">
                                <telerik:RadTextBox runat="server" ID="txtBusqueda"
                                    Width="100%" EmptyMessage="No. Caso, Título, Solicitante, Usuario asignado o seguidor...">
                                </telerik:RadTextBox>
                            </td>
                            <td colspan="2" style="text-align: right; padding-right: 100px;">
                                <telerik:RadButton ID="btnconsultar" runat="server"  OnClick="btnconsultar_Click" Style="display: inline-block !important;" Text="Consultar">
                                    <Icon PrimaryIconUrl="../imagenes/buscar.png" />
                                </telerik:RadButton>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="5">
                                <asp:Label runat="server" ID="lbMostrarErrores" ForeColor="Red"></asp:Label>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    Thanks for your help.

  2. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 06 May Link to this post

    Hi Melvin,

    Please try replacing the RadScriptBlock with RadCodeBlock. Also, temporarily disable any AJAX on the page if present (RadAjaxManager, RadAjaxPanel, UpdatePanel, etc.) and enable your script debugger (FireBug or F12) to see whether there are any script or server errors interfering.

    Regards,
    Eyup
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Melvin
    Melvin avatar
    14 posts
    Member since:
    Apr 2015

    Posted 27 May Link to this post

    Thanks, I found the solution. I put the CSS code out of RadScriptBlock and worked well .

     

    <style>
        .rcInputCell
        {
            padding: 0 !important;
            width: 0 !important;
        }
     
        .HiddenTextBox
        {
            width: 1px !important;
            border: 0 !important;
            margin: 0 !important;
            background: none transparent !important;
            display: none;
        }
    </style>
    <telerik:RadScriptBlock  runat="server" ID="rsbCtrlFechas">
        <script type="text/javascript">
            function isValidDate(str) {
                var parts = str.split('/');
                if (parts.length < 3)
                    return false;
                else {
                    var day = parseInt(parts[0]);
                    var month = parseInt(parts[1]);
                    var year = parseInt(parts[2]);
                    if (isNaN(day) || isNaN(month) || isNaN(year)) {
                        return false;
                    }
                    if (day < 1 || year < 1)
                        return false;
                    if (month > 12 || month < 1)
                        return false;
                    if ((month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) && day > 31)
                        return false;
                    if ((month == 4 || month == 6 || month == 9 || month == 11) && day > 30)
                        return false;
                    if (month == 2) {
                        if (((year % 4) == 0 && (year % 100) != 0) || ((year % 400) == 0 && (year % 100) == 0)) {
                            if (day > 29)
                                return false;
                        } else {
                            if (day > 28)
                                return false;
                        }
                    }
                    return true;
                }
            }
     
            function getPosition(element) {
                var xPosition = 0;
                var yPosition = 0;
                while (element) {
                    xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                    yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                    element = element.offsetParent;
                }
                return { x: xPosition, y: yPosition };
            }
        </script>
    </telerik:RadScriptBlock>
Back to Top