@using WebPatient.Models
@model IEnumerable<Patient>
@Scripts.Render("~/bundles/jquery")
@{
    ViewBag.Title = "Пациенты";
}

@section featured {
    <section class="featured">
        <div>
            <table id="PatientsTable" class="table">
                <tr>
                    <th>ФИО</th>
                    <th>@Html.DisplayNameFor(m => m.Gender)</th>
                    <th>Возраст</th>
                    <th>@Html.DisplayNameFor(m => m.Snils)</th>
                    <th>Редактирование</th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>@item.LastName @item.FirstName @item.MiddleName</td>
                        <td>@item.Gender.ToString()</td>
                        <td>@Math.Truncate(DateTime.Now.Subtract(item.DateOfBirth).TotalDays / 365)</td>
                        <td>@item.Snils</td>
                        <td><a href="#" onclick="editPatient(@item.PatientID)" class="btn btn-primary">Редактировать</a></td>
                    </tr>
                }

            </table>
        </div>
    </section>
}
<script>
    $(function () {
        $('.editModal').modal();
    });

    function editPatient(patientID) {
        $.ajax({
            url: '/Home/GetPatientsModal/', // The method name + paramater
            data: {
                PatientID: patientID
            },
            success: function (data) {
                $('#modalWrapper').html(data); // This should be an empty div where you can inject your new html (the partial view)
            }
        });
    }
</script>

<div id="modalWrapper">
    @* Inject form here *@
</div>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>