所以我有一个网址网址列表,全部来自SQL并且有一个id,一个地址等。
我使用以下内容将它们列在表中:
<div>
<div class="well" margin-left:20px; margin-right:20px">
<h2 style="margin-left:20px; margin-top:10px">Control Added Links</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>
Link Address
</th>
<th>
Check Interval
</th>
<th>
Status
</th>
<th>
#
</th>
</tr>
</thead>
<tbody>
@foreach (var i in links)
{
<tr>
<td>
<a href="http://@i.Address" target="_blank">@i.Address</a>
</td>
<td>
@i.Interval
</td>
<td>
@if (i.Status)
{ <text> ON </text>}
else
{ <text> OFF </text>}
</td>
<td>
<a href="~/Control/Delete/@i.Id">
✖
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
“链接”这里是链接模型列表:
@{
var links = (List<Link>)ViewData["LinkInfos"];
}
现在,有一个X按钮,您可以通过使用项目“i”的i.Id单击以从数据库中删除链接。我想要做的是,要求使用模态进行确认,而不是直接删除。
我使用follownig删除了控制器内部功能的链接:
public ActionResult Delete(int Id)
{
UserLinks links = new UserLinks();
links.delete(Id, User.Identity.Name);
return RedirectToAction("Index");
}
我更改了此代码,设法将数据从按钮传递到模态:
<a data-toggle="modal" data-id="@i.Id" data-request-url="@Url.Action("Delete", "Control")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
✖
</a>
<div id="deleteLink" 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">Test</h4>
</div>
<div class="modal-body">
This will delete all records related to this link. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
<button class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
var myLinkId
var url
$(document).on("click", ".delete-Link", function () {
myLinkId = $(this).data('id');
url = $(this).data('request-url');
$(".modal-body #linkId").val(myLinkId);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
// $('#addBookDialog').modal('show');
});
function deleteConfirm()
{
debugger;
$.post(url), { Id: myLinkId };
}
</script>
但现在的问题是将这些数据从模态传递给控制器。我写了“deleteConfirm”函数,但它似乎没有用,它没有去〜/ Control / Delete。
我的问题的第一部分实际上已经解决,我可以将id从按钮传递到模态,但我不确定它是否已正确解决所以我也要求它,我目前使用JavaScript传递id但是想知道我是否可以直接从按钮传递给模态本身。
我设法解决了我的问题,并通过为每个项目创建一个模态来正确删除...我认为这是一种草率的方式,当我喜欢时可能会出现问题,让我们说100个链接。
我想到的一个解决方案但不知道如何实施:
在视图中有一个“globalId”参数,当单击一个按钮时,i.Id被分配给globalId,然后打开模态,其中有globalId作为参数。就像使用,使用内部模态,通过删除按钮更改您单击。但问题是,不知道如何创建这个全局参数并通过单击按钮将i.Id分配给它。
我认为我可以实施可能的解决方案:
我想在视图中有一个变量,比如说int globalId。
假设我按下删除按钮id = 10,我想要发生的只是“global = id”所以我想将10分配给数字。如果按钮的id为12,我想再次发生“global = id”,这次将12分配给数字。
所以这样,modal将只使用globalId,所以我可以使它:
<a href="~/Control/Delete/@globalId">Yes</a>
这样,只会有一个模态,每个按钮都会打开相同的模态,而模态将使用相同的变量。分配给此模态的globalId的值只需单击按钮即可更改。
问题是,如何创建此局部变量,如何为该局部变量分配新值?
答案 0 :(得分:1)
我在您的视图中进行了一些更改,使其可以正常工作。我在模型中添加了一个隐藏字段,并将id存储在模型的show事件中。确认id是从这个隐藏字段获取以构建帖子网址。
<a data-toggle="modal" data-id="@id" data-request-url="@Url.Action("Delete", "Home")" title="Delete link" class="delete-Link btn btn-danger" href="#deleteLink">
✖
</a>
<div id="deleteLink" class="modal fade" role="dialog">
<div class="modal-dialog">
<input type="hidden" id="linkId" />
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Test</h4>
</div>
<div class="modal-body">
This will delete all records related to this link. Are you sure?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="deleteConfirm()">Yes</button>
<button class="btn btn-warning" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<script>
$('#deleteLink').on('show.bs.modal', function (e) {
$("#linkId").val($(e.relatedTarget).data('id'));
});
function deleteConfirm()
{
var url = "@Url.Action("Delete", "Control")/" + $("#linkId").val();
$.post(url).success(function () {
location.href = "@Url.Action("Index", "Control")";
});
}
</script>