데이터를 모달로 표시하려면 웹 그리드 열을 클릭 한 후 팝업하십시오.

Question

예외 데이터의 내 데이터가 매우 커서 데이터 대신 작업 링크를 표시하기로 결정하고 사용자가 해당 링크를 클릭하면 모달 팝업이 표시됩니다. Data.I는 Action Link의 클릭에서 Model Pop을 보여줄 수 있지만 내 문제는 Modal Pop Up에서 해당 레코드에 해당하는 데이터를 표시 할 수 없다는 것입니다. 다음은

@model IList<ClaimBuildMVC.Models.ApplicationLog> 
@{   
    Layout = "~/Views/Shared/_SuperAdminLayout.cshtml"; 
    WebGrid grid = new WebGrid(Model, canSort: false, canPage: false, columnNames: new[] { "Logger", "User", "Date", "Message", "Exception", "ErrorID" }); 
} 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ErrorLog').DataTable({ 
      "bSort": false,     
      "oLanguage": { 
       "sLengthMenu": "_MENU_ records per page", 
       "sSearch": "" 
      } 
     }); 
     $('.dataTables_filter input').attr("placeholder", "Search by Error details..."); 
     $(".ActionEdit").click(function() { 
      $(".ActionEdit").removeAttr('href'); 
      $(".ExceptionModal").modal(); 
     }); 
    }); 
</script> 

모달 팝업

를 호출 내 자바 스크립트 코드와 아래 내가 잘못하고있는 중이 야 또는 가능한 해결책이 될해야하는지 위치를 알려

<div class="Content-inner-pages"> 
    <div class="TopHeading TopHeading2"> 
     <h2>Error Log</h2> 
    </div> 
    <div class="box"> 
     <div class="box-content"> 
      <div class="CustomerUsers"> 
       <div class="box"> 
        <div class="box-content Custom-DataTable"> 
         @grid.GetHtml(
         htmlAttributes: new { id = "ErrorLog" }, 
         fillEmptyRows: false, 
         alternatingRowStyle: "alternate-row", 
         tableStyle: "table table-hover dt-responsive CustomDatable", 
         headerStyle: "grid-header", 
         footerStyle: "grid-footer", 
         mode: WebGridPagerModes.All, columns: new[] { 
         grid.Column("Logger",header: "Page", canSort:false), 
         grid.Column("User",header:"UserId",canSort:false), 
         grid.Column("Date",header: "CreatedDate",canSort:false), 
         grid.Column("Message",header: "ErrorMessage",canSort:false), 
         grid.Column(header: "Exception", format:(item) => 
          new HtmlString(Html.ActionLink("Edit", "#", new { id =item.ErrorID }, new { @class = "ActionEdit"}).ToString() 
         )) 
         }) 
        </div> 

        <div class="modal fade ExceptionModal" role="dialog"> 
         <div class="modal-dialog modal-lg"> 
          <div class="modal-content"> 
           //Here i want to Load Exception Column Data that will Display to End user 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

데이터

를 표시하는 웹 그리드입니다.

Answer 1

는이 첫번째 상점이 단계를 수행해야 다음 부트 스트랩 이벤트에 현재 TD 데이터와 모달를 작성할 필요가

$(".ActionEdit").click(function() { 
     $(".ActionEdit").removeAttr('href'); 
     //storing your td in session 
     session["currentTdData"] = $(this); 
     $(".ExceptionModal").modal(); 
    }); 

과 같은 세션 또는 글로벌 변수에 현재 클릭 TD 모달 팝업을 로딩 한 후

$('.ExceptionModal').on('shown.bs.modal', function() { 
     // here you can session["currentTdData"] data 
})