Render częściowy widok onclick w ASP.NET MVC 3 Projekt

Question

W moim projekcie mvc mam prostą listę elementów z operacji CRUD tak:

<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> 

Zastanawiam się czy jest możliwe do renderowania widoku szczegółów jako częściowe pod stołem, gdy klikam na szczegóły. Mam na myśli, że gdy klikam szczegóły, aby pokazać mi widok szczegółów, chcę go pod moim stołem w jakiejś div lub akapicie.

Proszę o pomoc.

Answer 1

Możesz użyć AJAX. Ale najpierw poprawić swój kod pozbywając się tych pętli i zastąpienie ich szablonów wyświetlania:

@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> 

a następnie zdefiniować szablon wyświetlania (~/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> 

Teraz wszystko, co pozostało jest AJAXify Opisuje odwołuje się w oddzielnym pliku javascript:

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

który zakłada oczywiście, że masz następujące działania:

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

Answer 2

Tak. To jest możliwe. Najlepiej powinieneś renderować szczegóły w ajax. Ponieważ nie trzeba renderować wszystkich szczegółów dla każdego wiersza. I użytkownik będzie musiał kliknąć szczegóły.

Answer 3

nie może być odpowiedź szukasz ...

można zrobić wywołanie ajax onClick z details link i dołączyć odpowiedzi na pewne div,

np

$(".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'); 
     } 
     }); 
}); 

strona kontrolera

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

w znacznikach zdefiniować div który odbędzie odpowiedź wywołania ajax

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