AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

.net core 2.0 Razor调用ajax（自学笔记）

2018-02-12 2770
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 刚刚开始使用.net core 2.0 Razor进行web开发，上来就遇到一点小问题，在前端页面如何调用ajax，网上的文章很多，但大多是传统的MVC架构，即通过ajax调用controller，虽可以使用但总不理想。
刚刚开始使用.net core 2.0 Razor进行web开发，上来就遇到一点小问题，在前端页面如何调用ajax，网上的文章很多，但大多是传统的MVC架构，即通过ajax调用controller，虽可以使用但总不理想。Razor2.0使用handler处理页面请求的结构，并可以通过asp-page-hanlder来调用不同的处理方法，经过2天测试，终于达到预期效果，为了怕以后忘记记录下全部过程。整个项目只有一个测试页面，两个按钮分别对应get和post方法：
环境：WIN10pro+VS2107pro
1. 新建Asp.net Core Web应用程序Core20RazorAjax
2. 在Pages文件夹新建一个Razor页面：RazorAjax
3. 系统自动生成2个文件，前端页面以cshtml为扩展名，后端页面以.cshtml.cs为扩展名，后端页面里自动生成一个默认的OnGet方法，现在到页面里添加一个按钮，调用后端的方法来显示一个简单信息 

<h2>RazorAjax</h2>
<div id="AjaxStr" style="font-size:24px;"></div>
<input type="button" id="btnGet" value="Get数据">

@section Scripts{ 
    <script type="text/javascript" language="JavaScript">
        $('#btnGet').on('click', function () {
            $.ajax({
                type: "GET",
                url: "/RazorAjax?handler=AjaxStr",
                contentType: "application/json",
                dataType: "json",
                success: function (response) {
                    var strAjax = $("#AjaxStr");
                    strAjax.empty();
                    $('<A>').append(response).appendTo(strAjax);
                },
                failure: function (response) {
                    alert(response);
                }
            })

        })
    </script>
}
在后台RazorAjax.cshtml.cs页面里添加方法 

        public JsonResult OnGetAjaxStr()
        {
            return new JsonResult("测试Get方法获取后台数据!");
        }

4. 运行，并访问 http://localhost:xxxxx/RazorAjax 点击按钮就可以调出后台字符串
5. 下面开始测试post方法，由于post方法会遇到跨域保护cross-site-request-forgery(CSRF/XSRF)，所以要在配置里添加设置
首先在Startup.cs里添加配置 

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
        }
修改页面文件，增加post测试内容 

<h2>使用post上传参数并获取返回结果</h2>
@Html.AntiForgeryToken()
字符参数1: <input type="text" id="paramStr" value="字符串参数" /><br />
整形参数2: <input type="text" id="paramInt" value=100 /><br />
日期参数3: <input type="text" id="paramDate" value="1970-01-01" /><br /><br />
<input type="button" id="btnPost" value="Post调用">
<h3 style="color:brown;">返回结果</h3>
<div id="PostResult">
</div>
......
        $('#btnPost').on('click', function () {
            var param1 = $('#paramStr').val();
            var param2 = $('#paramInt').val();
            var param3 = $('#paramDate').val();
            $.ajax({
                type: "POST",
                url: "/RazorAjax?handler=AjaxPost",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("XSRF-TOKEN",
                        $('input:hidden[name="__RequestVerificationToken"]').val());
                },
                data: JSON.stringify({
                    Param1: param1,
                    Param2: param2,
                    Param3: param3
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    var pr = $("#PostResult");
                    pr.empty();
                    $.each(response, function (i, item) {
                        var $tr = $('<li>').append(item).appendTo(pr);
                    });
                },
                failure: function (response) {
                    alert(response);
                }
            });
        })

