ASP.NET使用AjaxPro实现前端跟后台交互详解

使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢。因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差。

引言

一.首先,还是那句话,欲练神功,必先自宫。我们开发程序第一步首先是搭建环境。

  启动Visual Studio ,我的版本是2012啊,不过这个不影响的。先创建一个网站项目, 在项目中加入 Bin 目录,再添加一个 Index 页面。

  然后,我们需要去网上下载 AjaxPro.2.dll 百度一下就一堆链接,这里我就不多说什么了。然后把下载到的 AjaxPro.2.dll 的文件复制或引入到 Bin 目录中。接着,在 Web.config 的 <system.web> 标签下写入以下内容。

<httpHandlers>
  <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
</httpHandlers>

  并且在服务器后台类中,作以下修改:

using AjaxPro;
//(1)

AjaxPro.Utility.RegisterTypeForAjax(typeof(Index));
//(2)

[AjaxPro.AjaxMethod]
//(3)

(1):引入 AjaxPro 命名空间

(2):注册类信息到前台页面

(3):每个前台页面需要调用的函数前面加上这个

  这里我这有个实例,注意一点:在 Page_Load() 函数当中,使用了一个判断。 if(Page.IsCallback) 它的作用是它 获得一个值,表示页面请求是否是回调的结果。它的一个特殊的回传,所以往返总是发生;但是,与传统的回发不同,脚本回调不会重绘整个页面。 这是在别的博主那里爬来的,这是原文,也是个人的一个小编程习惯,我也不知道具体有什么用,但是我就是知道有用。

  以上,咱们就把这个 AjaxPro.2 环境搭建完了。

二. 接着,就开始调用了。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>AjaxPro.2.dll</title>
  <script>

    function show() {
      //(1)     
      var name = Index.getName().value;
      alert("My Name is :" + name);

    }

  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <input type="button" value="show" onclick="show()" />
  </div>
  </form>
</body>
</html>

  这里, Index 是这个类的类名,不知道还记不记得。咱们写过这样一段代码 AjaxPro.Utility.RegisterTypeForAjax(typeof(Index)); 在配置环境的时候申明的类名。前端页面也是通过这个找到我们的类的。.value 也是一个重点,我记的我第一次用这个插件的时候。返回一个 Password 判断是否登陆成功,一直都是失败,这个插件页面用日志信息,我就只能一个一个 alert 终于让我抓着了,如果这里不用 value 会获取很多实际应用用不上的信息,这里需要注意。

1)以为这样就可以调用成功了?太天真了,这里咱们说第一个细节:改变项目的托管管道模式

鼠标单击选中这个项目,然后按 F4 键,会出现这个项目的属性。将这个属性改成传统型,就行了。如果是集成,则会报 500.23

2)还有一点,也是一个错误。这种错误编译时不会出错,加载页面时也不出错。只有调用到 AjaxPro.2 的是时候才报错Uncaught ReferenceError: Index is not defined 当调用后台代码的不起作用时就需要注意是否是这个问题,因为这个报错它不会出现在页面,也不会被编译。想要看到这个错误,必须按 F12 页面调试,我知道Google Chrome 浏览器 的错误显示在 Console 选项卡当中,其他浏览器博主就不是特别清楚了。

  这个错误的原因啊,博主也查了许多资料,但是很少有具体的描述。这里博主也只能做一个博主自己的总结,如果有人知道哪里有错误,希望各位能积极指正(别客气,互相进步啊!!)。博主的分析呢,就是因为搭建环境时,又什么地方出了问题。 搭建环境博主刚刚也在前文中讲的比较清楚了,如果出现这个错误,应该有 7 成是这个原因。

