將視圖添加到模態ASP.NET MVC Javascript中

Question

我創建了一個模式，將在其中顯示列表項的一些詳細信息：

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

我使用以下JS更新了模態：

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

更新：這仍然行不通

我還想在該模式內部傳遞一個視圖，該視圖將獲得相同的ID。 我找到了一種僅使用iframe傳遞它的方法，但是我知道不再建議這樣做。

有任何想法嗎？

Answer 1

它不需要那么復雜：

將點擊事件關聯到<li>內部的錨點
通過訪問單擊項的data-id ID來檢索作業ID
使用$.getJSON進行ajax調用以獲取作業詳細信息
通過調用$('#myModal').modal('show');以模態顯示作業詳細信息$('#myModal').modal('show');

控制器：

公共類Job {public int JobID {get; 組; }公共字符串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>

輸出：

將視圖添加到模態ASP.NET MVC Javascript中

問題描述

1 個解決方案

解決方案1
0 2016-07-03 07:33:57

將視圖添加到模態ASP.NET MVC Javascript中

問題描述

1 個解決方案

解決方案1 0 2016-07-03 07:33:57

解決方案1
0 2016-07-03 07:33:57