修改后台页面，添加post处理 

        public JsonResult OnPostAjaxPost()
        {
            string str1 = "";
            string str2 = "";
            string str3 = "";
            {
                MemoryStream stream = new MemoryStream();
                Request.Body.CopyTo(stream);
                stream.Position = 0;
                using (StreamReader reader = new StreamReader(stream))
                {
                    string requestBody = reader.ReadToEnd();
                    if (requestBody.Length > 0)
                    {
                        var obj = JsonConvert.DeserializeObject<Params>(requestBody);
                        if (obj != null)
                        {
                            str1 = obj.param1 + "- 后台处理返回";
                            str2 = (obj.param2 + new Random().Next(1000,9999)).ToString();
                            str3 = obj.param3.ToLongDateString();
                        }
                    }
                }
            }
            List<string> lstString = new List<string>
            {
                str1,
                str2,
                str3
            };
            return new JsonResult(lstString);
        }
    }

6. 测试运行

7. 附注：如果对url写法不舒服/xxx/?handler=xxx，可以在页面开始部分添加@page "{handler?}"，则url可以写成/xxx/handler的方式
8. 全部代码 

--Startup.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;

namespace Core20RazorAjax
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
            services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseBrowserLink();
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();

            app.UseMvc();
        }
    }
}


--RazorAjax.cshtml
@page "{handler?}"

@model Core20RazorAjax.Pages.RazorAjaxModel

@{
   

    ViewData["Title"] = "RazorAjax";

}
<h2>使用get获取数据</h2>

<input type="button" id="btnGet" value="Get数据">

<div id="AjaxStr" style="font-size:24px;"></div>

<br />

<br />

<h2>使用post上传参数并获取返回结果</h2>

@Html.AntiForgeryToken()

字符参数1: <input type="text" id="paramStr" value="字符串参数" /><br />

整形参数2: <input type="text" id="paramInt" value=100 /><br />

日期参数3: <input type="text" id="paramDate" value="1970-01-01" /><br /><br />

<input type="button" id="btnPost" value="Post调用">

<h3 style="color:brown;">返回结果</h3>

<div id="PostResult">

</div>
@section Scripts{
   

    <script type="text/javascript" language="JavaScript">

        $('#btnGet').on('click', function () {
   

            $.ajax({
   

                type: "GET",

                url: "/RazorAjax/AjaxStr",

                contentType: "application/json",

                dataType: "json",

                success: function (response) {
   

                    var strAjax = $("#AjaxStr");

                    strAjax.empty();

                    $('<A>').append(response).appendTo(strAjax);

                },

                failure: function (response) {
   

                    alert(response);

                }

            })

        });

        $('#btnPost').on('click', function () {
   

            var param1 = $('#paramStr').val();

            var param2 = $('#paramInt').val();

            var param3 = $('#paramDate').val();

            $.ajax({
   

                type: "POST",

                url: "/RazorAjax/AjaxPost",

                beforeSend: function (xhr) {
   

                    xhr.setRequestHeader("XSRF-TOKEN",

                        $('input:hidden[name="__RequestVerificationToken"]').val());

                },

                data: JSON.stringify({
   

                    Param1: param1,

                    Param2: param2,

                    Param3: param3

                }),

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (response) {
   

                    var pr = $("#PostResult");

                    pr.empty();

                    $.each(response, function (i, item) {
   

                        var $tr = $('<li>').append(item).appendTo(pr);

                    });

                },

                failure: function (response) {
   

                    alert(response);

                }

            });

        })

    </script>

}

--RazorAjax.cshtml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Newtonsoft.Json;

namespace Core20RazorAjax.Pages
{
    public class RazorAjaxModel : PageModel
    {
        public void OnGet()
        {

        }

        public JsonResult OnGetAjaxStr()
        {
            return new JsonResult("测试Get方法获取后台数据!");
        }

