我有一个有关要打开的模式(引导程序)的问题。我想包含部分视图。 (我想在几分钟内发布代码)。
这是目标: 1-我有一个Index.cshtml页面,其中的链接调用了javascript
<div class="profile-userbuttons">
@Html.ActionLink("Modifier", "Edit", "Profil", null, new { @class = "modal-link btn btn-success"@*, id = Model.userLog*@ })
</div>
(请注意,我已经在匿名类型中注释了第二个(id)参数)。 (此参数应该是userLog类型的对象。)
然后单击此链接将调用JavaScript脚本:
<!-- Calling Modals -->
<script type="text/javascript">
$(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit();
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
alert(1);
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
alert(3);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
</script>
当然,模式div存在于Index.cshtml中:
<!-- Modal -->
<div id="modal-container" class="modal fade"
tabindex="-1" role="dialog">
<div class="modal-content">
</div>
</div>
请注意,模态为空。我的脚本负责填充它。
但是让我们回到我的ActionLink。 “操作”链接定位到我的控制器“配置文件”中的一个“操作”:“编辑”
这里是:
public ActionResult Edit(/*userslog id*/)
{
return PartialView("Edit"/*,id*/);
}
(我已经注释了该参数,以测试它是否是“参数传递”问题)。
阅读时,您会看到它应该返回一个名为“编辑”的局部视图。
在这里:
@model WebSiteModels.Models.userslog
@{
ViewBag.Title = "Edit";
}
<div class="modal-body">
<div class="alert alert-warning">
<h2>Edit</h2>
<h3>YO !</h3>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>userslog</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.id)
<div class="form-group">
@Html.LabelFor(model => model.photo, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.photo, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.photo, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.age, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.age, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.age, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.nom, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.nom, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.nom, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.prenom, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.prenom, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.prenom, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.sex, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.sex, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.sex, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.telephone, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.telephone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.telephone, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.adresse, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.adresse, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.adresse, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.lattitude, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.lattitude, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.lattitude, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.longitude, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.longitude, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.longitude, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.idpersonne, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.idpersonne, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.idpersonne, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.idcontact, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.idcontact, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.idcontact, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DateCreation, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DateCreation, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DateCreation, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.DateModification, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.DateModification, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.DateModification, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Cancel
</button>
<button type="submit" id="approve-btn"
class="btn btn-danger">
Save
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
当我对其进行测试时,这是我获得的捕获屏幕:
Capture screen result : modal seems to be called, but in the browser console, is empty
这是我的问题。尽管已打开模态,但未调用我的局部视图。而且,当我在浏览器中打开它时:一切看起来都很不错。 我想念什么?
答案 0 :(得分:0)
您是否尝试过使用JQuery填充类似以下内容的模式内容(请参见NEW LINE):
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
**//// NEW LINE
$(".modal-content").load("/Profil/Edit");
////**
alert(3);
});
并将Html.ActionLink转换为具有相同属性的简单<a class='modal-link' data-target='#modal-container' data-toggle='modal'></a>
标签。