javascript - webapplayers - JQuery UI datepicker en Asp.Net MVC

smartadmin template

Question

Intenté utilizar algunos de los widgets en JQuery UI en un sitio Asp.Net MVC sin suerte.

Por ejemplo, el datepicker básico de jQuery UI - demos funcionales .

Site.Master un proyecto MVC simple y agregué las referencias de script en Site.Master esta manera:

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-personalized-1.5.3.min.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.datepicker.css" rel="stylesheet" type="text/css" />"

En el archivo Index.aspx todo el contenido predeterminado y agregué lo siguiente:

<script type="text/javascript">
    $("#basics").datepicker();     
</script>  
<input type="text" size="10" value="click here" id="basics"/> 

El núcleo jQuery funciona bien. ¿Alguna pista?

Answer 1

Asegúrese de que se llame a su inicializador después de cargar el DOM:

$(document).ready(function() {
    $("#basics").datepicker();
});

Evento jQuery listo :

Al usar este método, su función vinculada se llamará en el instante en que el DOM esté listo para ser leído y manipulado, que es cuando se debe ejecutar el 99.99% de todo el código de JavaScript.

Answer 2

Parece que está ejecutando el JavaScript en línea a medida que se carga la página. En este caso, el selector #basics no podrá ubicar la entrada con id="basics" ya que aún no se ha analizado ni procesado en el cuerpo del documento.

Su solución puede ser tan simple como mover el elemento script en su código a una posición posterior al elemento de input .

Mejor aún, suscribirse a un documento preparado o documentar el evento cargado y ejecutar el código jQuery en el controlador de ese evento.

$(document).ready(function() {
    $("#basics").datepicker();
});

Hay una serie de ventajas en eso. Puede estar seguro de que todo el DOM está listo para usar, y no hay dependencia en el orden del código fuente, lo que significa que podría mover el JavaScript a un archivo externo en el futuro para aprovechar varios mecanismos de caché en el lado del cliente. .

Answer 3

Tengo un resumen de esto con MVC 3 aquí: http://blogs.msdn.com/b/stuartleeks/archive/2011/01/25/asp-net-mvc-3-integrating-with-the -jquery-ui-date-picker-and-adding-a-jquery-validate-date-range-validator.aspx

Answer 4

¿En qué parte de la página está cargando scripts y dónde está llamando a la inicialización del datepicker?

Aquí hay una muestra del uso de los selectores de documento abreviado de jQuery y de los selectores css para inicializar los punteros de fecha más fácilmente.

Aquí está el código de la afeitadora para un cuadro de entrada de muestra (observe la clase css "datefield")

<div class="form-group">
    @Html.LabelFor(m => m.DateOfBirth, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(m => m.DateOfBirth, new { @class = "form-control datefield" })
    </div>
</div>

Aquí está el javascript necesario para inicializar cualquier selector de fecha por css

$(function () {
    $(".datefield").datepicker();
});

He preparado un tutorial que detalla los detalles y una solución de muestra ASP.NET MVC5 en github

http://prestoasp.net/using-the-jquery-datepicker-with-asp-net-mvc/ https://github.com/fredo007/i6technology/tree/master/InsuranceSales