zoukankan      html  css  js  c++  java
  • asp.net core 的 razor pages 如何使用ajax调用后台方法

    Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法。

    当网页被写入浏览器时,基于服务器的代码能够创建动态内容。

    在网页加载时,服务器在向浏览器返回页面之前,会执行页面内的基于服务器代码。

    由于是在服务器上运行,这种代码能执行复杂的任务,比如访问数据库。

    razor pages 的渲染是由服务器完成的,后端Razor直接渲染模版,这就会导致服务器端的压力,

    所以在遇到数据量过大的地方,还是由前端来渲染比较好,这就牵涉到了如何利用ajax调用 razor pages的后端代码了,

    基于我的搜索结果,方式有两种:

    方式一

    参考:https://www.jb51.net/article/133437.htm

    参考:http://www.cnblogs.com/mebius4789/p/8685755.html

    这个方式我个人认为比麻烦,大家可以自行查看链接

    方式二

    参考:https://www.learnrazorpages.com/security/request-verification#ajax-post-requests

    这个方式也是我接受的方式:

    操作步骤如下:

    1、Startup文件的ConfigureServices方法,添加下段:

    services.AddMvc().AddRazorPagesOptions(o =>
    {
        o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
    });

    整体如下:

     services.AddMvc()
                        .SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
                        .AddRazorPagesOptions(o =>
                         {
                             o.Conventions.ConfigureFilter(new IgnoreAntiforgeryTokenAttribute());
                         });

    2、Ajax请求

    var postSubmit = $.ajax({
        type: "POST",
        url: "/yourformhandler",
        data: JSON.stringify({ ... }),
        contentType: "application/json"
    }).done(function(response){
        //...
    });

    举个栗子:

    后端代码:

    public class Index1Model : PageModel
        {
            public void OnGet()
            {
    
            }
    
            //url:"Index"
            public IActionResult OnPost([FromBody]MyClass my)
            {
                return new JsonResult("Hello Response Back");
            }
    
            //url: "Index?handler=Send"
            public ActionResult OnPostSend([FromBody] MyClass my)
            {
                return new JsonResult(my);
            }
    
            public class MyClass
            {
                public int speakerId { get; set; }
                public bool currentYear { get; set; }
            }
        }

    前端Ajax调用:

    <h1>Index1</h1>
    <button id="clickme">click me</button>
    
    @section Scripts
        {
        <script> 
            $('#clickme').click(function (e) {
                var _data = {
                    "speakerId": 12,
                    "currentYear": true
                };            
    
                var postSubmit = $.ajax({
                    type: "POST",
                    url: "Index1?handler=Send",
                    data: JSON.stringify(_data),
                    contentType: "application/json"
                }).done(function (response) {
                    alert(response);
                });
            })
        </script>
    }
  • 相关阅读:
    C#磁吸屏幕窗体类库
    准备
    我写的诗
    How to turn off a laptop keyboard
    How to tell which commit a tag points to in Git?
    Why should I care about lightweight vs. annotated tags?
    How to get rid of “would clobber existing tag”
    Facebook, Google and Twitter threaten to leave Hong Kong over privacy law changes
    The need for legislative reform on secrecy orders
    Can a foreign key be NULL and/or duplicate?
  • 原文地址:https://www.cnblogs.com/Mindy-hym/p/10119334.html
Copyright © 2011-2022 走看看