Asp.net 中两个Web Server 之间的页面响应的捕捉

标签：模态窗口,iframe如何替换祖父页面(禁用)

 

7.7日,又一个项目开始了,以.net  MVC为开发框架实现软件资源包的管理.

         开发中遇到一个问题, 软件资源包管理系统(SPM)有一个文件上传功能,需要用到SNDA的文档服务器的上传接口(web service) ,为了将上传文件独立出来,上传过程是用户直接与文档服务器交互,完成上传后用户关掉上传窗口,之后SPM的文件上传功能将上传的文件更新到当前页面.

         总结一下处理过程: 用户上传时需要调用文档服务器的上传页面,此时SPM的文件上传功能页面需要锁定,上传完后需要更新.当然,这可以通过jquery 中的dialog控件(模态)实现.

 

 

 

页面代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SNDA.SPM.Web.Models.VersionPublishModel>" %>
<%@ Import Namespace="SNDA.SPM.Web.Helpers" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

<script src="../../Scripts/jqui/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../../Scripts/jqui/ui/jquery.ui.core.js" type="text/javascript"></script>
    <script src="../../Scripts/jqui/ui/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="../../Scripts/jqui/ui/jquery.ui.position.js" type="text/javascript"></script>
    <script src="../../Scripts/jqui/ui/jquery.ui.dialog.js" type="text/javascript"></script> 
    <script  type="text/javascript" src="../../Scripts/um-ui-searcher-2.0.js"></script>   
    <script type="text/javascript" src="../../Scripts/jquery.bgiframe.min.js"></script>
   
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.min-vsdoc.js" type="text/javascript"></script>
   
    <script src="../../Scripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <script src="../../Scripts/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
    <script src="../../Scripts/fckeditor.js" type="text/javascript"></script>
   
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            var oFCKeditor = new FCKeditor('description1');
            oFCKeditor.ReplaceTextarea();

            var userpicker = new userSelecter();
            userpicker.init();

            $(document.forms.item(0)).validate({
                errorClass: "error",
                rules:
            {
                PackageName: "required",
                version: "required",
                description: "required"
            },
                messages:
            {
                PackageName: "*请输入软件包名",
                version: "*请输入软件版本号",
                description: "*请输入软件包概述"
            }

            });

 

            $("#mutiinput").searcher2(
          { "DefaultUserType": 0, "Width": "500px", "MaxUser": 5, "Mode": "MultiUser", "ClickClose": false, "OpenCallBack": function() { }, "CloseCallBack": function() { } },

          function(data) {
              var s = ""; $.each(data, function() { s += this.UserID + ";"; }); $("#mutiinput").val(s);
          },

          function() {
              return $("#mutiinput").val();
          });

            if ("有限开放" != $("select[name = 'versionpower'] option:selected").text()) {
                $("#publish").hide();
            } else {
                $("#publish").show();
            }
            $("select[name='versionpower']").change(function() {
                if ("有限开放" != $("select[name = 'versionpower'] option:selected").text()) {
                    $("#publish").hide();
                } else {
                    $("#publish").show();
                }
            });

            //            $("input[name='Isversion'][@type='radio']").each(function() {
            //                if ($(this).val() == $("input[name='HidIsversion'][@type='text']").val())
            //                    $(this).attr("checked", true);

            //            });

            $("#dialog-container").dialog({
                autoOpen: false,
                modal: true,
                width: 700,
                height: 500,
                close: function(event, ui) {

                    //alert(document.getElementById("paramRefDocId").getAttribute("RefId"));

                    $.post("/VersionMgr/EditFile",
                        {
                            "id": document.getElementById("paramRefDocId").getAttribute("RefId").toString()
                        },

                        function(data) {
                            if (data == "fail") {
                                //alert("上传文件信息更新未失败");
                                //location.reload(true);
                                //alert("上传文件信息更新失败");
                            }
                            else {

                                var strArr = data.toString().split('|');
                                //alert(strArr[5]);
                                if (strArr[5] != undefined) {

                                    $("#" + strArr[5]).remove();
                                }

                                var trValue = "<tr id='"
               + strArr[3]
         + "'><td><a href='"
         + strArr[4]
         + "' target='_blank'>"
         + strArr[0]
         + "</a></td>"
         + "<td>"
         + strArr[1]
         + "</td>"
         + "<td>"
         + strArr[2]
         + "</td>"
         + "<td align='center'><img style='cursor:pointer' src='../../Content/Images/delete.jpg' width='20px' height='20px' onclick='deletesoft(/""
                                    + strArr[3] + "/")' /></td>"
         + "</tr>";
                                //alert(trValue);

                                $("#fileTable").append(trValue);

                            }
                        })
                }

            });

        })
        //var location = new Object();
        function upload(varUrl, varRefId) {

            uploadFrame.location.href = "" + varUrl;
            document.getElementById("paramRefDocId").setAttribute("RefId", document.getElementById("filetype").value + "|" + varRefId);
            //uploadFrame.location.href = "http://www.baidu.com";
            //window.showModalDialog(varUrl);
            //window.open(varUrl);
            $("#dialog-container").dialog("open");
        }

        function upload1(varUrl, varRefId) {

            var location = new Object();
            uploadFrame.location.href = "" + varUrl;
            document.getElementById("paramRefDocId").setAttribute("RefId", varRefId);
            //uploadFrame.location.href = "http://www.baidu.com";
            $("#dialog-container").dialog("open");
        }

        function close2index(softwareid) {
            window.location.href = "/VersionMgr/Index/" + softwareid;
        }

        function deletesoft(id) {

            var vID = "#" + id;

            $.post("/VersionMgr/deletesoft", { "id": id }, function(data) {
                if (data == "success") {
                    alert("删除成功");
                    $(vID).remove();
                }
                else
                    alert("删除失败");

            })
        }
