Search code examples
htmljqueryasp.net-corebootstrap-modalrazor-pages

Modal Register confirmation submit

I have an asp.net core Razor-Pages Project a just a register form and I want that the user confirm with a Bootstrap Modal that are his data correct with submit, to run the method in the Model. And how can I get the User Data from the form in the Modal to confirm it?

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>

This is the method that I want to run in the 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();
        }
    }
}
Solution

  • You could use javascript to control Model. Codes and test result is shown below.

    Codes of 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>

    Codes of 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();
        }
    }
}

    Codes of EmailService model

    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() { }
    }
}

    Test Result:

    Post without Modal

    enter image description here

    Post with Modal

    enter image description here