This is a migrated thread and some comments may be shown as answers.

AjaxManager with User Control

2 Answers 424 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Melvin asked on 03 May 2016, 04:41 PM

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

Thanks for your help.

2 Answers, 1 is accepted

answered on 27 May 2016, 08:51 PM

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>