• C#使用jqueryui弹出对话框


    我做的是点击查询时弹出一个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({
    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);
    }

    有更好地思路请分享出来哦……


    
    
  • 相关阅读:
    初级算法梳理 -【任务1 线性回归算法梳理】
    【转】netstat 查看端口占用情况
    【转】Linux多命令顺序执行连接符(; || && |)
    【摘】程序员保持竞争力方法
    【整理】python中re的match、search、findall、finditer区别
    【转】怎样理解阻塞非阻塞与同步异步的区别?
    [笔记]Docker解决了什么问题?
    【笔记】第六章、Linux 的文件权限与目录配置
    [整理]Python程序员面试前需要看的博客(持续整理)
    【整理】知乎回答:为什么计算机语言中的变量名都不能够以数字为开头呢?
  • 原文地址:https://www.cnblogs.com/flowwind/p/2373948.html
Copyright © 2020-2023  润新知