jquery 当我用 AJAX ()方法向C#控制器发送用户凭据时,为什么会收到HTTP 400(错误请求)错误?(ASP.NET Mvc Kestrel)

c0vxltue  于 2023-01-12  发布在  jQuery
关注(0)|答案(1)|浏览(113)

介绍我拥有的

大家好,我想用C#创建一个Kestrel Web应用程序,该应用程序根据用户通过填写HTML页面中的输入框提供的信息来注册用户。

重要文件/类

该页面位于一个名为“wwwroot”的文件夹中,该文件夹位于应用程序的根目录中。使用JQuery语法的文件内容如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Design/registerStyle.css" />
    <script src="https://code.jquery.com/jquery-3.6.1.js" 
            integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" 
            crossorigin="anonymous"></script>
    <title>Register</title>
</head>
<body>
    <form>
        <div class="container">
            <h1>Register</h1>
            <p>Please fill in this form to create an account.</p>
            <hr>
            <label for="uname"><b>User Name</b></label>
            <input type="text" placeholder="Enter Your User Name" name="uname" id="uname" required>
            
            <hr>

            <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
            <button type="button" class="registerbtn" id="regbtn">Register</button>
        </div>

        <div class="container signin">
            <p>Already have an account? <a href="login.html">Sign in</a>.</p>
        </div>
    </form>

    <script>
            $('#regbtn').click(function () {
                let user_name = $('#uname').val();
                let stringified_data = JSON.stringify(user_name);

                $.ajax({
                    url: '/session/regist',
                    type: 'POST',
                    data: stringified_data,
                    success: function (response) {
                        console.log('Success', response);
                    },
                    fail: function (failed) {
                        console.log('Failed', failed);
                    }
                });
            });
    </script>
</body>
</html>

这不是唯一的html页面...但我认为这在这个问题中并不重要。它只是一个样板注册窗口。
注册的意思是我想将这些凭据放入名为database.db的数据库文件中,就这么简单...下面是SQL语法,以便您了解其结构:

CREATE TABLE User (
    `UserID` INTEGER PRIMARY KEY AUTOINCREMENT
    , `UserName` TEXT NOT NULL    
)

我只创建了两个单元格,因为我还不想处理太多的数据。这个数据库文件位于一个名为Database的文件夹中,该文件夹位于应用程序的根目录下。我需要使用带有EntityFramework的Sqlite,因为我的教授说我们不能使用PHP和任何其他类似的工具。我正在使用“SQLite的DB浏览器”检查数据。
因此,我在应用程序根目录下名为Controllers的文件夹中创建了一个SessionController类:

using Microsoft.AspNetCore.Mvc;
using Microsoft.Data.Sqlite;
using System.ComponentModel;

namespace WebApplication3.Controllers
{
    [ApiController]
    public class SessionController : Controller
    {
        [HttpPost, Route("/session/regist")]
        public IActionResult AddUserToDatabase([FromForm] string UserName)
        {
            try
            {
                /* Establish connection with database */
                using var connection = new SqliteConnection("Data source=database.db");
                connection.Open();
                using var command = connection.CreateCommand();
                command.CommandText = "insert into " +
                    "User " +
                    "( `UserName`) " +
                    "values " +
                    "(@username);";
                
                /* Add parameters with value */
                command.Parameters.AddWithValue("@username", UserName);

                /* Execute the SQL command and close connection */
                command.ExecuteNonQuery();
                connection.Close();
            }
            catch(Exception ex) {
                Console.WriteLine(ex.Message);
                return  Redirect("/page/registerFailed.html");
            }

            return Redirect("/page/registerSuccess.html");
        }
    }
}

这个控制器很简单:建立连接,创建SQL命令,然后在打开的数据库上执行该命令,关闭数据库,然后将用户重定向到指定的HTML页面。
我有另一个控制器类在这个文件夹中,它被称为HomeController:

using Microsoft.AspNetCore.Mvc;

namespace WebApplication3.Controllers
{
    public class HomeController : Controller
    {
        [HttpGet, Route("")]
        public IActionResult Login()
        {
            return Redirect("/page/login.html");
        }
    }
}