</script>

    <% using (Html.BeginForm()) {%>
        <%= Html.ValidationSummary(true) %>

        <fieldset style="margin:20px;padding-left:15px;">
            <legend>Fields</legend>
           
            <div style="display:none">
            <%=Html.TextBoxFor(model=>model.softwareversionid) %>
            <%=Html.TextBoxFor(model=>model.SoftwareId) %>
            <%=Html.TextBox("HidIsversion",Model.Isversion) %>
            <%=Html.TextBox("versionFileRefGuid")%>
            <%=Html.TextBox("testFileRefGuid")%>
            </div>
           
            <div class="editor-label" style="padding-top:20px;">&nbsp;
                软件包名<%= Html.Encode(Model.PackageName) %>
            </div>

            <div class="editor-field">
            版本号<%= Html.TextBoxFor(model => model.version) %>
           
                <%= Html.ValidationMessageFor(model => model.version)%>
            </div>
           <div class="editor-label">
           &nbsp;版本类型<%=Html.DropDownList("versiontype", Model.versiontype)%>
           </div>
           <div class="editor-label">
           <br />
           &nbsp;是否当前版本
           <% if ("1".Equals(Html.Encode(ViewData["Isversion"])))
               {%>           
                <input name="Isversion" type="radio" value="1" checked="checked" />是
                <input name="Isversion" type="radio" value="0" />否
            <%}else{ %>
                <input name="Isversion" type="radio" value="1" />是
                <input name="Isversion" type="radio" value="0" checked="checked" />否           
            <%}%>
          
           </div>
            <div class="editor-field">
                版本说明
                <div>
                    <textarea id="description1" name="description1"><%=Server.HtmlDecode(this.Model.description)%></textarea>
                </div>
               
            </div>
            <div>
            <br />
            版本文件
            <table id="fileTable" width="70%" border="1" bordercolor="#000000" cellspacing="0px" style="border-collapse:collapse">
            <tr style="background-color:#C0C0C0"><td>文件名</td><td>大小</td><td>文件类型</td><td>删除</td></tr>
            <%foreach (var item in Model.files)
              {%><tr id="<%=item.FileId%>"><td><a href="<%=item.Path %>" target="_blank"><%=item.Name %></a></td>
              <td><%=item.Size %></td><td><%=item.Description %></td>
              <td align="center">
                <img style="cursor:pointer" src="../../Content/Images/delete.jpg"
                   width="20px" height="20px" onclick="deletesoft('<%=item.FileId%>')" />
               </td></tr><%} %>
            </table>
            </div>
            <div style="position:relative;margin-top:10px;">
                软件包文档上传接口调用
                &nbsp;&nbsp;
                <%=Html.DropDownList("filetype", Model.filetype)%>
                &nbsp;&nbsp;               
               
                <input id="UploadFile1" type="button" style="width:60px;" value="上传"
                onclick="upload('<%=ViewData["uploadVersionFileStr"] %>', '<%=ViewData["versionFileRefGuid"]+"|"+Model.SoftwareId+"|"+Model.softwareversionid %>')" />
            </div>
            <div style="position:relative">
                测试文档上传接口调用
                <input id="UploadFile2" type="button" style="width:60px;" value="上传"
                       onclick="upload1('<%=ViewData["uploadTestFileStr"] %>', '0|<%=ViewData["testFileRefGuid"]+"|"+Model.SoftwareId+"|"+Model.softwareversionid %>')" />
            </div>      <%--onclick="javascript:upload1($('#publish').value,'<%=ViewData["uploadTestFileStr"] %>')  "--%>   
           
           
            <div style="position:relative">
            <br />
                版本开放范围<%=Html.DropDownList("versionpower", Model.versionpower)%>
            </div>
      
            <div id="publish" class="editor-field" style="position:relative">
                <input id="mutiinput" name="usernames" type="text" value="<%=this.Model.usernames %>" class="searcher" style="height:19px; margin-left:15px; width:80%"  />               
            </div>
           
            <p>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" style="width:60px;" value="提交" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" style="width:60px;" value="关闭" onclick="close2index('<%=Model.SoftwareId %>')" />
            </p>
            <br />
            <br />
        </fieldset>
       

    <% } %>
   

    <div>
        <%= Html.ActionLink("Back to List", "Index") %>
    </div>

<div id="dialog-container" title="上传文件">
    <span id="paramRefDocId"></span>
    <iframe name="uploadFrame" id="uploadFrame" height="100%" width="100%"></iframe>

</div>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">

<h2>UPS后台管理--更新</h2>   
</asp:Content>

 

 

 

 

因为文档服务的上传页面是通过iframe内嵌到SPM系统中的，测试中发现当跳转到该页时，这个页面会强制被iframe中的页面替换掉，也就是说iframe 子窗口替换了它的父窗口。这不是我希望看到的。

尝试了很久，终于找到了解决方法--将父窗口的location重置:

var location = new Object();

还有一个问题是asp页面刷新之后想保存之前的值可以通过session实现.

另一个解决方法是使用window.showModalDialog方法,代码如下:

<input type="button" name="UploadFile1" value="高级上传"
                onclick="javascript: var dlg=window.showModalDialog('<%=ViewData["uploadVersionFileStr"] %>', null, 'dialogWidth=550px;dialogHeight=500px'); UploadFile( $('select[name = filetype] option:selected').val(),'<%=ViewData["versionFileRefGuid"]+"|"+Model.SoftwareId+"|"+Model.softwareversionid %>');" style="height:24px;" />