[英]Jquery load whole page instead of only modal
I'm trying to make a "Create project" modal.我正在尝试创建一个“创建项目”模式。 At first i created it inside a partial view but i found it difficult to populate it with data from other models, so instead i decided to move the partial view content inside my actual razor page.
起初我在局部视图中创建它,但我发现很难用其他模型的数据填充它,所以我决定将局部视图内容移动到我的实际 razor 页面中。 All works as it should but when I press the button to launch the modal, the current page is loaded in the background as well.
一切正常,但当我按下按钮启动模态时,当前页面也会在后台加载。 Here is the html for the modal code:
这是模态代码的 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>
And here is the jquery code,without the logic for saving:这是 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');
});
});});
Is there another way of loading the modal, without the additional content?是否有另一种加载模态的方式,没有额外的内容?
Here is a photo so you better see what's happening这是一张照片,所以你最好看看发生了什么
I managed to solve the problem.我设法解决了这个问题。
Since I no longer have a partial view I don't need the placeholderElement
anymore, so I can get rid of .find(modal)
all together.因为我不再有部分视图,所以我不再需要
placeholderElement
,所以我可以一起摆脱.find(modal)
。
The code now looks like this:代码现在看起来像这样:
$(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');
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.