html - 模态注册确认提交

Question

我有一个 asp.net core Razor-Pages 项目，它只是一个注册表单，我希望用户使用 Bootstrap Modal 确认其数据是否正确并提交，以便在模型中运行该方法。 我怎样才能从模态中的表单中获取用户数据来确认它？

CSHTML

<form method="post" asp-action="OnPost">
    <div class="form-group">
        <label>Tragen Sie die Bezeichnung Ihres Pharmazeutischen Unternehmers ein.</label>
        <input asp-for="Company" type="text" class="form-control" id="validationCustom01" placeholder="Pharmazeutischer Unternehmer" required>
    </div>
    <div class="form-group">
        <label>Tragen Sie Ihren vollen Namen ein.</label>
        <input asp-for="Name" type="text" class="form-control" id="validationCustom02" placeholder="Vor- und Nachname" required>
    </div>

    <div class="form-group">
        <label>Tragen Sie Ihre E-Mail-Adresse ein.</label>
        <input asp-for="Email" type="email" class="form-control" id="validationCustom02" placeholder="E-Mail-Adresse" required>
    </div>

    <div class="form-group">
        <label>Tragen Sie bitte Ihre Vorwahl und Telefonnummer ein.</label>
        <input asp-for="Phone" type="tel" class="form-control" id="validationCustom02" placeholder="Telefon">
    </div>

    <div class="form-group">
        <label>Kommentare</label>
        <textarea asp-for="Comment" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>

    <!-- Button to Open the Modal -->
    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Anfrage Senden
    </button>
    <button type="submit" class="btn btn-primary">
        Anfrage Senden
    </button>
</form>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Bestätingen</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Sind Sie sicher, dass Sie alles richtig angegeben haben? <br />
                Wenn ja, klicken Sie auf "Senden".
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Zurück</button>
                <button type="submit" class="btn btn-primary">Senden</button>
            </div>
        </div>
    </div>
</div>

这是我想在 PageModel 中运行的方法

public IActionResult OnPost([FromForm] string Firma, string Name, string Email, string Telefon, string Kommentar)
{
            EmailService email = new EmailService
            {
                Company = Firma,
                Name = Name,
                Email = Email,
                Phone = Telefon,
                Comment = Kommentar
            };
            email.SendEmail();
            return Page();
        }
    }
}

Answer 1

您可以使用javascript来控制模型。代码及测试结果如下所示。

RazorPage 代码

@page "/register"
@model RegisterModel

<h3>@ViewData["confirmation"]</h3>
<form class="form-horizontal" method="post">
    <div class="form-group">
        <label>Tragen Sie die Bezeichnung Ihres Pharmazeutischen Unternehmers ein.</label>
        <input asp-for="Firma" type="text" class="form-control" id="validationCustom01" placeholder="Pharmazeutischer Unternehmer" required>
    </div>
    <div class="form-group">
        <label>Tragen Sie Ihren vollen Namen ein.</label>
        <input asp-for="Name" type="text" class="form-control" id="validationCustom02" placeholder="Vor- und Nachname" required>
    </div>

    <div class="form-group">
        <label>Tragen Sie Ihre E-Mail-Adresse ein.</label>
        <input asp-for="Email" type="email" class="form-control" id="validationCustom02" placeholder="E-Mail-Adresse" required>
    </div>

    <div class="form-group">
        <label>Tragen Sie bitte Ihre Vorwahl und Telefonnummer ein.</label>
        <input asp-for="Telefon" type="tel" class="form-control" id="validationCustom02" placeholder="Telefon">
    </div>

    <div class="form-group">
        <label>Kommentare</label>
        <textarea asp-for="Kommentar" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>

    <!-- Button to Open the Modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        Anfrage Senden
    </button>
    <!-- <button type="submit" class="btn btn-primary">
        Anfrage Senden
    </button> -->
</form>

<!-- The Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Bestätingen</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                Sind Sie sicher, dass Sie alles richtig angegeben haben? <br />
                Wenn ja, klicken Sie auf "Senden".
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Zurück</button>
                <button id="confirm" type="submit" class="btn btn-primary">Senden</button>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script>
    $(function () {
        $('#confirm').on('click', function (e) {
            e.preventDefault();

            $("form.form-horizontal").submit();
             $("#myModal").modal('hide');

            return false;
        });
    });
</script>

PageModel代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using RazorPageApplication.Model;

namespace RazorPageApplication.Pages
{
    public class RegisterModel : PageModel
    {
        public string Firma { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Telefon { get; set; }
        public string Kommentar { get; set; }

        public IActionResult OnPost([FromForm] string Firma, string Name, string Email, string Telefon, string Kommentar)
        {
            EmailService email = new EmailService
            {
                Company = Firma,
                Name = Name,
                Email = Email,
                Phone = Telefon,
                Comment = Kommentar
            };
            email.SendEmail();

            ViewData["confirmation"] = $"{Name}, information will be sent to {Email}";
            return Page();
        }
    }
}

EmailService模型代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace RazorPageApplication.Model
{
    public class EmailService
    {
        public string Company { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Comment { get; set; }
        public void SendEmail() { }
    }
}

测试结果:

不带模态的帖子

使用模态发布