2018教程之mvc+ef之五：用bootstrap 静态弹窗实现确认删除

虽然实现了删除按钮，弹个UI窗口确认删除，但样子太丑了，bootstrap自带有哟，我用部门列表来作试验。效果如下，可以定义 窗口内容。

 

一、前台

在前台中，我将他的dialog等窗口写在foreach{}中，用于ID参数的传送，必须删除是要看ID删除的

注意参数的传送，要在button那传一下参数，@item.id，要不，在提交那直接写的@item.id老会取第一条记录的ID

@model IEnumerable<MYtest2018.Models.Department>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layoutadmin.cshtml";
}

 


<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>List of 部门</h5>
					<div class="ibox-tools">
						@Html.ActionLink("Create New", "Create", null, new { @class = "btn btn-primary btn-xs"})
					</div>
                </div>
                <div class="ibox-content">

<table class="table table-striped">
    

@foreach (var item in Model) {
    <tr>
		<td>
			@Html.DisplayFor(modelItem => item.Sort)
		</td>
        <td>
            @Html.DisplayFor(modelItem => item.DepartmentName)
        </td>
        <td>
		
            @Html.ActionLink("修改", "Edit", new { id=item.Id }, new { @class = "btn btn-primary btn-sm" })
			<button class="btn btn-white" data-toggle="modal" data-target="#myModel_@item.Id">删除</button>

	  @*@Html.ActionLink("删除", "Remove", new { id = item.Id }, new { onclick = "return confirm('你确认删除吗？')", @class = "btn btn-white btn-sm" })*@
			<div class="modal fade" id="myModel_@item.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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" id="myModalLabel">
								删除部门确认框
							</h4>
						</div>
						<div class="modal-body">
							请确认是否删除该部门！！！
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">
								关闭
							</button>
							<a href="~/Departments/Remove/@item.Id" class="btn   btn-primary" >确认删除</a>
							 
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
		</td>

    </tr>
}

</table>

                </div>
            </div>
        </div>
    </div>
 </div>


 

　　

后台就不用更改了。

 

<button class="btn btn-white" data-toggle="modal" data-target="#myModel_@item.Id">删除</button>

	  @*@Html.ActionLink("删除", "Remove", new { id = item.Id }, new { onclick = "return confirm('你确认删除吗？')", @class = "btn btn-white btn-sm" })*@
			<div class="modal fade" id="myModel_@item.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">