ASP触发js调用另一个页面作为弹窗显示,定义一次js到处使用

最好是封装到某一个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">&times;</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();
}

版权声明:本文为weixin_45973327原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。