부트 스트랩 버튼이있는 목록에서 항목 ID를 일치시켜야합니다.

Question

MVC 모델을 통해 순환하면서 레코드 목록을 가지고 있습니다 (아래 코드의 "each"루프 참조).

ActionLink가 있고 다른 페이지에 연결하는 대신 은을 클릭 한 레코드의 ID에 부트 스트랩 구성 요소를 연결하고 모달 폼을 표시 할 수 있기를 원합니다.

모달 양식 을 가져와 연결하는 방법을 알고 있습니다. 목록에서 필요한 모든 구성 요소에 ID 값을 연결하는 것을 제외하고는.

나는 다음과 같은 약 뭔가을 생각하고 있어요,하지만 난 사용하는 정확한 구성 요소의 도움이 필요하고 어떻게 클릭 된 레코드의 ID 값을 연결하는 방법. & htmlattributes 그냥 추측했다 routevalues와

ActionLink ...

어떤 도움을

@model IEnumerable<YeagerTechDB.Models.Category> 

@{ 
    ViewBag.Title = "Index"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Index</h2> 

<p> 
    @Html.ActionLink("Create New", "Create") 
</p> 
<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.CategoryDescription) 
     </th> 
     <th></th> 
    </tr> 

@foreach (var item in Model) { 
    <tr> 
     <td> 
      @Html.DisplayFor(modelItem => item.CategoryDescription) 
     </td> 
     <td> 
      @*insert a specific bootstrap component instead of actionlinks???*@ 
      @*when component clicked, assoicate record id in list, bring up modal form and execute associated JS*@ 
      @*if using just a button below, how do i associate the id of the item that was clicked?*@ 
      <button type="button" class="btn btn-default btn-lg"> 
       <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit 
      </button> 
      @Html.ActionLink("<span class='glyphicon glyphicon-edit'></span>", "Edit", "Edit", routeValues: new { id = item.CategoryID }, htmlAttributes: new { data_modal = "", @class = "btn btn-default" }) 
      @*@Html.ActionLink("Edit", "Edit", new { id = item.CategoryID })*@ 
     </td> 
    </tr> 
} 

    @*bootstrap modal screen inserted here*@ 
    @*have hidden id field in modal form*@ 

</table> 

Answer 1

간단한 방법은 data- 속성을 사용하고 감사 많은 ... 것이다. 각 행의 클라이언트 측 UI에 사용되는 여러 개의 버튼이 있으므로 <tr>을 사용하여 관련 데이터를 저장하거나 각 버튼에 저장할 수 있습니다. 사용 당신이 행 데이터에 액세스 할 수 있습니다 버튼 클릭 핸들러에서 다음

<tr data-id="<% item.id %>"> 

:

$('.buttonClass').click(function(){ 
    var rowId = $(this).closest('tr').data('id'); 
    /* do stuff with modal */ 
}); 

구문이 정확하지 않을 수 있지만 같이 보일 것이다, 그래서

나는 ASP를 많이에서 작동하지 않습니다

참조 : data() API docs