8.2ASP.NET MVC2使用Ajax类库实例
ASP.NET MVC2使用Ajax类库实例

.net for JavaScript

使用Jquery更新
<h1>Product Search -jQuery</h1>
<form action=”<%=Url.Action(“ProductSearch”) %>” method=”post” id=”jform”>
<%= Html.TextBox(“query”, null, new {size=40}) %>
<input type=”submit” id=”jsubmit” value=”go” />
</form>
<div id=”results2”>
<%Html.RenderPartial(“ProductSearchResults”, ViewData.Model); %>
</div>
<script src=”/Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script src=”/Scripts/jquery-form.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#jform’).submit(function() {
$(‘#jform’).ajaxSubmit({ target: ‘#results2’ });
return false;
});
});
</script>

.net 实现
<form action="/Home/HelloAjax" method="post"
onsubmit=”Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event),
{ insertionMode: Sys.Mvc.InsertionMode.replace,
updateTargetId:'result'});">


例子：
autoComplete Textbox
  使用asp.net ajax类库实现
  使用jquery实现

-使用asp.net ajax类库实现
服务器端：
[WebService(Namespace = “http://tempuri.org/”)]
[WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]// js 调用 ScriptService
public class ProductService: System.Web.Services.WebService
{[WebMethod]
public string[] ProductNameSearch(string prefixText, intcount){NorthwindDataContextdb= new NorthwindDataContext();
string[] products = (from p in db.Products
where p.ProductName.StartsWith(prefixText)
select p.ProductName).Take(count).ToArray();
return products;}}
前端调用：
<script src=”/Scripts/MicrosoftAjax.debug.js”type=”text/javascript”></script>
<script src=”/Scripts/ExtenderBase/BaseScripts.js”type=”text/javascript”></script>
<script src=”/Scripts/Common/Common.js”type=”text/javascript”></script>
<script src=”/Scripts/Compat/Timer/Timer.js”type=”text/javascript”></script>
<script src=”/Scripts/Animation/Animations.js”type=”text/javascript”></script>
<script src=”/Scripts/Animation/AnimationBehavior.js”type=”text/javascript”></script>
<script src=”/Scripts/PopupExtender/PopupBehavior.js”type=”text/javascript”></script>
<script type=”text/javascript”>
Sys.Application.add_init(function () {
$create(AjaxControlToolkit.AutoCompleteBehavior, {
serviceMethod: ‘ProductNameSearch’,
servicePath: ‘/ProductService.asmx’,
minimumPrefixLength: 1,completionSetCount: 10
},null,null,$get('query'))});</script>

-使用jquery实现
通过下拉框筛选数据
服务器端：
public ActionResultProductByCategory(intid){
NorthwindDataContext db= new NorthwindDataContext();
IList<Product> products = (from p in db.Products
where p.CategoryID== id
select p).ToList();
if (Request.IsAjaxRequest())
{
return View(“ProductSearchResults”, products);
}else{
return View(“ProductSearch”, products);
}
}

view层
var categories=db.Categories;
ViewData["CategoryID"]=new SelectList(Categories,"CategoryID","CategoryName");

<%=Html.DropDownList("CategoryID")%>

客户端：
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $("#CategoryID").change(function(){
   var selection =$("#CategoryID").val();
  $("#results").load("/home/ProductByCategory/"+selection);// ajax请求
}}):
});
</script>

使用模态窗口
jquery 方式：
<script src=”/Scripts/jquery-1.4.1.js” type=”text/javascri