我应该如何获取表单的输入，并将该输入发送到C＃类？ ASP.Net核心 - Razor Pages

Question

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

我跟着This Tutorial实际发送电子邮件。但是我没有任何东西可以发送，因为我无法将我的输入传递给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

简单来说，您可以使用Razor Model绑定从客户端向服务器发送信息。

对于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; }
    }
}

对于客户端剃刀页面，没有必要指定id="Name" type="text" name="name"，你不应该在使用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>

Answer 2

我认为您输入参数的名称与您在ajax代码OnPostSendEmail中发布的不同（字符串fromAddr，字符串主题，字符串正文，字符串电话，字符串firstName，字符串LastName）

这是ajax代码的数据部分：

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

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