Проверка и отправка веб-страницы, состоящей из динамических вкладок, содержащих каждую из них форму (отправка набора вложенных форм одним щелчком мыши)
Я работаю над проектом с ASP.NET MVC 5 (C #), AngularJS 1.6, HTML5, Bootstrap 3.3 и SQL Server 2014. Я столкнулся с проблемой проверки и отправки веб-страницы, состоящей из динамических вкладок, содержащих каждую из них форму. Я хочу проверить правильность каждой формы (содержащейся на вкладке), а затем отправить все формы одним нажатием кнопки "Отправить" для сохранения в базе данных SQL Server.
Как я могу это сделать? (У меня есть идея поместить набор форм в список форм, но я не знаю, как это сделать (я видел, что могу использовать ng-форму, содержащуюся в форме, и использовать REST Web API).
Я приведу вам пример, чтобы полностью понять мою потребность и помочь мне, если это возможно, рассказав мне о типах переменных и шагах, которые нужно выполнить для front-end и back-end.
SupportDemande.cshtml по :
<script src="~/Scripts/tether.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-animate.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/Scripts/angular-aria.min.js"></script>
<script src="~/Scripts/angular-messages.min.js"></script>
<script src="~/ScriptsJS/SupportDemande/SupportDemandeApp.js"></script>
<div ng-app="supportDemandeApp" ng-controller="supportDemandeCtrl" class="supportDemande" role="tabpanel" ng-cloak>
<ul class="nav nav-tabs" role="tablist" tabindex="selectedIndex">
<li class="active" role="presentation" ng-repeat="revue in revues" ng-click="selectRevue($index)" ng-class="{'active':selectedRevue == $index}">
<a data-target="#revue" aria-controls="home" role="tab" data-toggle="revue">
Revue {{revue.id}}
<span ng-click="supprimerRevue($index)" ng-if="$index > 0" class="glyphicon glyphicon-remove"></span>
</a>
</li>
</ul>
<form class="tab-content" id="revueListe" name="revueListe" ng-model="revueListe" method="post" ng-submit="submitSupportDemande()" novalidate="">
<div class="tab-pane fade in active" role="tabpanel" id="revue" ng-model="revue">
<revue-tab ng-model="revueTab"></revue-tab>
</div>
</form>
<br /> <br /> <br />
<div class="form-group" style="text-align:center">
<div class="col-lg-10 col-lg-offset-2">
<button type="reset" class="btn btn-default" id="annuler" name="annuler">Cancel</button>
<button type="submit" class="btn btn-primary" id="envoyer" name="envoyer" style="margin-left:10px" ng-disabled="!validSupportDemande()">Submit</button>
</div>
</div>
</div>
RevueTabTemplate.html :
<ng-form class="form-horizontal" id="revueForm" name="revueForm" ng-model="revueForm" method="post" ng-submit="submitRevueForm()" novalidate="">
<br />
<fieldset>
<legend>Données de la revue</legend>
<div style="padding:25px;margin-top:-30px;margin-bottom:-10px">
<div class="form-group">
<label for="nomDemandeur" class="col-lg-2 control-label">First Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="nomDemandeur" name="nomDemandeur" ng-model="nomDemandeur" required />
<div class="help-block col-lg-9" ng-messages="revueForm.nomDemandeur.$error" ng-if="revueForm.nomDemandeur.$touched">
<span ng-message="required">Required</span>
</div>
</div>
</div>
<div class="form-group">
<label for="prenomDemandeur" class="col-lg-2 control-label">Last Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="prenomDemandeur" name="prenomDemandeur" ng-model="prenomDemandeur" required />
<div class="help-block col-lg-9" ng-messages="revueForm.nomDemandeur.$error" ng-if="revueForm.nomDemandeur.$touched">
<span ng-message="required">Required</span>
</div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': revueForm.emailDemandeur.$touched && revueForm.emailDemandeur.$invalid }">
<label for="emailDemandeur" class="col-lg-2 control-label">Email<span style="color:red"> *</span></label>
<div class="col-lg-10">
<input type="email" class="form-control" id="emailDemandeur" name="emailDemandeur" ng-model="emailDemandeur" required />
<div class="help-block col-lg-9" ng-messages="revueForm.emailDemandeur.$error" ng-if="revueForm.emailDemandeur.$touched">
<span ng-message="required">Required</span>
<span ng-message="email">Invalid Email</span>
</div>
</div>
</div>
</div>
</fieldset>
<br />
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-info" ng-click="ajouterRevue()" ng-disabled="!validSupportDemande()">Add a revue</button>
<button class="remove btn btn-danger" style="margin-left:10px" ng-click="supprimerRevue($index)" ng-disabled="$index > 0"><!--ng-if="$last"-->Delete this revue</button>
</div>
</ng-form>
SupportDemandeApp.js :
///<reference path="../Scripts/angular.min.js" />
///<reference path="../Scripts/angular-route.min.js" />
var supportDemandeApp = angular.module('supportDemandeApp', ['ngMessages']);
supportDemandeApp.directive('revueTab',
function () {
return {
restrict: 'EA',
templateUrl: '/ScriptsJS/SupportDemande/RevueTabTemplate.html'
}
}
);
supportDemandeApp.controller('supportDemandeCtrl', ['$scope', '$filter', supportDemandeCtrl]);
function supportDemandeCtrl($scope, $filter) {
//I'm using this function because in my actual form, I can not have all required fields filled in because I process several validation rules, and I use ng-if and ng-show to make appear or disappear some required fields. In brief, I use it to force validation of the form so that all the fields are valid (even if they are not filled).
$scope.validRevueForm = function () {
if ($scope.nomDemandeur &&
$scope.prenomDemandeur &&
$scope.emailDemandeur) {
$scope.revueForm.$setValidity('required', true);
return true;
}
else {
$scope.revueForm.$setValidity('required', false);
return false;
}
};
//Submit Revue Form
$scope.submitRevueForm = function () {
if ($scope.validRevueForm() === true) {
return true;
}
};
//Submit List Revues Form
$scope.submitSupportDemande = function () {
if ($scope.submitRevueForm() === true) {
alert('Support de demande envoyé avec succès');
return true;
}
};
//Tabs 'Revues'
$scope.revues = [{
id: 1,
content: $scope.revue
}]
$scope.counter = 1;
/** Function to add a new tab **/
$scope.ajouterRevue = function () {
$scope.counter++;
$scope.revues.push({ id: $scope.counter, content: $scope.revue });
$scope.selectedTab = $scope.revues.length - 1; //set the newly added tab active.
}
/** Function to delete a tab **/
$scope.supprimerRevue = function (index) {
if ($scope.revues.length > 0) {
$scope.revues.splice(index, 1); //remove the object from the array based on index
$scope.counter--;
}
}
$scope.selectedTab = 1; //set selected tab to the 1st by default.
/** Function to set selectedTab **/
$scope.selectTab = function (index) {
$scope.selectedTab = index;
}
}
SupportDemande.в CS :
public class SupportDemande
{
public List<Revue> GetData()
{
try
{
List<Revue> revues = new List<Revue>();
for (int i = 0; i < 1; i++)
{
Revue revue = new Revue();
revue.RevueID = i;
//revue.RevueContent = "informations sur la revue " + i;
revues.Add(revue);
}
return revues;
}
catch (Exception)
{
throw new NotImplementedException();
}
}
}
Revue. cs :
public class Revue
{
public int RevueID { get; set; }
public String Nom { get; set; }
public String Prenom { get; set; }
public String Email { get; set; }
}
SupportController. cs :
[Authorize]
[HandleError]
[RoutePrefix("Supports")]
public class SupportsController : Controller
{
public ActionResult SupportDemande()
{
return View("SupportDemande");
}
//GET: /Supports/
public JsonResult RevueData()
{
BEMF_REVUES.Models.SupportDemande supportDemande = new SupportDemande();
var myList = supportDemande.GetData();
return Json(myList, JsonRequestBehavior.AllowGet);
}
Что я уже пробовал:
ng-форма в форме и шаблоне html