[英]Modal in asp.net view not working properly
In my strongly typed view I am looping over a list of objects coming from a database.在我的强类型视图中,我正在遍历来自数据库的对象列表。 Each of these objects is presented in a jumbotron, which has a button "Had role before".
这些对象中的每一个都显示在一个超大屏幕中,其中有一个按钮“之前有过角色”。 On click the modal opens and there I want to input some data in input boxes and save it to my database via an ajax call.
单击模式打开,我想在输入框中输入一些数据并通过ajax调用将其保存到我的数据库中。 One part of data that I want to input is the unique id which each object in the loop has.
我要输入的数据的一部分是循环中每个对象具有的唯一 ID。 With the code I have so far I managed on click to get the id of the first object, but when I am clicking the buttons for the rest of the objects nothing happens.
使用到目前为止的代码,我设法单击以获取第一个对象的 id,但是当我单击其余对象的按钮时,什么也没有发生。
This is the script in my view :这是我认为的脚本:
<script type="text/javascript">
$(document).ready(function () {
$(function () {
var idW;
$('#mdl').on('click', function () {
var parent = $(this).closest('.jumbotron');
var name = parent.find('input[name="mdlname"]').val();
var id = parent.find('input[name="mdlwrid"]').val();
var idW = id;
console.log(idW);
var titleLocation = $('#myModal').find('.modal-title');
titleLocation.text(name);
$('#myModal').modal('show');
});
});
$('#mdlSave').on('click', function () {
console.log('x');
addPastRoleAjax();
});
function addPastRoleAjax() {
$.ajax({
type: "POST",
url: '@Url.Action("addPastRole", "WorkRoles")',
dataType: "json",
data: {
wrId: idW,
dateStart: $("#wrdateStart").val(),
dateEnd: $("#wrknamedateEnd").val()
},
success: successFunc
});
function successFunc(data, status) {
if (data == false) {
$(".alert").show();
$('.btn').addClass('disabled');
//$(".btn").prop('disabled', true);
}
}
</script>
the loop :循环:
@foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
<input type="hidden" name="mdlname" value="@item.RoleName" />
<h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
The 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">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="wrdateStart" class='date-picker' />
<input id="wrknamedateEnd" class='date-picker' />
</div>
<div class="modal-footer">
<button type="button" id="mdlSave" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</div>
Your problem is in the following piece of code:您的问题出在以下代码段中:
@foreach (var item in Model)
{
<div class="jumbotron">
<input type="hidden" name="mdlwrid" value="@item.WorkRoleId" />
<input type="hidden" name="mdlname" value="@item.RoleName" />
<h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
<p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
<p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
<p> <button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>
}
You have used a foreach
loop and inside it you create
button elements with same id
.您使用了
foreach
循环,并在其中create
具有相同id
按钮元素。
<button type="button" id ="mdl" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button>
So, foreach
let you to create many buttons with same id
.因此,
foreach
允许您创建许多具有相同id
按钮。 That's wrong and that's why you get that behavior(only first button work).那是错误的,这就是为什么你会得到这种行为(只有第一个按钮起作用)。 The solution: Use classes instead.
解决方案:改用类。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.