在asp.net MVC的onclick渲染局部圖3項目

在我的MVC項目我有一個項目與CRUD操作簡單羅列如下：在asp.net MVC的onclick渲染局部圖3項目

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

我想知道是否有可能呈現的細節視圖部分在桌子下面，當我點擊細節時。我的意思是當我clik細節，以顯示我的詳細信息視圖，我想它在我的表格在某些div或段落。

請幫忙。

來源

2011-07-08 GoranB

您可以使用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>

現在所有剩下的就是AJAXify這個細節在一個單獨的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); 
}

來源

2011-07-08 12:24:20

我不確定你對我有什麼瞭解，我想在你指定的div細節中顯示每個項目的詳細信息，我沒有在這裏看到你的詳細信息視圖，在我的表中我顯示了標題，正文和價格，但在我的細節中有很多更多信息。 – GoranB

對不起，我沒有看到細節控制器準時:) – GoranB

@GoranB，不，我不明白你。我以爲你想要一個主/細節場景。因此，當用戶點擊每行的詳細信息鏈接時，表格外部的某個div中顯示給定行的詳細信息。那不是你要求的嗎？ –

是的。這是可能的。最好，你應該在ajax中呈現細節。因爲你不需要渲染每一行的所有細節。用戶需要點擊細節。

來源

2011-07-08 12:15:25 ysrb

您可以發佈一個例子痘痘一週我是在阿賈克斯。 – GoranB

可能不是你要找的...

的答案，你可以做一個Ajax調用details鏈接onClick並追加一些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>

來源

2011-07-08 12:25:32 Rafay

在asp.net MVC的onclick渲染局部圖3項目

回答

相關問題