技术开发 频道

探讨ASP.NETMVC框架内置AJAX支持编程技术

 
  现在,我们来看一下修改视图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>  

 

  请注意这里所使用的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>  

 

  正如你所想像的,在前面的编码中,我们也完全可以直接使用这里的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 "可以使用这个名字!";
            }
   }  
}  

  注意,这里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

现在,我们来观察一下响应(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


 

0
相关文章