SilverIight数据绑定实例。JQuery AJAX请求aspx后台方法。

by admin on 2018年10月5日

 

使用JQuery封装好的AJAX来呼吁aspx的后台方法,还是比较好的,但是要是专注以下几点:

图片 1图片 2图片 3

 

前台Code

  1、首先要当法的顶部加上[WenMethod]的表征(此特性要引入using
System.Web.Services;命名空间)

图片 4图片 5

  2、其次方法自然要是是静态(static)方法。

 1 <DataGrid Name="DataGrid1" AutoGenerateColumns="False" IsReadOnly="True" Width="550"> 
 2 <DataGrid.Columns>
 3 <DataGridTextColumn Header="Name" Binding="{Binding Name}" Width="100"/>
 4 <DataGridTextColumn Header="Age" Binding="{Binding Age}" Width="100"/>
 5 <DataGridTextColumn Header="Address" Binding="{Binding Address}" Width="100"/>
 6 <DataGridTextColumn Header="Date" Binding="{Binding Date}" Width="200"/> 
 7 </DataGrid.Columns>
 8 </DataGrid>
 9 
10  

 

前台Code

下我举行了几只不等的调用后台方法的事例:

 

 

 

 1、不牵动参数返回string方法

后台

 

图片 6图片 7

    前台代码:

 1 public class Person
 2 {
 3 public String Name { get; set; }
 4 public int Age { get; set; }
 5 public String Address { get; set; }
 6 public DateTime Date { get; set; }
 7 }
 8 /// <summary>
 9 /// MainWindow.xaml 的交互逻辑
10 /// </summary>
11 public partial class MainWindow : Window
12 {
13 public MainWindow()
14 {
15 InitializeComponent();
16 var persons = new List<Person>();
17 for (var i = 0; i < 5; i++)
18 {
19 persons.Add(new Person { Name = "Person " + i.ToString(), Age = 20 + i, Address = "Address", Date=DateTime.Now });
20 }
21 DataGrid1.ItemsSource = persons;
22 }
23 }

图片 8图片 9

后台Code

1  //不带参数返回string方法
2             $.ajax({
3                 type: "post",
4                 url: "后台返回json数组.aspx/hello",
5                 contentType:"Application/json;charset=utf-8",
6                 success: function (msg) {
7                     alert(msg.d);
8                 }
9             })

 

View Code

  后台代码:

图片 10图片 11

1  /// <summary>
2     /// 不带参数返回字符串方法
3     /// </summary>
4     /// <returns></returns>
5     [WebMethod]
6     public static  string hello()
7     {
8         return "hello world!";
9     }

View Code

 

2、带参数返回string方法

  前台代码:

图片 12图片 13

 1 //带参数返回string方法
 2             $.ajax({
 3                 type: "post",
 4                 url: "后台返回json数组.aspx/sayHi",
 5                 data: "{\"name\":\"小明\",\"age\":\"18\"}",
 6                 contentType: "Application/json;charset=utf-8",
 7                 success: function (msg) {
 8                     alert(msg.d);
 9                 }
10             })

View Code

后台代码:

图片 14图片 15

 1 /// <summary>
 2     /// 带参数返回string方法
 3     /// </summary>
 4     /// <param name="name"></param>
 5     /// <param name="age"></param>
 6     /// <returns></returns>
 7     [WebMethod]
 8     public static string sayHi(string name ,int age)
 9     {
10         return string.Format("大家好,我叫{0},我今年{1}岁了!",name,age);
11     }

View Code

 

 

3、后台返回LIST集合

    前台代码:

图片 16图片 17

 1  //后台返回LIST集合
 2             $.ajax({
 3                 type: "post",
 4                 url: "后台返回json数组.aspx/jiazai",
 5                 data: "{\"name\":\"小明\"}",
 6                 contentType: "Application/json; charset=utf-8",
 7                 //dataType:"json",
 8                 success: function (msg) {
 9                     $(msg.d).each(function () {
10                         alert(this);
11                     })
12                 }
13             })

View Code

    后台代码:

图片 18图片 19

 1 /// <summary>
 2     /// 带参数返回集合方法
 3     /// </summary>
 4     /// <param name="name"></param>
 5     /// <returns></returns>
 6     [WebMethod]
 7     public static List<string> jiazai(string name)
 8     {
 9         List<string> ls = new List<string>();
10         ls.Add(name);
11         return ls;
12     }

View Code

 

 

最后加加一个正式的写法:前台的脑门

图片 20图片 21

 1 //标准的写法:
 2 $.ajax({
 3      type: "post",
 4      dataType: "json",
 5      contentType: "application/json", //注意:WebMethod()必须加这项,否则客户端数据不会传到服务端
 6      data:{如上所述},//注意:data参数可以是string个int类型
 7      url: "List.aspx/DeleteNews",//模拟web服务,提交到方法
 8      // 可选的 async:false,阻塞的异步就是同步
 9      beforeSend:function(){
10           // do something.
11           // 一般是禁用按钮等防止用户重复提交
12           $("#btnClick").attr({disabled:"disabled"});
13           // 或者是显示loading图片
14      },
15      success: function (data) {
16           alert("success: " + data.d);//注意这里:必须通过data.d才能获取到服务器返回的值
17           // 服务端可以直接返回Model,也可以返回序列化之后的字符串,如果需要反序列化:string json = JSON.parse(data.d);
18           // 有时候需要嵌套调用ajax请求,也是可以的
19      },
20      complete: function(){
21           //do something.
22           $("#btnClick").removeAttr("disabled");
23           // 隐藏loading图片
24      },
25      error: function (data) {
26           alert("error: " + data.d);
27      }
28 });

View Code

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图