这将在加载应用程序时重定向到登录HTML页面。
关于启动应用程序的类...我有一个Program和一个Startup类在一个单独的C#文件中,在应用程序的根目录下。

using Starting.Start;

namespace Starting.Prog
{
    public class Program
    {
        /* Builds and runs the app with the help of the HostBoulder methods */
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        /* Builds the application using the Startup class */
        public static IHostBuilder CreateHostBuilder(string[] args) => 
            Host.CreateDefaultBuilder(args).ConfigureWebHostDefaults(web_builder =>
            {
                web_builder.UseStartup<Startup>();
            });
    }
}

此类构建应用程序,然后在中间件所在的Startup类的帮助下运行它。Startup类:

using Microsoft.AspNetCore.Mvc.Formatters;
using Microsoft.Extensions.FileProviders;

namespace Starting.Start
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc().AddMvcOptions(options =>
            {
                options.RespectBrowserAcceptHeader= true;
                options.InputFormatters.Add(new XmlSerializerInputFormatter(options));
                options.OutputFormatters.Add(new XmlSerializerOutputFormatter());
            });
        }
        
        /* Configure the app middleware */
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            
            /* Gets the root directory */
            string root_directory = Directory.GetCurrentDirectory();

            /* Gets the directory where the html files are located */
            app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(root_directory, "wwwroot")),
                RequestPath = "/page"
            });

            /* Enables routing */
            app.UseRouting();
            
            /* Specifying the endpoints */
            app.UseEndpoints(endpoints =>
            {
                /* Starter page (login.html) */
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Login}"                  
                );
                
                /* Create the route for the registration method */
                endpoints.MapControllerRoute(
                    name: "Session",
                    pattern: "/session/regist",
                    defaults: new { controller = "Session", action = "AddUserToDatabase" }
                );
            });

            
        }
    }
}

这样就加载了启动页面(也就是login.html)。

问题是

问题是,当我点击register.html上的register按钮调用JQuery . AJAX ()方法时,我收到一个HTTP 400(Bad Request)错误。
enter image description here
□我尝试了什么?
所以我首先尝试传递用户 AJAX 方法中输入的基本值(我没有字符串化输入数据),然后我得到了同样的错误。然后我在SessionController类中的AddUserToDatabase方法上方指定了一个属性标记,它告诉我们它使用的数据类型:

[HttpPost, Route("/session/regist"), Consumes("application/json")]
        public IActionResult AddUserToDatabase([FromForm] string UserName)
        {      
               Here is the user registration....
        }

这给了我一个不同的错误...不支持的媒体类型(HTTP 415错误).接下来我做的事情...我在 AJAX 方法中指定了数据和内容类型,只是在方法的末尾添加了:

dataType: "json",
     contentType: "application/json"

同样的错误。
在这之后我就卡住了,我不知道从现在开始在网络上往哪里走,或者我应该做什么。
你能告诉我哪些地方应该申报或做得不同吗?并提供一些提示或来源,告诉我哪里做错了吗?提前感谢!

0md85ypi

0md85ypi1#

只需更改您发布的数据格式如下:

$('#regbtn').click(function () {
    let user_name = $('#uname').val();
    let stringified_data = { UserName: user_name };  //change here....

    $.ajax({
        url: '/session/regist',
        type: 'POST',
        data: stringified_data,
        success: function (response) {
            console.log('Success', response);
        },
        fail: function (failed) {
            console.log('Failed', failed);
        }
    });
});

后端代码应保持如下:

[HttpPost, Route("/session/regist")]
public IActionResult AddUserToDatabase([FromForm] string UserName)
{ 
    //...
}

顺便说一句, AJAX 不能处理服务器端重定向,您需要在ajax.success()函数中使用window.location.href,如下所示:

$.ajax({
    url: '/session/regist',
    type: 'POST',
    data: stringified_data,
    success: function (response) {
        window.location.href = response.url;   //add here...
    },
    fail: function (failed) {
        console.log('Failed', failed);
    }
});

后端代码应如下所示:

[HttpPost, Route("/session/regist")]
public IActionResult AddUserToDatabase([FromForm] string UserName)
{     
    //....
    return Json(new { url= "/page/registerSuccess.html" });
}

相关问题