首页 新闻 会员 周边

如何实现在Jquery $.ajax地址指向本地的.aspx 页面类似与UpdatePanel

0
悬赏园豆:200 [已解决问题] 解决于 2014-03-25 09:42

    如何用jquery或者javascript实现像UpdatePanel一样的机制:

比如在 test.aspx 页面写ajax的代码,然后在 test.aspx.cs  页面写 ajax 的响应代码,

具体点就是:前端 div+css+jquery(不是用微软封装好的控件),后台写在同一 asp.net 页面的后台代码,既是 .aspx.cs 中 

因为我现在是在做asp.net 所以希望能给asp.net 方面的例子。

问题补充:

  试过如果用在.aspx 的前端显示页面直接访问当前页面的后台是无法返回数据的,而且我不知道要怎么返回数据,找了很多都是Response.Write() 返回,如果用Response.Write()返回就会直接在本页面的前台直接的打印出来了,所以不是很清楚UpdatePanel是怎样实现的同页面ajax

  而且要把前端页面删除的只剩下面那行时才会返回值(如果前端有其他代码将不返回值,想问一下为什么)

“<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="ProjectFiles" %>”

  下面有提到 webmethod 的方法,不是很清楚用 webmethod 如何实现,能否麻烦各位大神给出一个简例。

阿隐的主页 阿隐 | 初学一级 | 园豆:5
提问于:2014-03-24 16:30
< >
分享
最佳答案
0

上一个例子看一下吧.

 

//js端代码

var ajaxUrl=window.location.href;

