如何在部分视图asp.net mvc中将迭代变量传递给引导模式弹出窗口

Question

确认我想调用方法后，我有一个删除按钮。但是现在模型打开后方法不能从视图调用到控制器。我想在模型弹出点击确认后调用删除方法。如果有人有解决方案，请帮助我，如果有任何其他方法可以提供示例。这是我的弹出模型<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">        <div class="modal-header">            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>            <h4 class="modal-title">Delete Parmanently</h4>        </div>        <div class="modal-body">            <p>Are you sure about this ?</p>        </div>        <div class="modal-footer">            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>            <button type="button" class="btn btn-danger" id="confirm">Delete</button>        </div>    </div></div>这是我在同一个部分视图页面上的 jquery<script type="text/javascript">    $('#confirmDelete').on('show.bs.modal', function (e) {        $message = $(e.relatedTarget).attr('data-message');        $(this).find('.modal-body p').text($message);        $title = $(e.relatedTarget).attr('data-title');        $(this).find('.modal-title').text($title);    });    $('#confirmDelete').find('.modal-footer #confirm').on('click', function(){    });</script>这是我的观点<section class="content"><div class="row">    <div class="col-md-12">        <div class="box box-primary" style="overflow-x:scroll;">            <div class="box-header">                <h3 class="box-title">Unit Detail</h3>                <div class="box_top_botton">                    <a class="btn btn-md btn-primary" href="@Url.Action("AddUnit", "UnitMasters")">                        <i class="glyphicon glyphicon-plus-sign"></i> Add Unit                    </a>                </div>            </div>    

Answer 1

1) 确保您已参考以下所有内容jquery.js，bootstrap.css并且bootstrap.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

2）将您@item.UnitId的data-id数据属性添加到您的glyphicon-trash链接中，例如

<a class="btn btn-xs btn-danger" href="#" data-toggle="modal" data-id="@item.UnitId" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">

    <i class="glyphicon glyphicon-trash"></i>

</a>

3）在script下方对您的喜好进行更改

<script type="text/javascript">

var unitId = 0;

$('#confirmDelete').on('show.bs.modal', function (e) {

    var message = $(e.relatedTarget).data('message');

    $(this).find('.modal-body p').text(message);

    var title = $(e.relatedTarget).data('title');

    $(this).find('.modal-title').text(title);

    unitId = $(e.relatedTarget).data('id');

    console.log(unitId);

});

$('#confirmDelete').find('.modal-footer #confirm').on('click', function () {

    var urlToDelete = '@Url.Action("DeleteConfirmed", "ControllerName")/' + unitId;

    console.log(urlToDelete);

    //Here is your ajax delete call with above url 

});

4）您的模态弹出窗口将保持不变，没有任何变化

输出：