Ajax를 사용하는 ASP.NET
- 高洛峰원래의
- 2016-12-16 16:02:311678검색
Ajax의 사전 이해에서 Ajax에 대한 사전 이해를 소개했습니다. 이 기사에서는 ASP.NET에서 Ajax를 편리하게 사용하는 방법을 소개합니다. 첫 번째는 강력하고 조작하기 쉬운 jQuery의 ajax를 사용하는 것입니다. 두 번째는 물론 jQuery의 ajax를 사용하는 것입니다. .NET을 사용하여 패키지된 ScriptManager입니다.
$.ajax는 일반 페이지에 get 요청을 보냅니다
이것이 가장 간단한 방법입니다. 먼저 jQuery ajax의 구문을 간단히 이해하면 다음과 같습니다. .ajax ({settings}); 일반적으로 사용되는 몇 가지 설정이 있습니다. 모든 매개변수와 해당 설명은 jQuery 공식 API 문서
1. 유형: 요청 메소드 get/post
에서 확인할 수 있습니다. 2. url: 요청한 Uri
3. async: 요청이 비동기인지 여부
4. headers: 사용자 정의 헤더 매개변수
5. 데이터: 서버로 전송되는 매개변수 🎜>
6. 데이터 유형: 매개변수 형식, 일반적인 형식에는 문자열, json, xml 등이 포함됩니다. 7. 내용: 응답 맵을 구문 분석하는 방법을 결정하는 "문자열/정규 표현식" 8. contentType: 서버로 전송되는 데이터의 콘텐츠 인코딩 유형입니다. 기본값은 "application/x-www-form-urlencoded; charset=UTF-8"입니다. 9. 성공: 요청 성공 후 호출되는 핸들10.error: 요청 실패 후 호출되는 핸들jQuery의 ajax를 사용해 본 적이 없다면 조금 헷갈릴 것 같습니다. 간단한 예에서먼저 Visual Studio를 사용하여 새 WebApplication을 만들고 프로젝트에 jQuery.js를 도입한 다음 테스트용 Default.aspx라는 두 페이지를 추가합니다. Default.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
<!DOCTYPE html >
<html>
<head runat="server">
<title>Ajax</title>
<script src="jQuery.js" type="text/javascript"></script>
<style type="text/css">
html, body, form
{
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
#container
{
margin: 100px;
height: 300px;
width: 500px;
background-color: #eee;
border: dached 1px #0e0;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<input type="button" value="Test Ajax" onclick="testGet()" />
<br />
</div>
<script type="text/javascript">
function setContainer(text) {
document.getElementById("container").innerHTML += ('<br/>' + text);
}
function testGet() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx',
async: true,
success: function (result) {
alert(result);
},
error: function () {
setContainer('ERROR!');
}
});
}
</script>
</form>
</body>
</html> NormalPage.aspx가 요청 페이지로 사용됩니다. Default.aspx 페이지의 JavaScript에서 testGet 함수가 jQuery의 ajax를 사용하여 Normal에 요청을 보내는 것을 볼 수 있습니다. .aspx. 작성되지 않은 매개변수는 jQuery 기본값을 사용합니다. 이 호출은 단순히 Normal.aspx 페이지에 요청을 보냅니다(즉, 성공). 메소드 매개변수: 결과, jQuery는 responseText를 성공 메소드의 첫 번째 매개변수로 전달합니다. 요청이 실패하면 경고 메시지가 표시됩니다. DIV에 오류 메시지 텍스트 줄을 추가하면 대화 상자가 표시됩니다. 페이지에 나타나는 내용은 Normal.aspx 페이지의 내용입니다.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Web
{
public partial class NormalPage : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string action = Request.QueryString["action"];
Response.Clear(); //清除所有之前生成的Response内容
if (!string.IsNullOrEmpty(action))
{
switch (action)
{
case "getTime":
Response.Write(GetTime());
break;
case "getDate":
Response.Write(GetDate());
break;
}
}
Response.End(); //停止Response后续写入动作，保证Response内只有我们写入内容
}
private string GetDate()
{
return DateTime.Now.ToShortDateString();
}
private string GetTime()
{
return DateTime.Now.ToShortTimeString();
}
}
}그런 다음 Default.aspx에 새 메소드를 추가하고 버튼의 onclick 메소드를 새로 작성된 함수로 수정합니다. function testGet2() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx',
async: true,
data:{action:'getTime'},
success: function (result) {
setContainer(result);
},
error: function () {
setContainer('ERROR!');
}
});
}testGet2 함수는 testGet 함수를 기반으로 약간 수정됩니다. 성공 메소드 변경을 수행하고 얻은 응답을 페이지에 작성한 다음 데이터 매개변수를 요청에 추가하고 요청은 getTime 키-값 쌍을 서버에 전송합니다. get 요청에서 jQuery는 이 매개변수를 url 매개변수는 위와 같구요 작성방법은 이것과 같습니다function testGet3() {
$.ajax({
type: 'get',
url: 'NormalPage.aspx？action=getTime',
async: true,
success: function (result) {
setContainer(result);
},
error: function () {
setContainer('ERROR!');
}
});
}실행효과를 보세요
这样向一个页面发送请求然后在Load事件处理程序中根据参数调用不同方法，清除Response，写入Response，终止Response，而且传入的参数局限性太大，好业余的赶脚，看看专业些解决方法。为project添加一个General Handler类型文件，关于HttpHandler相关内容本文不做详细解释，只需知道它可以非常轻量级的处理HTTP请求，不用走繁琐的页面生命周期处理各种非必需数据。
Handler.ashx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;
namespace Web
{
/// <summary>
/// Summary description for Handler
/// </summary>
public class Handler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
Student stu = new Student();
int Id = Convert.ToInt32(context.Request.Form["ID"]);
if (Id == 1)
{
stu.Name = "Byron";
}
else
{
stu.Name = "Frank";
}
string stuJsonString= JsonConvert.SerializeObject(stu);
context.Response.Write(stuJsonString);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}关于这个类语法本文不做详细说明，每次发起HTTP请求ProcessRequest方法都会被调用到，Post类型请求参数和一再Request对象的Form中取得，每次根据参数ID值返回对应json对象字符串，为了展示json格式数据交互，需要为项目引入json.net这一开源类库处理对象序列化反序列化问题，然后创建一个Student类文件
Student.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Web
{
public class Student
{
public int ID { get; set; }
public string Name { get; set; }
}
}看看页面如何处理
function testPost() {
$.ajax({
type: 'post',
url: 'Handler.ashx',
async: true,
data: { ID: '1' },
success: function (result) {
setContainer(result);
var stu =eval ('('+result+')');
setContainer(stu.ID);
setContainer(stu.Name);
},
error: function () {
setContainer('ERROR!');
}
});
}结果是这个样子的
上面代码向Handler.ashx发送一Post请求，比且带有参数{ID:’1’},可以看到结果，如果用调试工具可以发现，得到的result是一个json格式的字符串，也就是往Response写的对象序列化后的结果。这样就实现了比较专业些的方式调用Ajax，但是有一个问题依旧存在，HttpHandler会自动调用ProcessRequest方法，但是也只能调用该方法，如果想调用不同方法只能像普通页面那样传递一个参数表明调用哪个方法，或者写不同的Handler文件。
WebService与ScriptManager
微软向来很贴心，看看微软怎么处理上面的困惑，那就是利用WebService，WebService配合SCriptManager有客户端调用的能力，在项目中添加一个Webservice文件
WebService.asmx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace Web
{
/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public Student GetStudent(int ID)
{
if (ID == 1)
{
return new Student() { ID = 1, Name = "Byron" };
}
else
{
return new Student() { ID = 2, Name = "Frank" };
}
}
[WebMethod]
public string GetDateTime(bool isLong)
{
if (isLong)
{
return DateTime.Now.ToLongDateString();
}
else
{
return DateTime.Now.ToShortDateString();
}
}
}
}代码中加黄的code默认是被注释掉的，要想让客户端调用需要把注释去掉，Service中定义了两个方法，写个测试方法让客户端调用第一个方法根据参数返回对应对象，首先需要在页面from内加上ScriptManager，引用刚才写的WebService文件
Default.aspx
<form id="form1" runat="server">
<asp:ScriptManager ID="clientService" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>
<div id="container">
<input type="button" value="Test Ajax" onclick="testPost2()" />
<br />
</div>
...然后添加JavaScript测试代码
function testPost2() {
Web.WebService.GetStudent(1, function (result) {
setContainer(result.ID);
setContainer(result.Name);
}, function () {
setContainer('ERROR!');
});
}测试代码中需要显示书写WebService定义方法完整路径，WebService命名空间.WebService类名.方法名，而出入的参数列表前几个是调用方法的参数列表，因为GetStudent只有一个参数，所以只写一个，如果有两个参数就顺序写两个，另外两个参数可以很明显看出来是响应成功/失败处理程序。看看执行结果：
观察仔细会发现使用ScriptManager和WebService组合有福利，在WebService中传回Student对象的时候并没有序列化成字符串，而是直接返回，看上面图发现对象已经自动转换为一json对象，result结果可以直接操作，果真非常贴心。而上一个例子中我们得到的response是一个json字符串，在客户端需要用eval使其转换为json对象。
ScriptManager+WebSefvice调用ajax带来了很大的便利性，但同时牺牲了很多灵活性，我们没法像jQuery那样指定很多设置有没有两全其美的办法呢
$.ajax+WebService
jQuery调用Handler几乎完美了，但是不能处理多个方法，上面例子我们可以发现WebService可以实现这一功能，那么能不能jQUery调用WebService的不同方法呢？答案是肯定的，试一试用jQuery调用刚才WebService定义的第二个方法。写一个测试函数
function testPost3() {
$.ajax({
type: 'post',
url: 'WebService.asmx/GetDateTime',
async: true,
data: { isLong: true },
success: function (result) {
setContainer($(result).find('string').text());
},
error: function () {
setContainer('ERROR!');
}
});
}调用方式没有多大变化，简单依旧，只要把URL改为WebService路径+需要调用的方法名，然后把参数放到data里就可以了。我们看看结果：
위 그림에서 볼 수 있듯이 jQuery는 WebService를 호출할 때 기본적으로 XML 문서를 반환하며 필요한 데이터는 98c455a79ddfebb79781bff588e7b37e 데이터를 얻으십시오. json 객체를 반환하고 싶다면 어떻게 해야 할까요? 그런 다음 Handler를 호출하는 것처럼 json.net 직렬화를 사용한 다음 eval을 사용하여 프런트 엔드에서 변환해야 하는데 이는 그리 복잡하지 않습니다. 나는 프로젝트에서 이 모드를 가장 자주 사용하는데, 이는 jQuery의 유연성을 유지할 뿐만 아니라 복잡한 페이지 수명 주기를 거치지 않고도 호출을 위해 서비스에 여러 메서드를 작성할 수 있게 해줍니다
json.net 그리고 이 기사 샘플 소스 코드
json.net은 json 처리를 위한 오픈 소스 .net 플랫폼 라이브러리입니다. Dictionay 중첩과 같은 복잡한 객체를 직렬화할 수 있으며 시간이 나면 간단한 사용법을 요약해 보겠습니다. 소스 코드 및 공식 설명에서 가져옵니다. 이 기사의 소스 코드는 여기를 클릭하여 얻을 수 있습니다.
Ajax를 이용한 ASP.NET 관련 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!