Render vista parcial onclick en asp.net mvc 3 proyecto

Question

En mi proyecto MVC tengo una simple lista de artículos con las operaciones CRUD como esto:

<tbody> 
@{ 
    foreach (var item in Model) 
    {    
     <tr> 

      <td>@item.Title</td> 
      <td>@item.Body</td> 
      <td>@item.Price</td> 
      <td><span class="EditLink ButtonLink" noteid="@item.Id">Edit</span>&nbsp;|&nbsp;<span>@Html.ActionLink("Delete", "Delete", new { id = @item.Id})</span> 
          &nbsp;|&nbsp; @Html.ActionLink("Detalji", "Details", new { id = @item.Id}) 
      </td> 
     </tr> 
    } 
    } 

</tbody> 

Me pregunto ¿es posible hacer que la vista de detalles como parciales debajo de la mesa cuando hago clic en detalles. Quiero decir cuando hago clic en detalles para mostrarme la vista de detalles, la quiero debajo de mi mesa en algún div o párrafo.

Por favor ayuda.

Answer 1

Podría usar AJAX. Pero primero vamos a mejorar su código mediante la eliminación de los bucles y reemplazándolos con las plantillas de visualización:

@model IEnumerable<SomeViewModel> 
<table> 
    <thead> 
     <tr> 
      <th>Title</th> 
      <th>Body</th> 
      <th>Price</th> 
      <th>actions ...</th> 
     </tr> 
    </thead> 
    <tbody> 
     @Html.DisplayForModel() 
    </tbody> 
</table> 

<div id="details"></div> 

y luego definir una plantilla de visualización (~/Views/Shared/DisplayTemplates/SomeViewModel.cshtml):

@model SomeViewModel 
<tr> 
    <td>@Html.DisplayFor(x => x.Title)</td> 
    <td>@Html.DisplayFor(x => x.Body)</td> 
    <td>@Html.DisplayFor(x => x.Price)</td> 
    <td> 
     <!-- no idea what the purpose of this *noteid* attribute on the span is 
      but this is invalid HTML. I would recommend you using the 
      HTML5 data-* attributes if you wanted to associate some 
      metadata with your DOM elements 
     --> 
     <span class="EditLink ButtonLink" noteid="@Model.Id"> 
      Edit 
     </span> 
     &nbsp;|&nbsp; 
     <span> 
      @Html.ActionLink("Delete", "Delete", new { id = Model.Id }) 
     </span> 
     &nbsp;|&nbsp; 
     @Html.ActionLink(
      "Detalji",      // linkText 
      "Details",      // actionName 
      null,       // controllerName 
      new { id = Model.Id },   // routeValues 
      new { @class = "detailsLink" } // htmlAttributes 
     ) 
    </td> 
</tr> 

Ahora todo lo que queda es AJAXify este enlace detalles en un archivo JavaScript independiente:

$(function() { 
    $('.detailsLink').click(function() { 
     $('#details').load(this.href); 
     return false; 
    }); 
}); 

que asume, por supuesto, que tiene la siguiente acción:

public ActionResult Details(int id) 
{ 
    SomeDetailViewModel model = ... fetch the details using the id 
    return PartialView(model); 
} 

Answer 2

Sí. Es posible. Preferiblemente, debes renderizar los detalles en ajax. Porque no necesitará renderizar todos los detalles para cada fila. Y el usuario deberá hacer clic en los detalles.

Answer 3

puede no ser la respuesta que está buscando ...

que puede hacer una llamada ajax onClick de details enlace y añadir la respuesta a alguna div,

por ejemplo

$(".details").click(function(){ 
var id = $(this).attr("id"); 

$.ajax(
    { 
     type: 'POST',   
     data: "{'id':" + "'" + id + "'}", 
     dataType: 'html', 
     url: 'url/to/controller/', 
     success: function (result) { 
     alert('Success'); 
     $("#ajaxResponse").html(result); 
     }, 

     error: function (error) { 
      alert('Fail'); 
     } 
     }); 
}); 

lado del controlador

[HttpPost] 
public ActionResult Details(string id) 
{ 
    // do some processing 
    return PartialView("YourPartialView"); 
} 

en su margen de beneficio definen un div que llevará a cabo la respuesta de llamada AJAX

<div id="ajaxResponse"></div>