随笔- 63 文章- 23 评论- 321 阅读- 29万

C#使用jquery-ui弹出对话框

我做的是点击查询时弹出一个div，查询条件放到div里面，查询按钮Button也在div里面；看到jquery-ui很好看，而且很方便，便改用jquery-ui实现.但期间遇到下面这两个难题：

1、服务器控件Button包含在对话框的话 ,点击Button,回滚页面时对话框消失

2、后台获取不到对话框的中服务器控件的value

解决办法：

问题1：

页面采取局部刷新，用ajax包起来，即UpdatePanel，将对话框中用到的Button按钮，放到要弹出的对话框外面，改用js触发此button的onclick事件。

问题2：

添加代码：

$("#" + ObjWin).parent().appendTo(jQuery("form:first"));

（说明：ObjWin为要弹出的对话框（即div的id）），主要原因是jquery团队在弹出对话框操作时，将弹出对象添加到body，而不是form表单里，不在form表单，你也就无法获取到值，所以要手工添加到form对象里。

解决掉上面两个问题后，又引发出新的问题

即问题3：当单击两次查询后，再单击Button(查询)，则会多出一个一摸一样的ObjWin（称为ObjWin1），原因不知，请高手指点，再次单击Button(查询),ObjWin和ObjWin1里的查询条件的值才保持一致，而且Button（查询）所依据的查询条件是ObjWin1的。就这样需要单击两次才会得到自己想要的查询结果。

试了n多办法后，想到了一个解决办法,即第三次单击Button(查询）的时候，再次触发一次Button(查询)。而且，第三次即（奇数次）查询时不回滚到后台，直接在OnClientClick的时候，执行完

$("#" + ObjWin).parent().appendTo(jQuery("form:first"));

return；这样查询的结果就符合查询条件了。

实例：

需要引用的资源：

http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

前台主要html文件：

  <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
<div  class="HidePopDiv" id="win1" runat="server">
        <table class="PopTb"  cellspacing="0px">
        <colgroup>
        <col  class="TD40Px" align="right"/>
        <col   class="TD75Px" align="left"/>
        <col  class="75px" align="right"/>
        <col  class="TD200Px" align="left"/>
        </colgroup>
            <tr>
                <td>年度:</td>
                <td>
                    <select runat="server" id="SltYear">
                    </select>
                </td>
                  <td>
                    考核基地:
                </td>
                <td>
                    <select runat="server" id="SltExamBaseSch">
                    </select>
                </td>
            </tr>
               <tr>
                <td>
                    状态:
                </td>
                <td>
                    <select runat="server" id="SltState">
                    </select>
                </td>
                <td>
                    考核类型:
                </td>
                <td>
                    <select id="SltExamTypeSch" runat="server">
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    工种:
                </td>
                <td colspan="3" class="TDL">
                    <select runat="server" id="SltProfessionTypeSch">
                    </select>
                </td>
            </tr>
            
        </table>
    </div>  
  <asp:Button runat="server" ID="btn_select" Text="查询" OnClick="btn_select_Click" OnClientClick="GiveSearchValue('win1')">
                    </asp:Button>
    
    </ContentTemplate>
        </asp:UpdatePanel>

前台弹出对话框js代码

var i = 0;
///给予查询按钮传递服务器卡控件的值
function GiveSearchValue(ObjWin) {
    $("#" + ObjWin).parent().appendTo(jQuery("form:first"));
    i = i + 1;
    if (i % 2 == 0)
    { return; }
}
///弹出对话框
function ShowDialog(ObjWin, ObjBtn) {
    $("#" + ObjWin).dialog({
        width: 400,
        autoOpen: false,
        buttons: {
            "查询": function () {

                $("#" + ObjBtn).click();

                if (i > 2) {
                    if (i % 2 == 1) {
                        $("#" + ObjBtn).click();
                    }
                }

            }
                         , "关闭": function () { CloseDialog(ObjWin); }
        },
        show: "slow",
        hide: "slow"

    });
    $("#" + ObjWin).dialog("open");
}
///关闭对话框
function CloseDialog(CloseWin) {
    $("#" + CloseWin).dialog("close");
    i = 0;
}

后台主要代码：

   protected void btn_select_Click(object sender, EventArgs e)
    {
        ///为modal类赋值
        ClsMEBSet = new MODAL.ExamBatchSet();
        ClsMEBSet.BELONGCITY = bpBelongCity;
        ClsMEBSet.EBEXAMTYPE = SltExamTypeSch.Value;
        ClsMEBSet.EBPROFESSIONTYPE = SltProfessionTypeSch.Value;
        ClsMEBSet.CURYEAR = SltYear.Value;
        ClsMEBSet.EBTYPE = "1";
        ClsMEBSet.PUBSTATE = SltState.Value;
        ClsMEBSet.EBEXAMBASEID = SltExamBase.Value;
           ///重新查询数据 
        this.WebPager1.RecordCount = ClsBllEBSet.GetExamBatchNum(ClsMEBSetSch);
    }