.NET Core 从 Razor 页面向控制器进行 AJAX 调用

Posted 2023-03-27

【中文标题】.NET Core 从 Razor 页面向控制器进行 AJAX 调用

【英文标题】：.NET Core making an AJAX call from a Razor Page to a Controller

【发布时间】：2020-05-04 10:23:03

【问题描述】：

我有一个使用 Razor Pages 的 .NET Core 3.1 项目。从中我创建了一个简单的测试，我可以使用以下代码成功地进行 Ajax 调用：

Index.cshtml.cs

public class IndexModel : PageModel

    public void OnGet()
    

    

    public JsonResult OnGetTest()
    
        return new JsonResult("Ajax Test");
    

Index.cshtml

@page
@model IndexModel

<div class="text-center">
    <p>Click <a href="#" onclick="ajaxTest()">here</a> for ajax test.</p>
</div>

<script type="text/javascript">
    function ajaxTest() 
        $.ajax(
            type: "GET",
            url: "/Index?handler=Test",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (xhr, status, error) 
                console.log(error);
            
        ).done(function (data) 
            console.log(data);
        );
    
</script>

但是，我想将 Ajax 方法从 Razor Page 移到 Controller 中，这样我就可以从多个 Razor Pages 中调用它。我使用以下代码创建了一个控制器：

public class AjaxController : Controller

    public JsonResult Test()
    
        return new JsonResult("Ajax Test");
    

Startup.cs

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(options =>
        
            options.EnableEndpointRouting = false;
        );
        services.AddRazorPages();
    

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    
        if (env.IsDevelopment())
        
            app.UseDeveloperExceptionPage();
        
        else
        
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseMvcWithDefaultRoute();
        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        
            endpoints.MapRazorPages();
        );
    

但无论我在 url 中为 Ajax 调用使用什么值，我都会得到一个 404 error。 Controllers 文件夹是否需要在 Pages 目录中？还是我需要配置一些路由以使用Controller 和Razor Pages？

url: "/Ajax/Test" // <-- What goes here?

这是当前目录结构：

【问题讨论】：

要在 ASP.NET Core Razor Pages 3.0 应用中启用控制器路由，请在 Configure 方法中添加 endpoints.MapControllers(); 和 endpoints.MapRazorPages();。

@MikeBrind 这似乎没有解决问题。

您是否在某处包含了 AnitForgery 令牌（请参阅 ***.com/a/46416572/27989）

【参考方案1】：

在 Startup.cs 中，将其添加到 ConfigureServices()

services.AddMvc(options => options.EnableEndpointRouting = false);

在 Startupcs 中，也将其添加到 Configure()

app.UseMvc(routes =>
        
            routes.MapRoute(
                name: "default",
                template: "controller=Home/action=Index/id?");
        );

DisplayController.cs

public IActionResult Test()
    
        return new JsonResult("Hi World");
    

索引.cshtml

<a onclick="ClickMe();">Click Me</a>
<script>
function ClickMe() 
    $.get("/Display/Test", null, function (e) 
        alert(e);
    );

</script>

【讨论】：

看来我让我的工作缺少的部分是在Startup.cs 中定义路线：routes.MapRoute(name: "api", template: "api/controller/action/id?");。谢谢。

我的荣幸。 :)

【参考方案2】：

您需要指定一个Route 属性，如下所示：

[Route("api/Ajax")]
public class AjaxController : Controller

    // ...

最好用“方法”属性装饰每个单独的端点，如下所示：

[HttpGet]
public JsonResult Test()

    return new JsonResult("Ajax Test");

另外你还需要在Startup.cs中设置正确的配置，如下图，把你没有的部分都加进去：

public void ConfigureServices(IServiceCollection services)

    services.AddMvc(options =>
    
        options.EnableEndpointRouting = false;
    );
    services.AddRazorPages();


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)

    // lots of stuff...

    // I have this after app.UseStaticFiles(), it may also work elsewhere
    app.UseMvcWithDefaultRoute();

    // lots of other stuff...

那么你应该可以使用路径/api/Ajax/Test调用它。

【讨论】：

请看我的更新。我添加了配置位，还修复了 Route 属性。