Creando una imagen de alternar AJAX en ASP.NET MVC

Así que quería crear un botón de alternar para una tabla, donde puedo hacer una llamada asincrónica para actualizar un registro de la base de datos (activar/desactivar).Creando una imagen de alternar AJAX en ASP.NET MVC

img http://i41.tinypic.com/os4vua.jpg

Después de un poco de ensayo y error, he conseguido que funcione - pero se siente como que debe haber una forma más elegante.

No me gusta repetir mi etiqueta de imagen en mi controlador, obviamente ... ¿Cómo puedo evitar eso de una manera elegante?
¿Hay una manera mejor en general para abordar esto que lo que he hecho?

Aquí está mi código en el controlador:

public ActionResult ToggleEnabled(int id) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      var p = this.PageRepository.GetPage(id); 
      p.Enabled = p.Enabled != true; 
      this.PageRepository.Edit(p); 
      return p.Enabled ? Content("<img src='/Content/icons/tick.png' border=0 />") : Content("<img src='/Content/icons/tick_grey.png' border=0 />"); 
     } 
     return Content("Error"); 
    }

Y la vista ...:

<% var img = Model.Enabled ? "tick.png" : "tick_grey.png"; %> 
<% foreach (var item in Model) 
     { %> 
... 
<td align="center"> 
    <%=Ajax.ActionLink("[replacethis]", 
     "ToggleEnabled", 
       new { id = Model.ID }, 
       new AjaxOptions { UpdateTargetId = "toggleimage" + Model.ID }).Replace("[replacethis]", 
       string.Format("<div id='toggleimage{0}'><img src='/Content/icons/{1}' border='0' alt='toggle'/></div>", 
       Model.ID, Model.Enabled ? "tick.png" : "tick_grey.png"))%> 
</td> 
... 
<% } %>

El truco/hackear con el Ajax.Actionlink usando una imagen fue encontrado here .

Fuente

2009-07-03 Kjensen

De hecho, me gusta la forma en que lo hizo. No veo ninguna manera obvia de hacerlo más simple. Como señaló, su lógica de imagen está duplicada en el controlador y la vista, pero necesita la lógica en la vista para la carga de la página, y necesita la lógica en el controlador para la llamada Ajax. –

Intentando reescribir esto en la afeitadora Mvc 3, aparece un error con "reemplazar". Dice que System.Web.MVC.MVChtmlString no contiene una definición ... – Chaka

¿Alguna ayuda sobre cómo reescribir en la afeitadora? – Chaka

¿Qué hay de la casilla de verificación de representación basada en si el modelo está habilitado o no?

En jQuery, puede reemplazar esas casillas de verificación con sus imágenes. Algo así como

Su código document.ready puede parecer,

$(document).ready(
function() 
{ 
    $('.enabledCheckbox').each(
     function() 
     { 
      var image = $(this).checked ? 'tick.png' ? 'tick_grey.png'; 
      $(this).parent.click(
       function() 
       { 
        if($(this).is('image')) 
         toggleEnabledStatus(); //write code in toggleEnabledStatus to toggle the state of the model on server side. 
       }  
       ); 
      $(this).parent.html('<img src=' + image + '/>'); 
     } 
    ); 
} 
);

Alternativamente, se puede utilizar como complemento jquery-checkbox para darles cualquier estilo de fantasía puede pensar.

Fuente

2009-07-04 04:41:49 SolutionYogi

Yo diría que esta es la mejor manera de hacerlo, de esa manera usted deja la página html solo con html y no la atiborra con todo ese código adicional – sirrocco

Si elegancia es lo que desea, utilizaría una solicitud de servicio web de jQuery para realizar una solicitud de AJAX a la página ASPX subyacente. Es bastante elegante, porque todo lo que necesita en su página ASPX es un [WebMethod] estático para realizar la acción real, y una llamada $ .ajax() desde jQuery.

Fuente

2009-07-04 01:55:39

Creando una imagen de alternar AJAX en ASP.NET MVC

Respuesta

Cuestiones relacionadas