Как сделать так, чтобы пользовательский интерфейс имел загрузочные 4 вкладки, которые делают пост при каждом нажатии кнопки? - PullRequest
Новая
       19

Как сделать так, чтобы пользовательский интерфейс имел загрузочные 4 вкладки, которые делают пост при каждом нажатии кнопки?

0 голосов
/ 30 января 2019

Я использую загрузчик 4 с токеном на предъявителя в ядре asp.net 2.2.Я хотел бы создать вкладки, чтобы пользователь мог лучше ориентироваться.С чего мне начать?Я посмотрел код моего коллеги, и у него только один метод post во всей форме.Есть ли способ отправлять данные в базу данных каждый раз, когда я щелкаю запрос на публикацию.

Я пытался поместить на страницу cshtml только следующий раздел кода моего коллеги.'' '

<div id="pills" class='wizardpills'>
        <ul class="form-wizard">
            <li><a href="#pills-tab1" data-toggle="tab"><span>Basics</span></a></li>
            <li><a href="#pills-tab2" data-toggle="tab"><span>Profile</span></a></li>
            <li><a href="#pills-tab3" data-toggle="tab"><span>Contact</span></a></li>
            <li><a href="#pills-tab4" data-toggle="tab"><span>Settings</span></a></li>
            <li><a href="#pills-tab5" data-toggle="tab"><span>Portfolio</span></a></li>
        </ul>
        <div id="bar" class="progress active">
            <div class="progress-bar progress-bar-primary " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>
    </div>
'''

My code looks like the following:
_NewDesign.cshtml(shared layout page)
'''
@using PhillipCapital.Entity.DataObjects

@{
    //int length = menu.Count;

}

<html5>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.4.8/collection/icon/icon.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" crossorigin="anonymous"></script>
        @*<link rel="stylesheet" type="text/css" href="~/css/newdesign.css">*@
        <script src="~/js/jquery-3.3.1.min.js"></script>
        <script src="~/js/index.js"></script>
        <script src="~/js/ApplicantType.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.1.2/css/intlTelInput.css">
    </head>

    <style>
        .advanceBar {
            width: 100%;
            background-color: #eaf0f4;
            height: 10px;
            padding-top: 25px;
        }

        .milestone {
            float: left;
            height: 50px;
            width: 50px;
            transform: translateY(-30px);
        }

            .milestone .content {
                height: 50px;
                width: 50px;
                border-radius: 25px;
            }

            .milestone .barBackground {
                height: 10px;
                transform: translateY(30px);
            }

        .advance {
            float: left;
            height: 10px;
        }

        .active {
            background-color: #5cb85c;
        }

        .inactive {
            background-color: #eaf0f4;
        }

        .active .fa {
            color: white;
            transform: translateY(15px);
        }

        .inactive .fa {
            color: #99a2a8;
            transform: translateY(15px);
        }
    </style>

    <body>

        <!--<section class="multi_step_form">
    <div class="advanceBar" id="advanceBar">
        <div class="advance active" style="width:15%;">&nbsp;</div>
        <div class="milestone">
            <div class="barBackground active">&nbsp;</div>
            <div class="content active"><i class="fa fa-anchor"></i></div>
        </div>

        <div class="advance active" style="width:15%;">&nbsp;</div>
        <div class="advance active" style="width:15%;">&nbsp;</div>
        <div class="milestone">
            <div class="barBackground active">&nbsp;</div>
            <div class="content active"><i class="fa fa-beer"></i></div>
        </div>
        <div class="advance active" style="width:15%;">&nbsp;</div>
        <div class="advance active" style="width:15%;">&nbsp;</div>
        <div class="milestone">
            <div class="barBackground inactive">&nbsp;</div>
            <div class="content inactive"><i class="fa fa-globe"></i></div>
        </div>
        <div class="advance inactive" style="width:15%;">&nbsp;</div>
    </div>
    <!--<form id="msform">
        <!-- Tittle
        <div class="title">
            <h2>Verification Process</h2>
            <p>In order to use this service, you have to complete this verification process</p>
        </div>
        <!-- progressbar
        <ul id="progressbar">

        </ul>

    </form>-->
        <!--</section>-->
        <div id="pills" class='wizardpills'>
            <ul class="form-wizard">
                <li><a href="#pills-tab1" data-toggle="tab"><span>Basics</span></a></li>
                <li><a href="#pills-tab2" data-toggle="tab"><span>Profile</span></a></li>
                <li><a href="#pills-tab3" data-toggle="tab"><span>Contact</span></a></li>
                <li><a href="#pills-tab4" data-toggle="tab"><span>Settings</span></a></li>
                <li><a href="#pills-tab5" data-toggle="tab"><span>Portfolio</span></a></li>
            </ul>
            <div id="bar" class="progress active">
                <div class="progress-bar progress-bar-primary " role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
            </div>
        </div>

        @RenderBody()
    </body>
</html5>

Я пытаюсь заставить меню работать так, чтобы пользователь мог переходить на другие страницы, но после отправки, которая похожа на страницу 10, пользователь не может вернуться.Любая помощь приветствуется.

1 Ответ

0 голосов
/ 30 января 2019

Вы можете поймать событие клика на вкладке и сделать форму сообщения через AJAX.Однако, это действительно только решает часть вашей проблемы.На стороне сервера вам нужно каким-то образом сохранить частичные данные формы, скорее всего, через TempData.

Однако форма на основе вкладок обычно лучше обрабатывать полностью на стороне клиента, пока выготов предоставить все данные.Используйте проверку на стороне клиента, чтобы убедиться, что каждый раздел завершен и действителен, прежде чем позволить пользователю перейти к следующей вкладке.Вы также можете использовать localStorage для сохранения каждого шага по мере продвижения пользователя.Это позволит им даже уйти и вернуться позже, чтобы продолжить заполнение формы.Просто не забудьте очистить localStorage при окончательной отправке, чтобы данные не сохранялись вечно.

Вам по-прежнему нужна проверка на стороне сервера, поскольку проверка на стороне клиента может быть неполной или даже подделанной.Это также означает, что пользователь может быть отправлен обратно в форму после публикации.Вы можете автоматически перейти на вкладку с ошибками, например, при загрузке страницы: 

var tab = $('.field-validation-invalid').eq(0).closest('.tab-pane').attr('id');
$('#' + tab).tab('show');
...