专注于.NET编程学习和技术分享

使用AjaxPro实现前端无刷新调用后台方法

AjaxPro是首家支持以各种方式通过javascript访问服务端.net的免费库,实现方式比较直观和简单,首先把AjaxPro.dll引用到项目当中,然后在Web.config配置, 开始配置的时候一直报500错误:检测到在集成的托管管道模式下不适用的 ASP.NET 设置,节点中添加 <validation validateIntegratedModeConfiguration=”false”/>就正常了。

配置

<?xml version="1.0" encoding="utf-8"?>

<!--
  有关如何配置 ASP.NET 应用程序的详细信息,请访问
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.0" />
      <httpRuntime targetFramework="4.0" />
      <httpHandlers>
        <add path="ajaxpro/*.ashx" verb="*" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
      </httpHandlers>
    </system.web>
  
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false" />
    <handlers>
      <add name="AjaxPro_AjaxHanderFactory" verb="*" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2" preCondition ="integratedMode" />
    </handlers>
  </system.webServer>
</configuration>

后台引用一下AjaxPro,并且在Page_Load进行注册,这里添加一个GetValue方法用于测试。

后台

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using AjaxPro;

namespace AjaxProTest
{
    [AjaxNamespace("web")]
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(WebForm1));
        }
         [AjaxPro.AjaxMethod]
        public string GetValue()
        {
            string now = DateTime.Now.ToString();
            return now;
        }
    }
}

前台

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxProTest.WebForm1" %>

<!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></title>
    <script type ="text/javascript">
        window.onload=function(){
            var btnDeal = document.getElementById("btnDeal");
            btnDeal.onclick = function () {
                //调用后台方法
                var result = web.GetValue().value;
                document.getElementById("txtValue").value = result;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" id="btnDeal" value ="AjaxPro处理" />
        <input type="text"  id="txtValue" />
    </div>
    </form>
</body>
</html>

到这里一个最简单的用AjaxPro无刷新调用后台方法就实现了,还有很多其它用法 有待探索。

未经允许不得转载:墨鱼巴巴 » 使用AjaxPro实现前端无刷新调用后台方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址