Zum Anzeigen von Daten im modalen Popup nach dem Klicken auf Web Grid Spalte

Question

Meine Daten in Exception Spalte ist sehr groß und ich entschied mich, den Aktionslink anstelle von Daten anzuzeigen und wenn der Benutzer auf diesen Link klickt, zeigt modales Popup das an Data.Ich kann Model Pop auf dem Klick von Action Link zeigen, aber mein Problem ist, dass ich nicht in der Lage bin, die entsprechenden Daten in Modal Pop Up anzuzeigen. Unten ist mein Javascript-Code für

Modal PopUp Aufruf

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

Und unten ist Web Grid Daten anzuzeigen

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

Lassen Sie mich wissen, wo ich falsch mache oder was die mögliche Lösung sein sollte.

Answer 1

Sie haben zwei Schritte für diese ersten Store Ihrer aktuelle geklickt td in einer Sitzung oder globale Variable wie

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

zu tun, und dann haben Sie Ihre modal mit Ihren aktuellen td Daten über das Bootstrap-Ereignis füllen von nach dem Laden Modal Popup

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