我应该如何获取表单的输入，并将该输入发送到 C# 类？ ASP.Net Core - Razor 页面

Question

我正在 ASP.NET Core Razor Pages 中编写一个基本的投资组合页面。 我想在底部有一个联系表单，但是我似乎无法将 Text 字段中的 Input 输入到我的 C# 类 OnPostSendEmail() 中。

我已经按照本教程实际发送了电子邮件。 但是我没有任何东西要发送，因为我无法将 Input 传递给 C# 类。 顺便说一句，请不要只说“使用 Ajax”等。

这是我的 .cshtml.cs 代码：

namespace Portfolio.Pages
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {

        }
        public EmailConfig emailConfig = new EmailConfig();
        public ActionResult OnPostSendEmail(string fromAddr, string subject, string body, string phone, string firstName, string LastName)
        {
            SmtpClient client = new SmtpClient("smtp.gmail.com");
            client.UseDefaultCredentials = false;
            client.Credentials = new System.Net.NetworkCredential("Email", "Password");

            MailMessage mailMessage = new MailMessage();
            mailMessage.From = new MailAddress(emailConfig.FromAddr);
            mailMessage.To.Add("ToEmail");
            mailMessage.Body = emailConfig.Body + emailConfig.Phone;
            string tempEmailSub = emailConfig.Subject.ToString();
            tempEmailSub += (", ", emailConfig.Name.ToString());
            tempEmailSub += (", ", emailConfig.LastName.ToString());
            emailConfig.Subject = tempEmailSub;
            mailMessage.Subject = emailConfig.Subject;
            client.Send(mailMessage);
            return null;
        }




    }
    public class EmailConfig
    {
        public string FromAddr { get; set; }
        //public string ToAddr { get; set; }
        public string Body { get; set; }
        public string Subject { get; set; }
        public string Phone { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
    }
}

这是我的 HTML 表单：

<form asp-page-handler="sendemail" id="contact-form" method="post" action="">
                    <div class="messages"></div>
                    <div class="controls">
                        <div class="row">
                            <div class="col-md-6">
                                <input asp-for="emailConfig.Name" id="Name" type="text" name="name" placeholder="Your firstname *" required="required" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <input asp-for="emailConfig.LastName" id="LastName" type="text" name="surname" placeholder="Your lastname *" required="required" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <input asp-for="emailConfig.FromAddr" id="FromAddr" type="text" name="email" placeholder="Your email *" required="required" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <input asp-for="emailConfig.Phone" id="Phone"type="text" name="phone" placeholder="Your phone" class="form-control">
                            </div>
                            <div class="col-md-12">
                                <textarea asp-for="emailConfig.Body" id="Message" type="text" name="message" placeholder="Message for me *" rows="4" required="required" class="form-control"></textarea>
                            </div>
                            <div class="col-md-12 text-center">

                                <button type="submit" asp-route-data="HttpPostAttribute" asp-page-handler="SendEmail" class="btn btn-outline-primary">Send message</button>

                            </div>
                        </div>
                    </div>
                </form>

还有我的 JavaScript/Ajax

$(function () {

         $("#btn").click(function(e) {
             e.preventDefault();
             var t = '@GetAntiXsrfRequestToken()';
             $.ajax({

                      url: $(this).attr("formaction"),
                      headers:
                      {
                          "RequestVerificationToken": t
                      },
                      type: "POST",
                 data: {
                     FromAddr: $("#CommentText").val(),
                     Phone: $("#Phone").val(),
                     Subject: $("#Subject").val(),
                     Message: $("#Message").val(),
                     FirstName: $("#FirstName").val(),
                     LastName: $("#LastName").val()
                 },

             }).done(function(data) {
                     console.log(data);
             }).fail(function(a, v, e) {
                     alert(e);
             });
         });
    })

Answer 1

我认为您的输入参数的名称与您在 ajax 代码 OnPostSendEmail( string fromAddr , string subject , string body , string phone , string firstName , string LastName ) 中发布的内容不同

这是ajax代码的数据部分：

     data: {
                 **FromAddr**: $("#CommentText").val(),
                 **Phone**: $("#Phone").val(),
                 **Subject**: $("#Subject").val(),
                 **Message**: $("#Message").val(),
                 **FirstName**: $("#FirstName").val(),
                 **LastName**: $("#LastName").val()
             },

Ajax 数据参数名称必须与 c# 代码相同。

Answer 2

对于简单的方法，您可以使用 Razor 模型绑定将信息从客户端发送到服务器。

对于 Razor 模型绑定，您需要使用[BindProperty] 。

这是一个工作演示：

IndexModel

public class IndexModel : PageModel
{
    public void OnGet()
    {

    }
    [BindProperty]
    public EmailConfig emailConfig { get; set; }
    public ActionResult OnPostSendEmail()
    {
        var email = emailConfig;
        return null;
    }
    public class EmailConfig
    {
        public string FromAddr { get; set; }
        //public string ToAddr { get; set; }
        public string Body { get; set; }
        public string Subject { get; set; }
        public string Phone { get; set; }
        public string Name { get; set; }
        public string LastName { get; set; }
    }
}

对于客户端 razor 页面，无需指定id="Name" type="text" name="name"并且在使用asp-page-handler="sendemail"不应附加action="" asp-page-handler="sendemail"

<form asp-page-handler="sendemail" id="contact-form" method="post">
    <div class="messages"></div>
    <div class="controls">
        <div class="row">
            <div class="col-md-6">
                <input asp-for="emailConfig.Name" placeholder="Your firstname *" required="required" class="form-control">
            </div>
            <div class="col-md-6">
                <input asp-for="emailConfig.LastName" placeholder="Your lastname *" required="required" class="form-control">
            </div>
            <div class="col-md-6">
                <input asp-for="emailConfig.FromAddr" placeholder="Your email *" required="required" class="form-control">
            </div>
            <div class="col-md-6">
                <input asp-for="emailConfig.Phone" placeholder="Your phone" class="form-control">
            </div>
            <div class="col-md-12">
                <textarea asp-for="emailConfig.Body" placeholder="Message for me *" rows="4" required="required" class="form-control"></textarea>
            </div>
            <div class="col-md-12 text-center">
                <button type="submit" asp-route-data="HttpPostAttribute" asp-page-handler="SendEmail" class="btn btn-outline-primary">Send message</button>
            </div>
        </div>
    </div>
</form>