Javascript no se llama en @Html.ActionLink

Tengo el siguiente archivo javascript test.js:

$("#addItem").click(function () {
    alert("yup");
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#bandRows").append(html); }
    });
    return false;
});

Que quiero usar para inyectar algo de HTML en el div "bandRows" en una página. Estoy usando Razor en una aplicación MVC 3 así:

La vista de índice, que contiene el enlace que, cuando se hace clic, inyecta una vista parcial HTML:

@model IEnumerable<TariffBand>

        <script type="text/javascript" src="=@Url.Content("~/Scripts/jquery-1.3.2.js")"></script>
        <script type="text/javascript" src="=@Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
        <script type="text/javascript" src="=@Url.Content("~/Scripts/test.js")"></script>

    <h2>Index</h2>

    @using (Html.BeginForm())
    {
    <div id="bandRows">
        @foreach (var band in Model)
        {
            Html.RenderPartial("BandEditorRow", band);
        }
    </div>

    @Html.ActionLink("Add band...", "Add", null, new { id = "addItem" })

    <input type="submit" value = "Done" />

En este momento, cuando hago clic en el enlace, no se llama a javascript, no se muestra el cuadro de alerta, y el enlace simplemente navega a la vista parcial "Agregar" en lugar de inyectarlo en el div 'bandRows'.

puede alguien decirme por que? No he usado javascript antes, así que obviamente hice algo tonto, pero no puedo resolverlo por mi vida.

EDITAR - He modificado el archivo .js para que el controlador sea para hacer clic, no para hacer clic. También he intentado modificar el ayudante html para:

@Html.ActionLink("add band...", "Add", null, new { onclick = "addItem" } pero todavía no hay dados.

Gracias David

preguntado el 28 de julio de 12 a las 14:07

1 Respuestas

Tiene

$("#addItem").onclick(function () 

No hay nada como $.onclick.

Esto será

$("#addItem").click(function () 

Editar

$().ajax({ debiera ser $.ajax({

y todo el código debe estar dentro document.ready() como

$(document).ready(function(){
   $("#addItem").click(function (){
   .
   .
   .
});

Editar - 2

Como ha admitido que es muy nuevo en el mundo de JavaScript, le doy el código detallado:

<script type="text/javascript" src="=@Url.Content("~/Scripts/MicrosoftAjax.js")"></script>
@* <script type="text/javascript" src="=@Url.Content("~/Scripts/test.js")"></script> *@

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function(){
        $("#addItem").click(function (){
            alert("yup");
            $.ajax({
                url: this.href,
                cache: false,
                success: function (html) { 
                    $("#bandRows").append(html); 
                }
            });
            return false;
        };  
    });
</script>

document ready es algo muy preliminar que debe aprender al comenzar jQuery. Esta es la documentación API de ready evento. Y aquí es un tutorial para entender document ready.

Respondido 28 Jul 12, 17:07

Gracias Mohayemin, pero cuando cambio a .click, el script aún no se llama. - dav83

¿Ni siquiera la alerta? ¿Ha agregado el script en document.ready()? - Mohayemin

¡Ni siquiera la alerta! La secuencia de comandos se agrega según el archivo .cshtml anterior, por lo que no estoy seguro de si eso significa sí o no: nunca antes había usado javascript (como probablemente pueda ver). ¿Cómo agregaría un script en document.ready()? - dav83

He editado mi respuesta. Por favor, compruebalo y hazmelo saber. No estaré disponible durante las próximas 2 horas. Espero haber agregado todo lo que necesitas. - Mohayemin

Oh, ya veo, me he perdido algo. Su javascript está en un archivo separado. Bueno, yo haría este javascript en la vista en su lugar (en un <script> etiqueta) porque el código no parece ser reutilizable. Es estrictamente válido solo para esta página en particular, ¿verdad? - Mohayemin

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.