3)这也是一个博主告诉我的细节啊!他这么说的:调用的时候,不一定要用声明的那个类名喔。可以使用 [AjaxNamespace("DEMO")] 这个标签,对这个类进行重命名。博主试了一下,确实是可以的。把这个标签放在被调用的类前面,记得是类前面哦。就可以了。

  可以看到,效果是实现了的!这个标签还是非常实用的。

  非常感谢大家观看,也希望各位对博主以上所述的有任何错误指正,请评论告诉我。我会及时验证并修改,希望不要误导他人。非常感谢!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • asp.net下使用AjaxPro实现二级联动代码

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1

  • ASP.NET使用AjaxPro实现前端跟后台交互详解

    使用 AjaxPro 进行交互,很多人都写过文章了,为什么还要继续老生常谈呢.因为有一些细节上的东西我们需要注意,因为这些细节如果不注意的话,那么程序会报错,而且维护性较差. 引言 一.首先,还是那句话,欲练神功,必先自宫.我们开发程序第一步首先是搭建环境. 启动Visual Studio ,我的版本是2012啊,不过这个不影响的.先创建一个网站项目, 在项目中加入 Bin 目录,再添加一个 Index 页面. 然后,我们需要去网上下载 AjaxPro.2.dll 百度一下就一堆链接,这里我就不

  • BootStrop前端框架入门教程详解

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. bootstrap 的学习非常简单,并且它所提供的样式又非常精美.只要稍微简单的学习就可以制作出漂亮的页面. bootstrap中文网:http://v3.bootcss.com/ bootstrap提供了三种类型的下载: -----------------------------------------------

  • asp.net 仿微信端菜单设置实例代码详解

    第一步:添加引用文件 <link rel="stylesheet" href="~/assets/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="~/assets/css/font-awesome.min.css" rel="external nofollow"

  • ASP.NET Core扩展库之实体映射使用详解

    在分层设计模式中,各层之间的数据通常通过数据传输对象(DTO)来进行数据的传递,而大多数情况下,各层数据的定义结构大同小异,如何在这些定义结构中相互转换,之前我们通过使用AutoMapper库,但AutoMapper功能庞大,使用较为复杂,而在很多场景下,可能我们只需要一些基础的对象映射功能,那么此时你可以选择扩展库中的轻量级AutoMapper实现. 实体映射包含以下核心功能: 在使用之前无需手动定义类型之间的映射关系 采用动态编译.缓存转换委托,提升性能. 支持通过特性定义属性映射关系 支持

  • vue前端开发keepAlive使用详解

    目录 前言 keep-avlive钩子函数 keep-avlive缓存哪些组件 小结及注意事项 前言 keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们. 在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性.使用方式为 <keep-alive> <component /> </keep-alive> 这里的component会被缓存. keep-avlive钩子函数 被包含

  • Skypack布局前端基建实现过程详解

    目录 引言 不一样的CDN 按需polyfill 处理请求的流程 总结 引言 已经有越来越多前端开发者放弃webpack,改用vite作为项目打包工具. 其中最主要的原因是 —— vite在开发环境基于ESM规范实现的Nobundle模式,节省了代码打包的时间(当然,也有ESBuild的功劳). 而在生产环境,当前仍有打包的需求. 随着浏览器的迭代,ESM规范兼容性越来越好,终有一天会进入生产环境大面积可用的状态. 届时生产环境打包将不再是刚需. 另一方面,从HTTP协议的角度看,在HTTP/1

  • JS前端可视化GraphQL使用详解

    目录 正文 什么是 GraphQL? 什么是 GraphiQL? 开始 结尾 正文 了解事物幕后的运作方式往往有好处,但并非总是如此. 因为不必使事情过于复杂.而可视化图形界面在处理这么一个场景中,是首当其冲的. 在本文中,我将带你了解如何使用 GraphiQL 来辅助 GraphQL 的开发. 什么是 GraphQL? 在我们谈论 GraphiQL 之前,让我们先谈谈 GraphQL. GraphQL 是一种用于应用程序编程接口 (API) 的开源数据查询和操作语言,也是一种使用现有数据完成查

  • Spring Boot 使用 SSE 方式向前端推送数据详解

    目录 前言 服务端 SSE工具类 在Controller层创建 SSEController.java 前端代码 前言 SSE简单的来说就是服务器主动向前端推送数据的一种技术,它是单向的,也就是说前端是不能向服务器发送数据的.SSE适用于消息推送,监控等只需要服务器推送数据的场景中,下面是使用Spring Boot 来实现一个简单的模拟向前端推动进度数据,前端页面接受后展示进度条. 服务端 在Spring Boot中使用时需要注意,最好使用Spring Web 提供的SseEmitter这个类来进

  • vue前端框架—Mint UI详解(更适用于移动端)

    一.mintUI简介 mint是一个基于vue的前端UI框架,而它的样式比较类似于手机的样式,可以说是一个基于vue打包app的UI框架,使用mint框架可以给使用vue打包的app的用户更好的交互体验.mint已支持vue2.0. 二.安装和引入mintUI     在安装之前首先要对vue.js有所了解,有一个建立好的vue的项目以及安装好的node.js. 执行命令npm i mint-ui -S,出现以下界面代表安装成功. 引入muitUI: 在main.js中加入 import Min

  • Python requests用法和django后台处理详解

    目录 1.requests 的常见用法 1.1.提交查询 1.2.提交表格 1.3.在提交时附加文件: 1.4.保持状态 1.5.查看结果 2.django 的处理 2.1.params 传入的参数 2.2.data 传入的参数 2.3.files 传入的参数 总结 1.requests 的常见用法 requests 除了 url 之外,还有 params, data 和 files 三个参数,用于和服务器后台交互. 1.1.提交查询 注意 get 只支持 params ,不支持 data 和

随机推荐