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/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