Erstellen Sie ein Popup mit Teilansicht Daten asp.net mvc5

Question

Ich habe ein Panel mit einer Liste von Jobs mit ihren IDs und Titeln. Es ist nur eine einfache Ansicht und ein einfacher Controller, um damit zu gehen.

public ActionResult Index() 
    { 
     ViewBag.menuItem = "DashBoard"; 
     return View(db.jobs.ToList()); 

    } 

Elemente in einer Liste:

<li class="list-group-item"> @item.ID @item.Title</li> 

ich Details Controller erstellt haben, eine Teilansicht des Jobs anzuzeigen:

[HttpGet] 
    public ActionResult Details (int jobID) 
    { 

     var details = db.details.Find(jobID); 
     return PartialView(details); 
    } 

und nur eine sandard Ansicht mit ihm zu gehen . Gerüste verwenden.

Wie kann ich einen Aktionslink in diese Liste einfügen, der ein Popup-Fenster anzeigt, wenn auf Jobdetails geklickt wird, die mit seiner ID übereinstimmen.

Answer 1

Per Pop-up-Box meinst du modal? Wenn ja, dann:

Ändern Sie diesen Teil Ihrer Liste

<li class="list-group-item"><a data-id="@item.ID" href="#">@item.Title</a></li> 

Ich werde Sie mit jQuery und Bootstrap zu übernehmen? Wenn nicht, werde ich Links unten zur Verfügung stellen und sie auschecken.

$('.list-group-item a').click(function(){ 
    //gets the id for the selected list item 
    var itemId = $(this).data("id"); 

    //performs an ajax call to the controller to get the details based on the id selected 
    $.ajax({ 
    url : 'your controller url', 
    type : 'POST', 
    data : { 
     'jobID' : itemId 
    }, 
    dataType:'json', 
    success : function(data) {    
     //append the results to your modal's body. 
     //$("modal selector").modal('show'); 
    }, 
    error : function(error) 
    { 
     //do something with the error 
    } 
    }); 
}); 

Links zu Bootstrap Modals und jQuery