在Asp.net Mvc中的部分视图中显示模态

Question

After clicking "Advanced search" button i want to open a modal from a partial view where i can apply custom search

这是我的Index.cshtml页面，用于显示数据表

@model SmartAdmission.Web.Areas.Admin.Models.InstituteViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Program Level List</h3>
                </div>

                <div class="box-body">
                    @if (TempData["Message"] != null)
                    {
                        <div class="alert alert-@TempData["alertType"]">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            @TempData["Message"]
                        </div>
                    }

                    @*<input type="hidden" id="hiddenProvinceId" />*@

                    <table id="instituteTable" class="table table-bordered table-striped">
                        <thead>
                            <tr>
                                <th>
                                    <button type="button"
                                            class="btn btn-default btn-md" data-toggle="modal"
                                            data-target="#advancedSearchModal"
                                            id="advancedsearch-button">
                                        <span class="glyphicon glyphicon-search"
                                              aria-hidden="true"></span> Advanced Search
                                    </button>                                   

                                </th>
                            </tr>

                            <tr>
                                <th>Institute Name</th>
                                <th>Province</th>
                                <th>Course Name</th>
                                <th>Program Level</th>
                                <th>Tution Fee</th>
                                <th>Ielts</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>

                            @{
                                foreach (var institute in Model.Institutes)
                                {
                                    <tr>
                                        <td>
                                            @Html.DisplayFor(m => institute.InstituteName)
                                        </td>
                                        <td>
                                            @Html.DisplayFor(m => institute.Province.Name)
                                        </td>
                                        @foreach (var discipline in institute.Disciplines)
                                        {
                                            foreach (var course in discipline.Courses)
                                            {
                                                <td>
                                                    @Html.DisplayFor(m => course.CourseName)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(m => course.ProgramLevel.Name)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(m => course.TutionFeePerYear)
                                                </td>
                                                <td>
                                                    @Html.DisplayFor(m => course.IeltsMinRequirement)
                                                </td>

                                            }
                                        }

                                        <td>
                                            <a href="@Url.Action("EditInstitute", "Institute" , new { id = institute.Id }, null)" class="btn">
                                                <i class="glyphicon glyphicon-edit"></i>
                                            </a>

                                            <a href="#" class="btn btn-danger" onclick="ConfirmDelete('@institute.Id')"><i class="glyphicon glyphicon-trash"></i></a>

                                        </td>

                                    </tr>
                                }
                            }

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>


<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="/Admin/Institute/DeleteInstitute" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Item</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Do you want to delete this record?</p>

                    <input type="hidden" id="id" name="id" value="" />

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes, Delete!</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>


@section scripts
{
    <script>
        $(document).ready(function () {
            $('#instituteTable').DataTable()          
        });  
        $(function () {
            $("#mydialog").dialog({
                modal: true,
                width: "800px",
                autoOpen: false
            });          

        });
        function ConfirmDelete(id) {
            $("#id").val(id);
            $('.modal').modal('show');
        }       

    </script>
}

这是我的部分看法

@model SmartAdmission.Web.Areas.Admin.Models.AdvanceSearchModel
<div id="advancedSearchModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="/Admin/Institute/GetCustomInstitute" method="post">
                <div class="modal-header">
                    <h5 class="modal-title">Advance Search</h5>
                    @*<button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>*@
                </div>
                <div class="modal-body">
                    @Html.TextBoxFor(m=>m.InstituteName)
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger">Yes, Delete!</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

我尝试了按钮单击的ajax调用，并将URL引用到操作，该操作返回部分视图，但对我不起作用。