Jquery 加載整個頁面而不是僅加載模態

Question

我正在嘗試創建一個“創建項目”模式。 起初我在局部視圖中創建它，但我發現很難用其他模型的數據填充它，所以我決定將局部視圖內容移動到我的實際 razor 頁面中。 一切正常，但當我按下按鈕啟動模態時，當前頁面也會在后台加載。 這是模態代碼的 html：

<div class="modal fade" id="add-project" tabindex="-1" role="dialog" aria-labelledby="addProjectLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="addContactLabel">Create Project</h5>
        </div>
        <div class="modal-body">
            <form asp-page-handler="ProjectModalPartial">
                @*numele metodei*@
                <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
                <div class="form-group">
                    <label asp-for="ProjectsModel.ProjectName">Title</label>
                    <input asp-for="ProjectsModel.ProjectName" class="form-control" placeholder="MyProject1" />
                    <span asp-validation-for="ProjectsModel.ProjectName" class="text-danger"></span>
                </div>
                <br />
                <div class="form-group">
                    <label asp-for="ProjectsModel.ProjectDescription">Description</label>
                    <textarea asp-for="ProjectsModel.ProjectDescription" class="form-control" rows="3" placeholder="This is my first project"></textarea>
                    <span asp-validation-for="ProjectsModel.ProjectDescription" class="text-danger"></span>
                </div>
                <br />
                <div class="center" style="padding-bottom:0px;">

                    <p style=" margin: 2px">Project Participants</p>               
                    <select multiple id="TicketType" class="form-control dropdown-toggle" asp-for="ProjectsModel.ProjectParticipants" asp-items="new SelectList(Model.UserList)" style="width: 470px;"></select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" data-save="modal">Save</button>
        </div>
    </div>
</div>

這是 jquery 代碼，沒有保存邏輯：

$(function () {
var placeholderElement = $('#modal-placeholder');  
$('button[data-toggle="ajax-modal"]').click(function (event) {
    var url = $(this).data('url');
    $.get(url).done(function (data) {
        //$(document.body).html(data).find('.modal').modal('show');
        placeholderElement.html(data);                         
      placeholderElement.find('.modal').modal('show');            
    });
});});

是否有另一種加載模態的方式，沒有額外的內容？

這是一張照片，所以你最好看看發生了什么

Answer 1

我設法解決了這個問題。
因為我不再有部分視圖，所以我不再需要placeholderElement ，所以我可以一起擺脫.find(modal) 。

代碼現在看起來像這樣：

$(function() {
    var placeholderElement = $('#modal-placeholder');  
    $('button[data-toggle="ajax-modal"]').click(function(event) {
        var url = $(this).data('url');
        $.get(url).done(function (data) {
            $('#add-project').modal('show');            
        });
    });
});