Add a view into modal asp.net MVC Javascript

Question

I have a modal created where I will be displaying some details of my list items:

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

I update my modal with the following 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();
})

UPDATE: This still doesn't work

I would also like to pass a view inside that modal that will get the same ID. I've found a way of just passing it using an iframe but I know that's not recommended any more.

Any ideas?

Answer 1

It doesn't need to be so complicated:

Hook up a click event to an anchor inside the <li>
Retrieve the job id by accessing data-id of the clicked item
Make an ajax call using $.getJSON to get the job details
Display the job details in a modal by calling $('#myModal').modal('show');

Controller:

public class Job { public int JobID { get; set; } public string JobTitle { get; set; } }

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

View:

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

Output:

Add a view into modal asp.net MVC Javascript

Question

1 answers

solution1
0 2016-07-03 07:33:57

Add a view into modal asp.net MVC Javascript

Question

1 answers

solution1 0 2016-07-03 07:33:57

solution1
0 2016-07-03 07:33:57