如何用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 如何实现,能否麻烦各位大神给出一个简例。
上一个例子看一下吧.
//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
//....................后面省略了.
//代码如果能贴在这里面,或许会看的更清楚一点
非常感谢,其实例子有点复杂,其实我只需要这样
//前端
<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();
}
}
}
window.location.href就是当前页面啊
试过如果用在.aspx 的前端显示页面直接访问当前页面的后台是无法返回数据的,而且我不知道要怎么返回数据,找了很多都是Response.Write() 返回,如果用Response.Write()返回就会直接在本页面的前台直接的打印出来了,所以不是很清楚UpdatePanel是怎样实现的同页面ajax
@阿隐: 无论是什么方式,其实都是通过Response.Write(File)返回,只不过设置了不同的http header, 比如返回json数据设置成了application/json.
要实现UpdatePannel的功能其实不容易,因为UpdatePannel它已经在服务端做了页面合并,异步返回数据后只刷新更新了的部分。自己做一个小功能倒是可以,但模拟一个一模一样的机制,估计工作量不小。而且UpdatePanel性能也不怎么高啊。
@沧海一杰: 而且实现了页面状态的持续,其实是ViewState的来回传弟,如果ViewState很大,性能很低的。
@沧海一杰: 我只是需要在同一页面实现Ajax就可以了不要求其他
基本思路:
1. url指向Controller的Action
2. Controller的Action里返回HTML或json对象。
3. js success 回调函数中输出或解析后输出
能否写一段前端test.aspx $.ajax的调用和test.aspx.cs 后台的代码,只要随便写一个json文件就可以了
@阿隐: 返回一个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();
}
@阿隐: 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;
}
@Mr 88: asp.net 上的例子么?我对mvc不是很了解
@阿隐: 我给的代码就是MVC的,你可以直接拿来用
@阿隐: 给你百度个简单例子http://diaosbook.com/Post/2012/8/1/invoking-jsonresult-and-return-error-message-in-aspnet-mvc-ajax。看下,很简单的,对自己要有信心哈!
@Mr 88: 额,少打了一个字,其实我想要asp.net 的例子,因为现在做的项目是asp.net 的
@Mr 88: 我就猜到他可能看不懂你的MVC,因为学过MVC的还有几个回去弄aspx(虽然我一直觉得html+ashx才是最佳组合,当初没学MVC的时候,总感觉好神秘的样子,现在看来也就那样)?
@Shinto Ruan: 额、、、公司项目以前是asp.net 的没办法,这也不能怪我、、、、
ajax的url地址 写 test.aspx 就可以了。具体逻辑 可以带参数后台代码判断
看了一些文章,只有当只拥有这一行的时候才有返回值
“<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="ProjectFiles" %>”
而且如果用Response.Write()返回就会直接在本页面的前台直接的打印出来了,
想问那后台又要用什么返回数据呢
@阿隐:
后台试着 Response.Clear、End试试,不行,另外建建页面或者加 webService标签
@Qlin: .clear(),.End()都不行,如果另建一个,就不是同页面ajax了,而是两个页面实现了,
@阿隐:
在方法上 可以加 webService 的标签,去搜索吧
@Qlin: 看了几篇,不是很懂怎么用,如果方便能不能帮我写一个例子
@阿隐: 点错了,就在这讲了,你可以
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); } } }
不知道你想获取什么数据,我也好久没用过aspx了。我给你讲个思路。
jquery.ajax 一般不是要有一个处理网页的,包括原来的jquery.ajax页面一共两个页面。我是不想有两个页面,让jquery.ajax 放在asp.net的前端,然后ajax的响应页面放在asp.net 页面的后台代码.aspx.cs页面上
@阿隐: 你的意思是将前端代码卸载Test.aspx上,而后端代码写在Test.aspx.cs上么?
@阿隐: 其实我的代码就是写在Test.aspx.cs中的,这个类继承了Page,从而有了获取前端参数的能力,建议你去看看httphandler的原理,很有帮助
@Shinto Ruan: 能发一个页面的样板给我么?
用一个ashx处理就行了,不然就用aspx.cs文件 给一方法打上webmethod标签(这个楼上已经说过了),