Визуализировать частичное представление по клику в проекте asp.net mvc 3

Question

В моем проекте MVC у меня есть простой список элементов с грубыми операциями, как это:

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

Мне интересно, можно ли сделать детальный вид как частичный под таблицей, когда я нажимаю на детали. Я имею в виду, когда я щелкаю детали, чтобы показать мне представление подробностей, я хочу, чтобы это было под моей таблицей в каком-то элементе div или абзаце.

Пожалуйста, помогите.

Answer 1

Вы можете использовать AJAX.Но сначала давайте улучшим ваш код, избавившись от этих циклов и заменив их шаблонами отображения:

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

, а затем определим шаблон отображения (~/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>

Теперьвсе, что осталось, это AJAX, уточнить эту ссылку в отдельном файле javascript:

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

Что, конечно, предполагает, что у вас есть следующее действие:

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

Answer 2

не может быть ответом, который вы ищете ...

вы можете сделать ajax-вызов onClick из details ссылки и добавить ответ к некоторому div,

дляпример

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

сторона контроллера

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

в вашей разметке определите div, который будет содержать ответ на вызов ajax

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

Answer 3

Да. Возможно. Желательно, чтобы вы отображали детали в ajax. Потому что вам не нужно будет отображать все детали для каждой строки. И пользователю нужно будет нажать на детали.