没有Updatepanel / with jQuery的ASP.NET部分页面上传

我有一个ASPX页面。在顶部我显示5个类别(例如:笔,书,鞋,手机,镜子)当我点击任何类别时,我想在标题下面显示该类别下的产品。 我不想重新加载整个页面。我想保持我的页面原样(页眉,页脚和侧面板)当点击发生时,除了图像的中心位置(可能是DIV或表格显示产品)。 什么是最好的方法呢?。我不想去ASP.NET Ajax更新面板。我已经在我的项目中使用jQuery。所以无论如何使用jQuery做到这一点? 请指教。谢谢

正如Kirtan所说,最简单的答案使用更新面板。

如果您不想使用该路由,则可以使用jQuery对IHttpHandler进行Ajax调用,该IHttpHandler返回填充要更新的面板所需的数据。

步骤如下:

  • 使用jQuery调用“ .ashx ”Ajax处理程序。
  • 让您的“ .ashx ”文件以您选择的格式生成响应。 这可以是JSON或XML(如果您希望JavaScript解析响应并生成列表),或者HTML内容本身要添加到页面中。
  • jQuery将从您的处理程序接收响应,并使用适当的数据填充您的面板。

有一些关于如何使用IHttpHander的在线教程。 基本上它是ASP.NET的“ Page ”类派生的非常简单的接口。 它比Page类轻得多,因此您可以获得比UpdatePanel更好的性能,但是,与大多数性能提升技术一样,您的代码稍微复杂一些。

这是一个关于如何使用IHttpHandler类的教程 。

我建议你继续阅读

  • 使用jQuery调用Web服务

要么

  • 使用jQuery调用页面方法 。

根据Web应用程序的运行位置(Intranet而不是Internet),使用UpdatePanel可能是实现AJAX样式function的更快选择。

据我所知,使用包含Repeater / DataGrid / GridView的UpdatePanel将是一种更容易实现的方法。

它也可以用jQuery完成。 它包括使用ajax请求向服务器发送CateogryId ,获取产品的JSON作为响应,并使用DOM操作填充带有JSON数据的div。

编辑:使用JSON,复杂数据可以以面向对象的方式以易于阅读的文本格式表示。 看看这个 –

 var person = { "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ] }; 

person是一个JSON对象,由以下属性组成:“firstName”,“lastName”等。您可以使用person.firstNameperson.lastName等访问这些属性。

这是JSON的一个示例,您可以利用它来创建包含产品信息的JSON字符串,并将其以数组forms发送给客户端。 简而言之,它将是一个像这样的对象数组 –

 var persons = [person1, person2, person3, ...]; //person1, person2, etc. are objects like the person object declared above. 

您可以使用DataContractJsonSerializer类(在Framework 3.5中)将对象序列化/反序列化为JSON。 如果您使用的是Framework <3.5,则可以使用AjaxToolKit的JavaScriptSerializer类来执行相同的操作。

您还可以考虑一个“快速而肮脏”的解决方案:在您的页面代码隐藏中,实现ICallbackEventHandler,并返回一个html块,您将其填充到div或表中。

更新:请查看http://msdn.microsoft.com/en-us/library/ms178208.aspx ,了解有关实现此function所需的更多详细信息。