は私が私のリスト項目のいくつかの詳細を表示する場所作成したモーダルを持つモーダルasp.net MVCのJavascriptに

をビューを追加は私が私のリスト項目のいくつかの詳細を表示する場所作成したモーダルを持つモーダルasp.net MVCのJavascriptに

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：これはまだ動作しません

私も同じIDを取得することモーダル内面図を渡したいと思います。 iframeを使用して渡す方法が見つかりましたが、もう推奨されません。

アイデア？

出典

2016-07-01 Budyn

なぜiframeの？なぜDIVはないのですか？ –

私は、iframeを使用したくないと言っていますが、それは過去に使用したことだけです。しかし、私はJqueryでそれほど素晴らしくはありませんし、そのモーダルの中に詳細を表示する方法がわかりません。 – Budyn

あなたが角度を使っていたなら、表示したい 'url'に' directive'の 'templateUrl'を指すことができます。 ASP.NET MVCを使っているのではない。 – Arg0n

それはとても複雑である必要はありません。

メイククリック項目
のdata-idにアクセスすることにより、ジョブIDを取得し<li>
内のアンカーにクリックイベントをフックアップ$.getJSONを使用してジョブの詳細を取得する
$('#myModal').modal('show');

を呼び出して、ジョブの詳細を表示します。

コントローラー：

パブリッククラス求人 { 公共int型ジョブID {取得します。セット; } 公開ストリングJobTitle {get;セット; }}

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); 
    } 
}

ビュー：

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

出力：

出典

2016-07-03 07:33:57

は私が私のリスト項目のいくつかの詳細を表示する場所作成したモーダルを持つモーダルasp.net MVCのJavascriptに

答えて

関連する問題