einen Blick in modal asp.net MVC Javascript hinzufügen

Ich habe ein modaler geschaffen, wo ich einige Details meiner Liste Artikel Anzeigen werden:einen Blick in modal asp.net MVC Javascript hinzufügen

<li class="list-group-item"> <a data-toggle="modal" data-id="@item.JobID" data-target="#myModal">@item.JobID @item.JobTitle </a> </li>

ich meine modal mit folgendem JS aktualisieren:

modalBody.load(@Html.Action("Details", new { id = 29})): 


$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (event) { 
     var list = $(event.relatedTarget); 
     var clickedButtonId = list.data('id'); 
     var jobdetails = list.data('status'); 
     var details = list.data('src'); 
     //select modal body 
     var modalBody = $('#myModal .modal-body'); 
     //load the content of your partial view into the modal body 
     modalBody.load(details); 
    }).modal(); 
})

UPDATE: Diese noch nicht

ich in diesem modalen würde auch einen Blick passieren mag funktioniert, die die gleiche ID erhalten. Ich habe einen Weg gefunden, es nur mit einem iframe zu übergeben, aber ich weiß, dass das nicht mehr empfohlen wird.

Irgendwelche Ideen?

Quelle

2016-07-01 Budyn

Warum ein iframe? Warum nicht zum Beispiel ein DIV? –

Ich sage, dass ich nicht einen iframe verwenden möchte, aber das ist das einzige, was ich in der Vergangenheit verwendet habe. Aber ich bin nicht so gut mit Jquery und ich bin mir nicht sicher, wie ich die Details in diesem Modal bevölkern soll. – Budyn

Wenn Sie angular verwenden, können Sie einfach das 'templateUrl' einer' directive' auf Ihre 'url' zeigen, die Sie anzeigen möchten. Nicht wirklich zu Hause mit ASP.NET MVC obwohl. – Arg0n

Es muss nicht so kompliziert sein:

ein Click-Ereignis zu einem Anker im Inneren des durch den Zugriff auf data-id des angeklickten Artikel der Job-ID
ein Make Retrieve <li>
Schalte ajax-Aufruf $.getJSON mit dem Job zu bekommen Details
die Details in einem modalen Job Anzeige von $('#myModal').modal('show');

Aufruf

Controller:

public class Job { public int JobID {get; einstellen; } öffentliche Zeichenfolge JobTitle {get; einstellen; }}

public class JobController : Controller 
{ 
    public ActionResult Index() 
    { 
     var j1 = new Job { JobID = 1, JobTitle = "Software Developer" }; 
     var j2 = new Job { JobID = 2, JobTitle = "Business Analyst" }; 
     var j3 = new Job { JobID = 3, JobTitle = "Project Manager" }; 

     var jobs = new List<Job> { j1, j2, j3 }; 

     return View(jobs); 
    } 

    public JsonResult GetJobDetails(int id) 
    { 
     //Write the code to look up the job details based on id(I'm hardcoding for simplicity) 
     return Json(new { WorkingHours = "06:00 - 15:00", IsContractor = false }, JsonRequestBehavior.AllowGet); 
    } 
}

Ausblick:

@model IEnumerable<MVCTutorial.Controllers.Job> 

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Jobs</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script type="text/javascript"> 
     $(function() { 
      $(".list-group-item a").click(function() { 
       var id = $(this).data('id'); 
       alert(id); 

       if(id != "") 
       { 
        $.getJSON("/Job/GetJobDetails/" + id, function (data) { 

         var workingHours = data.WorkingHours; 
         var isContractor = data.IsContractor; 

         var details = "Working hours - " + workingHours + ".Is contractor - " + isContractor; 

         $(".modal-body").empty(); 
         $(".modal-body").html(details); 

         $('#myModal').modal('show'); 
        }); 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <ul class="list-group"> 
     @foreach (var job in Model) 
     { 
      <li class="list-group-item"><a data-id="@job.JobID">@job.JobID @job.JobTitle</a></li> 
     } 
    </ul> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="myModalLabel">Jobs</h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Ausgang:

Quelle

2016-07-03 07:33:57

einen Blick in modal asp.net MVC Javascript hinzufügen

Antwort

Verwandte Themen