        public JsonResult OnPostAjaxPost()
        {
            string str1 = "";
            string str2 = "";
            string str3 = "";
            {
                MemoryStream stream = new MemoryStream();
                Request.Body.CopyTo(stream);
                stream.Position = 0;
                using (StreamReader reader = new StreamReader(stream))
                {
                    string requestBody = reader.ReadToEnd();
                    if (requestBody.Length > 0)
                    {
                        var obj = JsonConvert.DeserializeObject<Params>(requestBody);
                        if (obj != null)
                        {
                            str1 = obj.param1 + "- 后台处理返回";
                            str2 = (obj.param2 + new Random().Next(1000,9999)).ToString();
                            str3 = obj.param3.ToLongDateString();
                        }
                    }
                }
            }
            List<string> lstString = new List<string>
            {
                str1,
                str2,
                str3
            };
            return new JsonResult(lstString);
        }
    }

    public class Params
    {
            public string param1 { get; set; }
            public int param2 { get; set; }
            public DateTime param3 { get; set; }
    }
}


文章标签：
前端开发
数据格式
JSON
JavaScript
.NET
开发框架
关键词：
.NET core
.NET razor
.NET自学
.NET笔记
ajax笔记
tsh
目录
相关文章
Net分享
|
21天前
|
开发框架 .NET 开发者
简化 ASP.NET Core 依赖注入（DI）注册-Scrutor
Scrutor 是一个简化 ASP.NET Core 应用程序中依赖注入（DI）注册过程的开源库，支持自动扫描和注册服务。通过简单的配置，开发者可以轻松地从指定程序集中筛选、注册服务，并设置其生命周期，同时支持服务装饰等高级功能。适用于大型项目，提高代码的可维护性和简洁性。仓库地址：&lt;https://github.com/khellang/Scrutor&gt;
Net分享
39 5
小王老师呀
|
3月前
|
存储 开发框架 JSON
ASP.NET Core OData 9 正式发布
【10月更文挑战第8天】Microsoft 在 2024 年 8 月 30 日宣布推出 ASP.NET Core OData 9，此版本与 .NET 8 的 OData 库保持一致，改进了数据编码以符合 OData 规范，并放弃了对旧版 .NET Framework 的支持，仅支持 .NET 8 及更高版本。新版本引入了更快的 JSON 编写器 `System.Text.UTF8JsonWriter`，优化了内存使用和序列化速度。
小王老师呀
100 0
shiningrise
|
2月前
|
开发框架 .NET C#
在 ASP.NET Core 中创建 gRPC 客户端和服务器
本文介绍了如何使用 gRPC 框架搭建一个简单的“Hello World”示例。首先创建了一个名为 GrpcDemo 的解决方案，其中包含一个 gRPC 服务端项目 GrpcServer 和一个客户端项目 GrpcClient。服务端通过定义 `greeter.proto` 文件中的服务和消息类型，实现了一个简单的问候服务 `GreeterService`。客户端则通过 gRPC 客户端库连接到服务端并调用其 `SayHello` 方法，展示了 gRPC 在 C# 中的基本使用方法。
shiningrise
45 5
在 ASP.NET Core 中创建 gRPC 客户端和服务器
长梦
|
29天前
|
开发框架 缓存 .NET
GraphQL 与 ASP.NET Core 集成：从入门到精通
本文详细介绍了如何在ASP.NET Core中集成GraphQL，包括安装必要的NuGet包、创建GraphQL Schema、配置GraphQL服务等步骤。同时，文章还探讨了常见问题及其解决方法，如处理复杂查询、错误处理、性能优化和实现认证授权等，旨在帮助开发者构建灵活且高效的API。
长梦
27 3
Net分享
|
6天前
|
开发框架 算法 中间件
ASP.NET Core 中的速率限制中间件
在ASP.NET Core中，速率限制中间件用于控制客户端请求速率，防止服务器过载并提高安全性。通过`AddRateLimiter`注册服务，并配置不同策略如固定窗口、滑动窗口、令牌桶和并发限制。这些策略可在全局、控制器或动作级别应用，支持自定义响应处理。使用中间件`UseRateLimiter`启用限流功能，并可通过属性禁用特定控制器或动作的限流。这有助于有效保护API免受滥用和过载。 欢迎关注我的公众号：Net分享 （239字符）
Net分享
25 0
游客bl53zvy3izljy
|
1月前
|
开发框架 .NET PHP
ASP.NET Web Pages - 添加 Razor 代码
ASP.NET Web Pages 使用 Razor 标记添加服务器端代码，支持 C# 和 Visual Basic。Razor 语法简洁易学，类似于 ASP 和 PHP。例如，在网页中加入 `@DateTime.Now` 可以实时显示当前时间。
游客bl53zvy3izljy
23 1
小王老师呀
|
4月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器，可在操作方法执行前后运行代码，适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法，可以统一处理日志、验证及异常。创建并注册自定义筛选器类，能提升代码的可维护性和复用性。
小王老师呀
51 3
长梦
|
4月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core，一个轻量级、开源的跨平台框架，专为构建高性能Web应用设计。通过简单步骤，你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题，并提供了实用示例代码以助于理解与避免错误，帮助开发者更好地掌握ASP.NET Core的核心概念。
长梦
117 3
追逐时光者
|
3月前
|
开发框架 JavaScript 前端开发
一个适用于 ASP.NET Core 的轻量级插件框架
一个适用于 ASP.NET Core 的轻量级插件框架
追逐时光者
71 0
小王老师呀
|
4月前
|
开发框架 NoSQL .NET
利用分布式锁在ASP.NET Core中实现防抖
【9月更文挑战第5天】在 ASP.NET Core 中，可通过分布式锁实现防抖功能，仅处理连续相同请求中的首个请求，其余请求返回 204 No Content，直至锁释放。具体步骤包括：安装分布式锁库如 `StackExchange.Redis`；创建分布式锁服务接口及其实现；构建防抖中间件；并在 `Startup.cs` 中注册相关服务和中间件。这一机制有效避免了短时间内重复操作的问题。
小王老师呀
92 4

