如何在部分视图中将迭代变量传递给自举模式弹出窗口ASP.NET MVC

Question

确认要调用方法后，我有一个删除按钮。 但是现在打开模型后，无法从视图到控制器调用方法。 我想在模型弹出点击确认后调用delete方法。如果有人有解决方案，请帮助我，如果有任何其他方法可以举一个例子。

这是我的弹出模型

<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><!-- /.box-header -->
            <div class="box-body table-responsive">
                <table class="table table-bordered table-striped example1">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                @Html.DisplayNameFor(model => model.UnitId)
                            </th>
                            <th>
                                @Html.DisplayNameFor(model => model.UnitName)
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td nowrap style="font-size:14px !important;text-align:center !important;">
                                    <a class="btn btn-xs btn-primary" href="@Url.Action("AddUnit", "UnitMasters", new { id = item.UnitId })">
                                        <i class="glyphicon glyphicon-pencil"></i>
                                    </a>
                                    &nbsp;&nbsp;|&nbsp;&nbsp;
                                    <a class="btn btn-xs btn-danger" href="@Url.Action("Delete", "UnitMasters", new { id = item.UnitId })" data-toggle="modal" 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>
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.UnitId)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.UnitName)
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@ Html.Partial（“ DialogBox”，“ Home”）

这是我的控制器

public ActionResult DeleteConfirmed(int id)
    {
        UnitMaster unitMaster = db.UnitMasters.Find(id);
        db.UnitMasters.Remove(unitMaster);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

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）您的模式弹出窗口将保持不变，没有任何更改

输出：