高校平台进行中,本着一个在一个页面完成更多功能的宗旨,在遇到添加功能的多弹出框时,就需要从一个弹出框进入另一个弹出框,因为弹出框是动态的,就是说弹出框中的数据不定,是在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不熟悉,到这里的完整实现,也是需要过程的,过程很锻炼人。