热门文章

最新文章

  • 1
    （已解决）Linux环境—bash: wget: command not found； Docker pull报错Error response from daemon: Get https://registry-1.docker.io/v2/: net/http: request canceled
  • 2
    【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
  • 3
    基于云效 Windows 构建环境和 Nuget 制品仓库进行 .Net 应用开发
  • 4
    Benchmark.NET：让 C# 测试程序性能变得既酷又简单
  • 5
    驾驭Autofac，ASP.NET WebApi实现依赖注入详细步骤总结
  • 6
    .net8 Syncfusion生成pdf/doc/xls/ppt最新版本
  • 7
    NET任务调度框架Hangfire使用指南
  • 8
    .net HTTP请求类封装
  • 9
    ASP.NET Web Pages - 教程
  • 10
    简化 ASP.NET Core 依赖注入（DI）注册-Scrutor
  • 1
    在火狐浏览器调ajax获取json数据时，控制台提示“XML 解析错误：格式不佳”。
    85
  • 2
    ajax的优缺点？
    73
  • 3
    Ajax的使用方法
    66
  • 4
    ajax请求js
    59
  • 5
    ajax请求方法以及参数！
    71
  • 6
    Ajax(vue-resource)
    73
  • 7
    Ajax(axios)
    78
  • 8
    Django 模板中使用 Ajax POST
    70
  • 9
    浏览器跨域限制：为什么浏览器不能跨域发送Ajax请求？
    117
  • 10
    探秘 AJAX：让网页变得更智能的异步技术(下)
    119

    • 相关课程

    更多
  • Ajax 前端开发入门与实战
  • Ajax入门
  • Java Web开发-Web应用、Tomcat、HTTP请求与响应

    • 相关电子书

    更多
  • 探究 Node.js 的服务端之路
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • WEB网页编程实战
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月