Comment implémenter plusieurs formulaires à l'aide des onglets Bootstrap et des modèles de pages Razor. Actuellement, j'utilise les onglets Bootstrap et les vues partielles pour implémenter cela. Maintenant, quel est le problème, c'est que j'ai environ 8 formulaires à remplir, donc le maintien de toutes les actions côté serveur sur une seule page est compliqué. Quelqu'un pourrait-il me guider à ce sujet. voici à quoi ressemble ma page. entrez la description de l'image ici

Voici à quoi ressemble ma structure de dossiers entrez la description de l'image ici

Le nom du fichier surligné en jaune aura les onglets de navigation.

Donc StaffOnboarding.cshtml aimera ça.

@page
@model Contractor_HRMS.Pages.Staff.Onboarding.StaffOnboardingModel
@{
    ViewData["Title"] = "Staff Onboarding";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h4>STAFF ONBOARDING</h4>
<hr />

<div>
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <a class="nav-link 
               href="/Staff/Onboarding/StaffDetails">StaffDetails</a>
        </li>
        <li class="nav-item">
            <a class="nav-link 
               href="/Staff/Onboarding/Biodata">Biodata</a>
        </li>
        <li class="nav-item">
            <a class="nav-link 
               href="/Staff/Onboarding/EduQualification">EduQualification</a>
        </li>
        <li class="nav-item">
            <a class="nav-link 
               href="/Staff/Onboarding/Assets">Assets</a>
        </li>
    </ul>
</div>

Par défaut, il devrait charger le contenu dans la page StaffDetails. et lorsque je clique sur le bouton Enregistrer, il devrait enregistrer les détails et pouvoir passer à l'onglet suivant. lorsque je clique sur d'autres onglets, le contenu HTML des formulaires respectifs doit être rendu.

0
Teena 19 nov. 2020 à 07:38

1 réponse

Meilleure réponse

Maintenant, quel est le problème, c'est que j'ai environ 8 formulaires à remplir, donc le maintien de toutes les actions côté serveur sur une seule page est compliqué.

Vous pouvez avoir une page de rasoir pour chaque onglet. J'ai fait un exemple comme ci-dessous :

Ce sont les pages de rasoir :

enter image description here

Et j'utilise Unobtrusive AJAX pour soumettre le formulaire. Vous devez le télécharger dans votre projet et le référencer dans votre page :

enter image description here

StaffOnboarding.cshtml( La vue principale ) :

@page
@model WebApplication4.Pages.Staff.Onboarding.StaffOnboardingModel
@{
    ViewData["Title"] = "Staff Onboarding";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h4>STAFF ONBOARDING</h4>
<hr />

<div>
    <ul class="nav nav-tabs justify-content-center">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" role="tab" aria-controls="StaffDetails"
               href="#StaffDetails">StaffDetails</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Biodata"
               href="#Biodata">Biodata</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="EduQualification"
               href="#EduQualification">EduQualification</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" role="tab" aria-controls="Assets"
               href="#Assets">Assets</a>
        </li>
    </ul>
</div>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="StaffDetails" role="tabpanel" aria-labelledby="home-tab">

    </div>
    <div class="tab-pane fade" id="Biodata" role="tabpanel" aria-labelledby="profile-tab">

    </div>
    <div class="tab-pane fade" id="EduQualification" role="tabpanel" aria-labelledby="contact-tab">

    </div>
    <div class="tab-pane fade" id="Assets" role="tabpanel" aria-labelledby="contact-tab">

    </div>
</div>


@section scripts
{
    <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "/Staff/Onboarding/StaffDetails",
                type: "get",
                success: function (result) {
                    $("#StaffDetails").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Onboarding/Biodata",
                type: "get",
                success: function (result) {
                    $("#Biodata").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Onboarding/EduQualification",
                type: "get",
                success: function (result) {
                    $("#EduQualification").html(result);
                }
            })

            $.ajax({
                url: "/Staff/Onboarding/Assets",
                type: "get",
                success: function (result) {
                    $("#Assets").html(result);
                }
            })
        })

        function firstCompleted() {
            $('a[href="#Biodata"]').tab('show');
        }
        function secondCompleted() {
            $('a[href="#EduQualification"]').tab('show');
        }
        function thirdCompleted() {
            $('a[href="#Assets"]').tab('show');
        }
        function forthCompleted() {
            alert("All Submit")
        }
    </script>
}

StaffDetails.cshtml :

@page
@model WebApplication4.Pages.Staff.Onboarding.StaffDetailsModel

@{
    Layout = null;
}

<h1>StaffDetails</h1>
<form asp-page-handler="Assests" 
      data-ajax="true"
      data-ajax-method="post"
      data-ajax-complete="firstCompleted">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail1" placeholder="Email">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword1" placeholder="Password">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

StaffDetails.cshtml.cs :

public class StaffDetailsModel : PageModel
{
    public ActionResult OnGet()
    {
        
    }
    public void OnPost()
    {
        //do some stuff 
    }
}

Pour plus de simplicité, j'ai utilisé la même mise en page que StaffDetails.cshtml pour les autres pages. Ce qui doit être changé, c'est data-ajax-complete="", chaque formulaire a une fonction complétée indépendante.

Mise à jour:

J'ai défini l'attribut [Required] sur les propriétés du modèle pour les rendre obligatoires.

public class User
{
    [Required]
    public string Email { get; set; }
    [Required]
    public string Password { get; set; }
}

Détails du personnel.cshtml :

@page
@model WebApplication4.Pages.Staff.Onboarding.StaffDetailsModel

@{
    Layout = null;
}

<h1>StaffDetails</h1>
<form asp-page-handler="StaffDetails" 
        data-ajax="true"
        data-ajax-method="post"
        data-ajax-complete="firstCompleted">
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" asp-for="@Model.user.Email">
            <span asp-validation-for="@Model.user.Email" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" asp-for="@Model.user.Password">
            <span asp-validation-for="@Model.user.Password" class="text-danger"></span>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10">
            <button type="submit" class="btn btn-primary">Submit</button>
        </div>
    </div>
</form>

Et dans le gestionnaire de page, déterminez s'il est valide lorsque vous soumettez le formulaire.

public class StaffDetailsModel : PageModel
{
    public User user { get; set; }

    public void OnGet()
    {
        
    }
    public IActionResult OnPost(User user)
    {
        if (ModelState.IsValid)
        {
            return new OkResult();
        }
        return Page();
    }
}

Ensuite, dans la méthode ajax terminée, déterminez s'il faut passer à l'onglet suivant ou afficher les informations de vérification du formulaire sous l'onglet actuel par les données renvoyées.

function firstCompleted(event) {
    if (event.responseText != "") {
        $("#StaffDetails").html(event.responseText);
    } else {
        $('a[href="#Biodata"]').tab('show');
    }
}

function secondCompleted(event) {
    if (event.responseText != "") {
        $("#Biodata").html(event.responseText);
    } else {
        $('a[href="#EduQualification"]').tab('show');
    }
}

function thirdCompleted(event) {
    if (event.responseText != "") {
        $("#EduQualification").html(event.responseText);
    } else {
        $('a[href="#Assets"]').tab('show');
    }
}

function forthCompleted(event) {
    if (event.responseText != "") {
        $("#Assets").html(event.responseText);
    } else {
        alert("All Submit")
    }
}

Résultat:

enter image description here

1
mj1313 23 nov. 2020 à 09:37