最好是封装到某一个js里面才方便,不用到处都写一个太麻烦了
第一步:在全局JS中定义所需要的js代码 (一般在site.js中)
function OnEdit(data, title, url, postUrl, submitBtnText) {
var action = postUrl ? postUrl : url;
$("#SubimtForm").attr("action", action);
$("#SubimtForm button[type=submit]").text(submitBtnText ? submitBtnText : "保存");
//注意上面是 SubimtForm 下面是 SubimtModal
$.get(url, data, function (html) {
$("#SubimtModal .modal-title").html(title);
$("#SubimtModal .modal-body").html(html);
$("#SubimtModal").modal({ show: true });
});
}
第二步:全局最外层加载页面定义所需弹窗窗体(一般在_Layout.cshtml中)
<form action="@Url.Action("Edit")" method="post" class="form-horizontal" id="SubimtForm" enctype="multipart/form-data">
<div class="modal fade" id="SubimtModal" tabindex="-1" role="dialog" 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">
</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">取消</button>
<button class="btn btn-primary" type="submit">保存</button>
</div>
</div>
</div>
</div>
</form>
第三步:当作弹窗的页面,需要命名定义的SubmitModal的
<div class="center-block" style="width:500px;" id="SubmitModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="form-group">
<label class="col-sm-3" for="UserName">
啊我是弹窗页面
</label>
</div>
</div>
第四步:在需要弹窗的页面或视图中引用js方法(在aspx或者cshtml中)
<div>
<button type="button" onclick="javascript:OnEdit();"><i class="ace-icon fa fa-check"></i>弹窗把</button>
</div>
<script type="text/javascript">
$(function () {
});
function OnEdit() {
OnEdit({ id: @Model.Id }, "弹窗名字", "@Url.Action("Path")");
//这里会跳到后端action控制器方法中,返回显示页面
}
</script>
外加:后端接收返回方法,接口,控制器 ——这个应该都写了只提一下
//跟上卖弄 Url.Achtion中名字要一致 Path
[HttpPost]
public ActionResult Path(int id)
{
return View();
}