miércoles, 10 de diciembre de 2014

MVC como asegurarse de que los cuadros de dialogo de JQuery respeten el alto asignado en la propoedad Height

Tenía el siguiente problema:

 

Cuando levantaba un cuadro de dialogo, para crear un nuevo concepto de la funcionalidad que estaba administrando, la primera vez, el cuadro de dialogo salía del tamaño apropiado, pero las siguientes veces, el alto iba disminuyendo hasta convertirse en un problema, como se evidencia en las imágenes:

Primera vez:

1

Segunda vez:

2

 

Lo cual generaba un problema, a la hora de mostrar los mensajes de validación:

3

Esto se arregló asegurandose de colocar los campos de captura de información , contenidos en la etiqueta

<fieldset>

<fieldset>
    <div class="form-group">
        <label for="caso" class="col-sm-3 control-label" style="margin-left:10px;margin-top:10px;"> @Views.Labels.EtiquetaDenominacionDelito</label>
        <div class="col-sm-8" style="margin-top:10px;">
            @Html.TextBoxFor(model => model.Nombre, new { id = "txtDelito", @class = "form-control" })
            @Html.ValidationMessageFor(model => model.Nombre)
        </div>

    </div>

</fieldset>

 

martes, 9 de diciembre de 2014

MVC asegurarse de que la validación de campos funcione en formas que cargan en cuadros de dialogo de JQuery

Cuando se ejecutan las pantalla desde fuentes, usando Visual Studio, para que salgan los mensajes de validación sobre los campos, es suficiente con colocar una expresión del tipo:

$('#frmDelito').valid()

Para activar el plug in de validación y que los mensajes se muestren.

Pero esto no funciona, cuando el sitio se despliega en un host.

Para que funcione la validación en dicho caso, es decesario, hacer el llamado al método valid de la forma, de esta manera:

var $form = $('#frmDelito');
$.validator.unobtrusive.parse($form);
if ($form.valid()) {

 

Technorati Tags: ,,

MVC formas de hacer un llamado para la ejecución de una operación asíncrona

Este post es para indicar la forma de hacer llamados a operaciones asincronas en MVC por medio de JavaScript o JQUERY y de esta forma darle dinamismo a tus aplicaciones.

 

1. Funciona solo en navegadores Microsoft de nueva generación y garantiza el funcionamiento entre sitios o Cross Site.

                                         var ua = window.navigator.userAgent;
                                         var msie = ua.indexOf("MSIE ");
                                         if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)){
                                             // Use Microsoft XDR
                                             var params = "";
                                             var xdr = new XMLHttpRequest();
                                             var data = "?nombre=" + nombreDespacho + "&tipo=" + tipoDespacho + "&ubicacion=" + ubicacionDespacho  + "&direccion=" + direccionDespacho + "&telefono=" + telefonoDespacho;
                                             var url;
                                             var pathArray = window.location.pathname.split('/');
                                             if (pathArray[1].toLowerCase() == "procesos") {
                                                 url = "/procesos/AddDespachoUsingAttributes" + data;
                                             } else {
                                                 url = "/" + pathArray[1] + "/procesos/AddDespachoUsingAttributes" + data;
                                             }
                                             xdr.open("GET", url, true);
                                             xdr.setRequestHeader("Access-Control-Allow-Origin", "*");

                                             xdr.onload = function () {
                                                 var JSON = $.parseJSON(xdr.responseText);
                                                 CrearDespacho(JSON);
                                             };

                                             xdr.onreadystatechange = function () {
                                                 if (xdr.readyState == 4 && xdr.status == 200) {
                                                     //obj.innerHTML = XMLHttpRequestObject.responseText;
                                                 }
                                             }
                                             xdr.send(null);
                                         }

Es muy importante, la determinación del URL, si el sitio se ejecuta desde fuentes, en el URL no está el nombre del sitio, mientras que se si se ejecuta desde un despliegue, si hay nombre de sitio.

2.Usando la función de JQuery $.Ajax, que tiene los beneficios de usarla, pudiendo hacer uso de más parámetros como la configuración del manejo de caché, si es requerido:

var url;
var pathArray = window.location.pathname.split('/');
if (pathArray[1].toLowerCase() == "procesos") {
    url = "/procesos/AddDespachoUsingAttributes";
} else {
    url = "/" + pathArray[1] + "/procesos/AddDespachoUsingAttributes";
}
$.ajax({
    url: url,
    data: { nombre: nombreDespacho, tipo: tipoDespacho, ubicacion: ubicacionDespacho, direccion: direccionDespacho, telefono: telefonoDespacho },
    type: "GET",
    dataType: "json",
    success: function (despachosData) {
        CrearDespacho(despachosData);
    },
    cache: false
});

 

3. Usando la función de  JQuery $.getJSON:

var url;
var pathArray = window.location.pathname.split('/');
if (pathArray[1].toLowerCase() == "procesos") {
    url = "/procesos/AddDespachoUsingAttributes";
} else {
    url = "/" + pathArray[1] + "/procesos/AddDespachoUsingAttributes";
}
$.getJSON(url, { nombre: nombreDespacho, tipo: tipoDespacho, ubicacion: ubicacionDespacho, direccion: direccionDespacho, telefono: telefonoDespacho },
              function (despachosData) {
                  var select = $("#ddlDespacho");
                  select.children('option:not(:first)').remove();
                  $.each(despachosData, function (index, itemData) {
                      var isItemSelected = seleccionarOpcionDespacho(itemData.Value);
                      select.append($('<option/>', {
                          value: itemData.Value,
                          text: itemData.Text,
                          selected: isItemSelected
                      }));

                  });

              });