【IT168技术文档】

  学生点击保存试卷按钮。在浏览器端先收集学生表单上的答案。然后向服务器发送异步的Post请求保存答案。服务器收到请求后从学生的表单中收集并保存答案。然后返回给浏览器保存信息。浏览器接到异步请求返回信息后提示学生保存结果。

  下面是保存按钮的click事件处理函数

function savePaperButton_click(sender,e)
{
var wRequest = new Sys.Net.WebRequest();
wRequest.set_url("SaveAnswer.ashx");
wRequest.set_httpVerb("POST");
wRequest.add_completed(onSaveAnswerCompleted);
var requestBody = getRequestBody($get("form1")) ;
wRequest.set_body(requestBody);
wRequest.get_headers()["Content-Length"] = requestBody.length;
wRequest.invoke();
$get("SaveProgress").innerHTML="<img src='../Images/indicator.gif' />正在保存..!"  ;
}

  注意这里的javascript代码用到了微软的Ajax.net客户端javascript类库。这样我们就不必处理浏览器兼容问题。并且有类库的支持代码看起来更加的简洁。该函数启动一个对SaveAnswer.ashx的异步请求。并通过getRequestBody方法获取Post内容字符串。并注册了请求返回后的回调函数onSaveAnswerCompleted用于提示用户保存成功。
  下面是收集学生答案用到的函数

function getRequestBody(oForm)
{
var aParams=new Array();
for(var i=0;i<oForm.elements.length;i++)
{
var element=oForm.elements[i];
if(element.type=="radio" || element.type=="checkbox")
{
if(element.checked==false)
continue;
}
var sParam=encodeURIComponent(element.name);
sParam+="=";
sParam+=encodeURIComponent(element.value);
aParams.push(sParam);
}
return aParams.join("&");
}

  因为Post请求中回传的数据必须用name=value的格式。左边name是数据的名称。右边value是数据的值。另外多个数据要用&隔开。比如我们想要回传学生的姓名和年龄两个数据。Post的内容就应该是 “StudentName=hanjie&StudentAge=24 “。该函数的作用就是取出表单中的所有input的名和值。名就是input的name属性。值就是学生答案。这里的name就是Question的Id 号。最终把整个试卷的答案拼接成一个Post字符串并返回。

  下面看看服务器端的SaveAnswer.ashx是如何收集和保存答案的。我们知道由于的Post回来的数据都会在Request.Form集合中。该集合是一个字典可以遍历每个key和value，因为我们是用Question的Id号作为input的name属性的，所以在Form集合中如果key是一个数字就说明这是一个试题的Id，对应的value也就是学生的答案。然后就可以保存答案了。

  下面是保存答案的PaperHelper类的SaveAnswer方法

public static void SaveAnswer(HttpContext context)
{
QuestionService service = new QuestionService();
foreach (String key in context.Request.Form.AllKeys)
{
long questionId = 0;
if (long.TryParse(key, out questionId))
{
service.GetById(questionId).StudentAnswer = context.Request.Form[key];
}
}
}
下面给出SaveAnswer.ashx的实现。
public class SaveAnswer : IHttpHandler {
public void ProcessRequest (HttpContext context) {
try
{
PaperHelper.SaveAnswer(context);
context.Response.Write("保存成功！<br/>时间："+DateTime.Now);
}
catch (Exception e)
{
context.Response.Write(e);
}
}
}