现在,我们来看一下修改视图Index.aspx中涉及的主要内容,如下所示:
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<p>
<%using (Ajax.Form("ExamineTextBox", new AjaxOptions {UpdateTargetId = "resultDiv" }))
{ %>
<%= Html.TextBox("textBox1")%>
<input type="submit" value="Button"/>
<span id="resultDiv"/>
<% } %>
</p>
</asp:Content>
<p>
<%using (Ajax.Form("ExamineTextBox", new AjaxOptions {UpdateTargetId = "resultDiv" }))
{ %>
<%= Html.TextBox("textBox1")%>
<input type="submit" value="Button"/>
<span id="resultDiv"/>
<% } %>
</p>
</asp:Content>
请注意这里所使用的Ajax.Form帮助函数和引用span元素的UpdateTargetID属性的值。有关AjaxOptions的用法也有许多值得考察的地方,后面再进行讨论。
如果你进一步分析一下运行时刻上面视图页面的相应源码,那么,你会注意到对应于上面内容的如下一段内容:
<p>
<form action="/Home/ExamineTextBox" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'result' }); return false;"><input type="text" name="textBox1" id="textBox1" value="" />
<input type="submit" value="提交"/>
<span id="result"/>
</form>
</p>
<form action="/Home/ExamineTextBox" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, { insertionMode: 0, updateTargetId: 'result' }); return false;"><input type="text" name="textBox1" id="textBox1" value="" />
<input type="submit" value="提交"/>
<span id="result"/>
</form>
</p>
正如你所想像的,在前面的编码中,我们也完全可以直接使用这里的Sys.Mvc.AsyncForm.handleSubmit函数,只是上面的形式更为直观且易于使用罢了。
(三)添加控制器Action方法
然后,我们在Home控制器中添加一个Action方法ExamineTextBox,内容如下:
public class HomeController : Controller
{
public string ExamineTextBox(string textBox1)
{
string[] existingUsers = { "ScottGu", "ScottHa", "GuyIncognito", "Boris" };
if (existingUsers.Contains(username))
{
return "此名字已经被使用了!";
}
else
{
return "可以使用这个名字!";
}
}
}
{
public string ExamineTextBox(string textBox1)
{
string[] existingUsers = { "ScottGu", "ScottHa", "GuyIncognito", "Boris" };
if (existingUsers.Contains(username))
{
return "此名字已经被使用了!";
}
else
{
return "可以使用这个名字!";
}
}
}
注意,这里ExamineTextBox的return方法返回的不是一个ActionResult类型,而是一个string。事实上,这个string返回结果将会被自动打包成一个ContentResult类型。因此,你也可以直接返回一个ContentResult类型;但是,上面的编程使得函数格式更为易于理解。
另外值得注意的是,上面的方法返回的结果是经由AJAX调用实现的。之后,此结果被“悄悄地”填入到相应的span标记中。通过运行时启动你的任何HTTP拦截工具,你会观察到出现类似如下所示的请求(Request)内容:
POST /Home/ExamineTextBox HTTP/1.1
Referer: http://localhost.:45210/Home
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept-Encoding: gzip, deflate
Host: localhost.:45210
Content-Length: 28
Connection: Keep-Alive
Pragma: no-cache
textBox1=dude&__MVCAJAX=true
Referer: http://localhost.:45210/Home
Content-Type: application/x-www-form-urlencoded; charset=utf-8
Accept-Encoding: gzip, deflate
Host: localhost.:45210
Content-Length: 28
Connection: Keep-Alive
Pragma: no-cache
textBox1=dude&__MVCAJAX=true
现在,我们来观察一下响应(Response)结果,如下所示:
HTTP/1.1 200 OK
Server: ASP.NET Development Server/9.0.0.0
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 39
Connection: Close
Server: ASP.NET Development Server/9.0.0.0
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 39
Connection: Close