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/javascript”></script>
<script src=”/Scripts/jqModal.js” type=”text/javascript”></script>
<link href=”/Scripts/jqModal.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript”>
$().ready(function() {
$(‘#dialog’).jqm();
});
</script>
<button class=”jqModal”>Click Me!</button>
<div class=”jqmWindow” id=”dialog”>
<a href=”#” class=”jqmClose”>Close</a>
<hr>
<h1>My Modal Box!</h2>
我是模态窗口</div>
评级控件
script src=”/Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script src=”/Scripts/jquery.MetaData.js” type=”text/javascript”></script>
<script src=”/Scripts/jquery.rating.js” type=”text/javascript”></script>
<link href=”/Scripts/jquery.rating.css” rel=”stylesheet” type=”text/css” />
<input name=”rating” type=”radio” class=”star” value=”1”/>
<input name=”rating” type=”radio” class=”star” value=”2”/>
<input name=”rating” type=”radio” class=”star” value=”3”/>
<input name=”rating” type=”radio” class=”star” value=”4”/>
<input name=”rating” type=”radio” class=”star” value=”5”/>
服务器
public ActionResultRating(intrating) {
ViewData[“message”] = “Nothing selected”;
ViewData[“rating”] = 0;
if (rating.HasValue) {
ViewData[“rating”] = rating;
ViewData[“message”] = “You selected “+rating;
}
return View();
}
客户端
<%
intselectedRating= (ViewData[“Rating”] as int);
%>
<form action=”/home/rating” method=”post”>
<%for (int i = 1; i <= 5; i++) { %>
<input name=”rating” type=”radio” class=”star” value=”<%=i%>”
<%if(i<=selectedRating){ %> checked=”checked” <%}%>/>
<%} %>
<input type=”submit” value=”go” />
</form>
<br/>
<%= Html.Encode(ViewData[“Message”]) %>
页面：
<script src=”/Scripts/jquery-form.js” type=”text/javascript”></script>
<script language=”javascript” type=”text/javascript”>
$().ready(function() {
$(‘.star’).rating({
callback: function(value, link) {$(“#jform”).ajaxSubmit();});});
</script>
2011-4-23 0:27 danny