var  ajaxLoad= function (postData, successCallBack, errorCallBack, completeCallBack) {
var thisAjaxLoader = this;
var isSuccess = false;
if (this.isLoading) return;
this.showLoading();
$.ajax({
type: "post"
, dataType: 'text'
, url: this.ajaxUrl
, data: postData
, beforeSend: function (jqXHR, settings) {
}
, success: function (data, textStatus, jqXHR) {
isSuccess = true;
successCallBack.call(thisAjaxLoader, data, textStatus);

}
, error: function (jqXHR, textStatus, errorThrown) {
thisAjaxLoader.showErrorMessage(jqXHR, textStatus, errorThrown);
errorCallBack.call(thisAjaxLoader);
isSuccess = false;
}
, complete: function (jqXHR, textStatus) {
thisAjaxLoader.hideLoading();
completeCallBack.call(thisAjaxLoader);
}
});

 

//xxx.aspx代码

 

public partial class Manager_BookEditCheck : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

 

//这里区分是从哪调用来的, 如果是ajax ,则包含Type,如果没有Type则是正常的调用


var type = Request["Type"];

#region GetBookEdit

if (type == "GetBookEdit")
{
Guid bookID = Guid.Empty;
var bookIDString = Request["BookID"];
if (!string.IsNullOrEmpty(bookIDString))
{
try
{
bookID = new Guid(bookIDString);
}
catch (Exception)
{
}
if (bookID != Guid.Empty)
{
var results = GetBookEditCompareResults(bookID);
var json = results.Select(t => new { ID = t.ID, t.ChapterID, Source = t.Source, Target = t.Target }).ToList();

JavaScriptSerializer serializer = new JavaScriptSerializer();
var jsonString = serializer.Serialize(json);

Response.Clear();
Response.ContentType = "text/plain";
Response.Write(jsonString);
Response.End();
return;
}
}
Response.Clear();
Response.ContentType = "text/plain";
Response.End();
}

#endregion

#region Check

if (type == "Check")
{
Guid bookEditID = Guid.Empty;
var bookEditIDString = Request["BookEditID"];
if (string.IsNullOrEmpty(bookEditIDString))
{
SetResponse("BookEditID is Null.");
return;
}
try

//....................后面省略了.

收获园豆:200
tp3cd | 菜鸟二级 |园豆:409 | 2014-03-25 08:31
//代码如果能贴在这里面,或许会看的更清楚一点

 

zjruan | 园豆:219 (菜鸟二级) | 2014-03-25 08:42

非常感谢,其实例子有点复杂,其实我只需要这样

//前端

<script type="text/javascript">

var ajaxUrl = window.location.href;

function ajaxTest() {

var isSuccess = false;
$.ajax(
{
type: "post",
dataType: "json",
url: this.ajaxUrl,
data: "&type=getLocalAjax",
error:function() {
var b = 0;
},
complete:function() {
},
success: function (json) {
xx
}
});
}

</script>

 

//后台

protected void Page_Load(object sender, EventArgs e)
{

var type = Request["type"];
if (type!=null)
{
if (type.Equals("getLocalAjax"))
{
string returnString = "{\"Name\":\"Value\"}";

Response.Clear();
Response.ContentType = "text/plain";
Response.Write(returnString);
Response.End();
}
}

}

阿隐 | 园豆:5 (初学一级) | 2014-03-25 09:46
其他回答(5)
-1

window.location.href就是当前页面啊

lingjie-qiu | 园豆:1 (初学一级) | 2014-03-24 16:34

试过如果用在.aspx 的前端显示页面直接访问当前页面的后台是无法返回数据的,而且我不知道要怎么返回数据,找了很多都是Response.Write() 返回,如果用Response.Write()返回就会直接在本页面的前台直接的打印出来了,所以不是很清楚UpdatePanel是怎样实现的同页面ajax

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 16:44

@阿隐: 无论是什么方式,其实都是通过Response.Write(File)返回,只不过设置了不同的http header, 比如返回json数据设置成了application/json.

要实现UpdatePannel的功能其实不容易,因为UpdatePannel它已经在服务端做了页面合并,异步返回数据后只刷新更新了的部分。自己做一个小功能倒是可以,但模拟一个一模一样的机制,估计工作量不小。而且UpdatePanel性能也不怎么高啊。

支持(0) 反对(0) 空明流光 | 园豆:106 (初学一级) | 2014-03-24 17:58

@沧海一杰: 而且实现了页面状态的持续,其实是ViewState的来回传弟,如果ViewState很大,性能很低的。

支持(0) 反对(0) 空明流光 | 园豆:106 (初学一级) | 2014-03-24 18:01

@沧海一杰: 我只是需要在同一页面实现Ajax就可以了不要求其他

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 19:19
0

基本思路:

1. url指向Controller的Action

2. Controller的Action里返回HTML或json对象。

3. js success 回调函数中输出或解析后输出

Mr 88 | 园豆:238 (菜鸟二级) | 2014-03-24 16:36

能否写一段前端test.aspx $.ajax的调用和test.aspx.cs 后台的代码,只要随便写一个json文件就可以了

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 16:41

@阿隐: 返回一个HTML View的

// JS

function loadNames() {
var $nameListWrapper = $('#name-list-wrapper'); //data-src="@Url.Action("GetNames", "Dashboard", new { area = "XX"})
$.ajax({
url: $nameListWrapper.attr('data-src'),
cache: false,
success: function (data) {
$$nameListWrapper.html(data);
}
});
}

 

// Action 

public ActionResult GetNames() //TODO
{
try
{
ViewBag.Names = GetNames();
}
catch
{}

return View();
}

支持(0) 反对(0) Mr 88 | 园豆:238 (菜鸟二级) | 2014-03-24 17:01

@阿隐: json 的只是需要改下Action的返回类型为JsonResult, ajax 请求的datatype为json, 网上好多例子,比如:

public JsonResult Index()
{
    JsonResult result = new JsonResult();
    result.Data = new
    {
        categories = db.Category,
        users = from item in db.User select new { item.Id, item.Usn }
    };
    result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

    return result;
}

支持(0) 反对(0) Mr 88 | 园豆:238 (菜鸟二级) | 2014-03-24 17:12

@Mr 88: asp.net 上的例子么?我对mvc不是很了解

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 17:24

@阿隐: 我给的代码就是MVC的,你可以直接拿来用

支持(0) 反对(0) Mr 88 | 园豆:238 (菜鸟二级) | 2014-03-24 17:51

@阿隐: 给你百度个简单例子http://diaosbook.com/Post/2012/8/1/invoking-jsonresult-and-return-error-message-in-aspnet-mvc-ajax。看下,很简单的,对自己要有信心哈!

支持(0) 反对(0) Mr 88 | 园豆:238 (菜鸟二级) | 2014-03-24 17:53

@Mr 88: 额,少打了一个字,其实我想要asp.net 的例子,因为现在做的项目是asp.net 的

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 18:04

@Mr 88: 我就猜到他可能看不懂你的MVC,因为学过MVC的还有几个回去弄aspx(虽然我一直觉得html+ashx才是最佳组合,当初没学MVC的时候,总感觉好神秘的样子,现在看来也就那样)?

支持(0) 反对(0) zjruan | 园豆:219 (菜鸟二级) | 2014-03-24 19:29

@Shinto Ruan: 额、、、公司项目以前是asp.net 的没办法,这也不能怪我、、、、

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 21:59
0

ajax的url地址 写 test.aspx 就可以了。具体逻辑 可以带参数后台代码判断

Qlin | 园豆:2403 (老鸟四级) | 2014-03-24 16:53

看了一些文章,只有当只拥有这一行的时候才有返回值

“<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="ProjectFiles" %>”

而且如果用Response.Write()返回就会直接在本页面的前台直接的打印出来了,

想问那后台又要用什么返回数据呢

 

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 16:57

@阿隐: 

后台试着 Response.Clear、End试试,不行,另外建建页面或者加 webService标签

支持(0) 反对(0) Qlin | 园豆:2403 (老鸟四级) | 2014-03-24 17:00

@Qlin: .clear(),.End()都不行,如果另建一个,就不是同页面ajax了,而是两个页面实现了,

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 17:28

@阿隐: 

在方法上 可以加 webService 的标签,去搜索吧

支持(0) 反对(0) Qlin | 园豆:2403 (老鸟四级) | 2014-03-24 17:32

@Qlin: 看了几篇,不是很懂怎么用,如果方便能不能帮我写一个例子

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 19:36

@阿隐: 点错了,就在这讲了,你可以 

public partial class Test: System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
  {
        if(IsPostBack) //post方法传递参数
        {
            string param=Request.QueryString["前台来的参数"];
            。。。//该干嘛干嘛,
             Response.xxxxx(xxx); 
        }
  }  

}
支持(0) 反对(0) zjruan | 园豆:219 (菜鸟二级) | 2014-03-24 20:05
0

不知道你想获取什么数据,我也好久没用过aspx了。我给你讲个思路。

zjruan | 园豆:219 (菜鸟二级) | 2014-03-24 19:56

jquery.ajax 一般不是要有一个处理网页的,包括原来的jquery.ajax页面一共两个页面。我是不想有两个页面,让jquery.ajax 放在asp.net的前端,然后ajax的响应页面放在asp.net 页面的后台代码.aspx.cs页面上

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-24 21:34

@阿隐: 你的意思是将前端代码卸载Test.aspx上,而后端代码写在Test.aspx.cs上么?

支持(0) 反对(0) zjruan | 园豆:219 (菜鸟二级) | 2014-03-24 21:39

@阿隐: 其实我的代码就是写在Test.aspx.cs中的,这个类继承了Page,从而有了获取前端参数的能力,建议你去看看httphandler的原理,很有帮助

支持(0) 反对(0) zjruan | 园豆:219 (菜鸟二级) | 2014-03-24 21:46

@Shinto Ruan: 能发一个页面的样板给我么?

支持(0) 反对(0) 阿隐 | 园豆:5 (初学一级) | 2014-03-25 06:54
0

用一个ashx处理就行了,不然就用aspx.cs文件 给一方法打上webmethod标签(这个楼上已经说过了),

秋壶冰月 | 园豆:5903 (大侠五级) | 2014-03-24 21:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册