Easyui+MVC实现动从一个动态弹出框进入另一个动态弹出框

6 篇文章 0 订阅

       高校平台进行中,本着一个在一个页面完成更多功能的宗旨,在遇到添加功能的多弹出框时,就需要从一个弹出框进入另一个弹出框,因为弹出框是动态的,就是说弹出框中的数据不定,是在Controller中根据传过来的数据动态拼写,完成后再弹出这个弹出框。

      View中加载部分视图:

 @*获取分数对话框*@
    <form id="fmGetScore">
        <div id="dlgGetScore" closed="true" class="easyui-dialog" style="width: 400px; height: 200px; padding: 10px 20px">
        </div>
    </form>

    @*获取题型*@
    <form id="fmGetQuestionType">
        <div id="dlgGetQuestionType" closed="true" class="easyui-dialog" style="width: 450px; height: auto; padding: 10px 20px">
        </div>
    </form>
       Controller中加载获取分数的Html的动态页面方法:

     #region 获取分数拼写html 朱丹  2014年12月27日15:23:27
        /// <summary>
        /// 按照难度等级期望分值得到相应的分数
        /// </summary>
        /// <param name="Degree">难度等级</param>
        /// <param name="TotalScore">总分</param>
        /// <param name="HopeScore">期望分值</param>
        /// <param name="dlgGetScore">表格ID(暂时没用)</param>
        /// <returns></returns>
        public string getScore(int Degree, int TotalScore, int HopeScore, string dlgGetScore)
        {
            double[] dblDis = new double[4];//定义难度分布数组

            //实例化一个CalculateProportion对象,用来获取分数分布
            CalculateProportion calProport = new CalculateProportion();
            dblDis = calProport.Distribution(Degree, HopeScore, TotalScore);
            TempData["DegreeScore"] = dblDis;

            strbuilder.Append("<form id=\"fmGetScore\"  method=\"post\" >");
            strbuilder.Append("<table><tr>");
            for (int rowcount = 0; rowcount < Degree; rowcount++)//行数等于难度等级个数
            {
                int Count = rowcount + 1;
                string strDegree = "难度等级" + Count;
                strbuilder.Append("<td>");
                strbuilder.Append(strDegree);
                strbuilder.Append(":");
                strbuilder.Append(Math.Round(dblDis[rowcount], 2));
                strbuilder.Append("</td>");
                // Math.Round(0.333333, 2);//按照四舍五入的国际标准
            }
            strbuilder.Append("</tr></table></form>");
            String strHtml = strbuilder.ToString();
            return strHtml;
        }

        #endregion
         Controller中加载获取题型的Html的动态页面方法:

  #region  查询题型之拼写Html 朱丹 2014年12月27日19:16:08
        //拼写Html字符串
        public string QueryQuestionType(List<ExamQuestionTypeEntity> listData)
        {

            //<div style="padding-left: 50px;">
            //    <span>
            //        <span id="1" style="width: 100px; height: 40px; padding-left: 15px; float: left;">
            //            <input type="checkbox" value="1" name="选择题" />选择题</span>
            //    </span>
            // </div>
            strbuilder.Append("<div style=\"padding-left: 50px;\">");
           
            
            foreach (ExamQuestionTypeEntity enQuestionType in listData)
            {
                strbuilder.Append("<span>");
                strbuilder.Append("<span id=\"1\"style=\"width: 100px; height: 40px; padding-left: 15px; float: left;\">");
                strbuilder.Append("<input id=\"");
                strbuilder.Append(enQuestionType.QuestionTypeName);
                strbuilder.Append("\" name=\"box\" value=\"");
                strbuilder.Append(enQuestionType.QuestionTypeId);
                strbuilder.Append("\" type=\"checkbox\" />");
                strbuilder.Append(enQuestionType.QuestionTypeName);
                strbuilder.Append("</span></span>");
            }
            strbuilder.Append("</div>");

           //strbuilder.Append("</table>");
            String strHtml = strbuilder.ToString();
            return strHtml;
        }
        #endregion
JS如下:

          获取分数:

function submitfmAddTemplate() {
    $('#fmAddTemplate').form('submit', {
        success: function (data) {
            document.getElementById("dlgGetScore").innerHTML = data;
            
            $('#dlgGetScore').dialog('open').dialog('setTitle', '获取分数');
        }
        })
            $('#dlg').dialog('close');
            $('#fmAddTemplate').form('clear');
}
         获取题型:

function submitfmGetScore() {
    $.ajax({
        type: "POST",
        async: false,
        url: "/Template/QueryQuestionTypePartial",
        success: function (data) {
            document.getElementById("dlgGetQuestionType").innerHTML = data;
            $('#dlgGetQuestionType').dialog('open').dialog('setTitle', '选择题型');

            $('#dlgGetScore').dialog('close');
            $('#fmGetScore').form('clear');
        }
    });
}

页面中的显示效果:

        

       点击获取题型后:

         

总结:

          对JS、AJAX不熟悉,到这里的完整实现,也是需要过程的,过程很锻炼人。

          

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
使用EasyUI框非常简单,你可以像下面这样使用: 1. 引入EasyUI的JS和CSS文件 ```html <!-- 引入EasyUI的CSS文件 --> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/themes/icon.css"> <!-- 引入jQuery和EasyUI的JS文件 --> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.19/jquery.easyui.min.js"></script> ``` 2. 创建框的HTML代码 ```html <div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px;" closed="true" buttons="#dlg-buttons"> <form id="fm" method="post" novalidate> <div class="fitem"> <label for="name">Name:</label> <input type="text" id="name" name="name" class="easyui-validatebox" required="true"> </div> <div class="fitem"> <label for="email">Email:</label> <input type="email" id="email" name="email" class="easyui-validatebox" required="true" validType="email"> </div> </form> </div> <div id="dlg-buttons"> <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close')">Cancel</a> </div> ``` 3. 初始化框 ```javascript function openDialog() { $('#dlg').dialog('open').dialog('center').dialog('setTitle', 'Add User'); } function saveUser() { $('#fm').form('submit', { url: 'save_user.php', onSubmit: function () { return $(this).form('validate'); }, success: function (result) { var result = eval('(' + result + ')'); if (result.success) { $('#dlg').dialog('close'); $('#dg').datagrid('reload'); } else { $.messager.show({ title: 'Error', msg: result.msg }); } } }); } ``` 4. 触发框 ```html <a href="#" class="easyui-linkbutton" onclick="openDialog()">Add User</a> ``` 这样,一个简单的EasyUI框就完成了,你可以根据自己的需求进行相应的修改。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值