如何在 ASP.NET Core MVC 项目中使用 jQuery 和 AJAX 从视图调用 API？

Question

我创建了一个 ASP.NET MVC 项目来从列表执行 CRUD 操作，而不是使用数据库、使用HomeControllerAPI 控制器。现在我想编辑该项目，以便直接从我的视图（即 HTML 页面）调用 API 函数。

控制从视图传递到家庭控制器，然后传递到 API 控制器。我希望使用 jQuery 和 AJAX 在视图和 API 之间建立直接连接。

我应该在问题中详细说明哪些详细信息？

<script>
            $(document).ready(function () {
                    $('#login').click(function () {
                     var x = $('#email1').val()
                     var y = $('#pswd').val()
 
                     $.ajax({
                         type: "GET",
                         url: "https://localhost:44347/api/Values/Login/" + x+y,
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function (data) {
                             window.location.replace("Studentdataproject\Studentdataproject\Views\Home\Details.cshtml");
                             },
                         error: function (data) {
                             alert(data.responseText);
                         }
                 });
                     });   }

这是我在登录视图中调用 API 控制器登录的脚本。它没有调用 API 控制器。

登录API：

[HttpGet("Login/{email}/{password}")]
        public async System.Threading.Tasks.Task<IActionResult> LoginAsync(string email, string password)
        {
            obj1 = obj2.Login(email, password);
            if (obj1 == null)
            {
                return Ok(null);
            }
            else
            {
                var claims = new List<Claim>()
                {
                    new Claim(ClaimTypes.Name,obj1.email),
                    new Claim(ClaimTypes.Role,obj1.roles)
                };
                var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
                var princilple = new ClaimsPrincipal(identity);
                await HttpContext.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, princilple);

                return Ok();
            }
        }

Answer 1

您需要像这样更改 AJAX 中的 URL：

\n

\n

网址：“https://localhost:44347/api/Values/Login/”+x+“/”+y，

\n

\n

使用AJAX调用Web API，类似于调用控制器方法。

\n

下面是用AJAX调用API的类的CRUD操作People。你可以参考一下。

\n

人物类：

\n

 public class People\n{ \n    [Key]\n    public int id { get; set; }\n\n    public string name { get; set; }\n}\n

\n

应用程序编程接口：

\n

[Route("api/[controller]")]\n[ApiController]\npublic class APICRUDController : ControllerBase\n{\n    private readonly MydbContext _context;\n\n    public APICRUDController(MydbContext context)\n    {\n        _context = context;\n    }\n    [HttpGet("GetPerson")]\n    public IActionResult GetPerson(int? id)\n    {\n        var person = _context.People.ToList();\n        if (id != null)\n        {\n            person = person.Where(x => x.id == id).ToList();\n        }\n        return Ok(person);\n    }\n\n    [HttpPost("AddPerson")]\n    public IActionResult AddPerson([FromBody]People obj)\n    {\n        if (!ModelState.IsValid)\n        {\n            return Ok("Please enter correct fields!");\n        }\n        _context.People.Add(obj);\n        _context.SaveChanges();\n        return Ok("Person added successfully!");\n    }\n\n    [HttpPost("UpdatePerson")]\n    public IActionResult UpdatePerson([FromBody]People obj)\n    {\n        People people = (from c in _context.People\n                         where c.id == obj.id\n                         select c).FirstOrDefault();\n        people.name = obj.name;\n        _context.SaveChanges();\n        return Ok();\n    }\n\n    [HttpPost("DeletePerson")]\n    public void DeletePerson(int Id)\n    {\n        People people = (from c in _context.People\n                             where c.id == Id\n                             select c).FirstOrDefault();\n        _context.People.Remove(people);\n        _context.SaveChanges();\n    }\n}\n

\n

查看代码：

\n

\r\n

\r\n

 public class People\n{ \n    [Key]\n    public int id { get; set; }\n\n    public string name { get; set; }\n}\n

\r\n

\r\n

\r\n

\n

这是该演示的结果：

\n

\n