Senden mehrerer Kontrollkästchen-Auswahl in ASP.NET MVC-Formular mit Angular JS

Question

Ich habe ein Formular mit Textfelder, Dropdown-Listen und Kontrollkästchen. Ich habe die Herausforderung, mehrere Checkbox-Elemente in der Datenbank einzureichen. Die Daten haben gesendet, aber nur den letzten überprüften Artikel auf dem Formular übermittelt.

Hier ist meine UI

<div class="block type-3"> 
    <div class="container"> 
     <div class="row post animated fadeInUp"> 
      <div class="col-xs-12 form-block"> 
       <div ng-controller="tutorequestController"> 
        <form name="tutrequestform" novalidate> 
         <div class="form-text">Required fields are <span class="text-blue">*</span>. Fill out the form and we'll contact you soon</div> 
         <div class="row"> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.firstname" name="firstname" type="text" class="form-input" placeholder="Firstname *" required /> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.lastname" name="lastname" type="text" class="form-input" placeholder="Lastname *" required /> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.phonenumber" name="phonenumber" type="number" class="form-input" placeholder="Phone Number *" required /> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.phonenumber2" name="phonenumber2" type="number" class="form-input" placeholder="Re-type Phone Number *" required /> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.emailaddress" name="emailaddress" type="email" class="form-input" placeholder="Email Address *" required /> 
          </div> 
          <div> 
           <div ng-controller="stateLGAController"> 
            <div class="col-xs-12 col-sm-6"> 
             <!--<select ng-change="GetStateLgas()" ng-options="moreState as moreState.state1 for moreState in moreStates track by moreState.state_id" ng-model="select" class="form-input"><option>Select Your State</option></select>--> 
             <select ng-model="tutorRequest.state_id" ng-change="GetStateLgasByid(tutorRequest.state_id)" 
               ng-options="moreState.state_id as moreState.state1 for moreState in moreStates" class="form-input"> 
              <option>Select Your State</option> 
             </select><!----> 
            </div> 
            <div class="col-xs-12 col-sm-6"> 
             <select ng-model="tutorRequest.lga_id" 
               ng-options="lga.lga_id as lga.local_govt for lga in stateLGA" class="form-input"> 
              <option>Select Your L.G.A</option> 
             </select> 
            </div> 
           </div> 
          </div> 
          <div class="col-xs-12"> 
           <textarea ng-model="tutorRequest.address" class="form-input" name="address" placeholder="House Address *" required></textarea> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.numofchild" name="numofchild" class="form-input"> 
            <option value='Select-Number-of-Child-for-Tutor'>Select number of Child/ren for Tutor</option> 
            <option value='1'>1</option> 
            <option value='2'>2</option> 
            <option value='3'>3</option> 
            <option value='4'>4</option> 
            <option value='5'>5</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.classrangeandage" class="form-input" name="classrangeandage" type="text" required placeholder="Class range of each child and age respectively *" /> 
          </div> 
          <div class="col-xs-12 form-text"> 
           <span class="text-blue">What subject would the tutor teach? Tick appropriate subject below.</span> 
          </div> 
          <div ng-app="app" ng-controller="subjectController"> 
           <div ng-repeat="sub in tutorRequest.tutorsubject" class="col-xs-12 col-sm-4"> 
            <div class="chBoxPad"> 
             <input ng-model="tutorRequest.tutorsubject[$index].checked" type="checkbox" id="{{sub.sub_id}}" name="{{sub.subject1+'_'+$index}}" ng-change="updateChecked()" /> 
             <label for="{{sub.sub_id}}"><span></span>{{sub.subject1}}</label> 
            </div> 
           </div> 
          </div> 

          <div class="col-xs-12"> 
           <select ng-model="tutorRequest.preferredsexoftutor" name="sex" id="sex" class="form-input"> 
            <option value="preferredsexoftutor" selected="selected">Preferred Sex of Tutor</option> 
            <option value="any">Any</option> 
            <option value="Male">Male</option> 
            <option value="Female">Female</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.childcurrentschool" name="childcurrentschool" type="text" class="form-input" placeholder="Current School of Child *" required /> 
          </div> 
          <div class="col-xs-12"> 
           <select ng-model="tutorRequest.schoolcurriculum" name="schoolcurriculum" id="curi" class="form-input"> 
            <option value="">What curriculum does the school use</option> 
            <option value="Not Sure">Not Sure</option> 
            <option value="British Curriculum">British Curriculum</option> 
            <option value="American Curriculum">American Curriculm</option> 
            <option value="Nigerian Curriculum">Nigerian Curriculum</option> 
            <option value="Combination of British and Nigerian">Combination of British and Nigerian</option> 
            <option value="Question doesnt apply to me">Question doesn't apply to me</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.urgencyoftutor" name="urgencyoftutor" id="urgencyoftutor" class="form-input"> 
            <option value="">Urgency of tutor</option> 
            <option value="Urgently" selected="selected">Urgently</option> 
            <option value="In 1 Week">In a Week</option> 
            <option value="In 2 Weeks">In 2 Weeks</option> 
            <option value="In a Month">In a Month</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.calltime" name="calltime" id="calltime" class="form-input"> 
            <option value="" selected="selected">What time of the day would you like to be called</option> 
            <option value="Anytime">Anytime</option> 
            <option value="8 to 12">Morning - between 8am and 12noon</option> 
            <option value="12 to 3">Afternoon - between 12noon to 3pm</option> 
            <option value=" 3 to 6">Evening - between 3pm to 6pm</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.frequencyoftutor" name="frequencyoftutor" id="frequencyoftutor" class="form-input"> 
            <option value="">How many times a week would you like the tutor to come</option> 
            <option value="1">Once a week</option> 
            <option value="2">2 times a week</option> 
            <option value="3">3 times a week</option> 
            <option value="4">4 times a week</option> 
            <option value="5">5 times a week</option> 
            <option value="6">6 times a week</option> 
            <option value="7">7 times a week</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.tutorhrs" name="tutorhrs" id="tutorhrs" class="form-input"> 
            <option value="">How many hours per day should tutoring hold</option> 
            <option value="1" selected="selected">1 hr</option> 
            <option value="2">2 hrs</option> 
            <option value="3">3 hrs</option> 
            <option value="4">4 hrs</option> 
            <option value="5">5 hrs</option> 
            <option value="6">6 hrs</option> 
            <option value="7">7 hrs</option> 
           </select> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <input ng-model="tutorRequest.goal" name="goal" type="text" class="form-input" placeholder="Specific goal for tutoring session" required /> 
          </div> 
          <div class="col-xs-12 col-sm-6"> 
           <select ng-model="tutorRequest.howdidyouhearaboutus" name="howdidyouhearaboutus" class="form-input"> 
            <option value="">How did you hear about us</option> 
            <option value="Google" selected="selected">Google</option> 
            <option value="Facebook">Facebook</option> 
            <option value="I got an SMS from Prepschool">I got an SMS from Prepschool</option> 
            <option value="Twitter">Twitter</option> 
            <option value="Nairaland">Nairaland</option> 
            <option value="I saw a flyer">I saw a flyer</option> 
            <option value="Prepschool Brochure">Prepschool Brochure</option> 
            <option value="A friend/member of household">A friend/member of household</option> 
            <option value="Other">Other</option> 
           </select> 
          </div> 
         </div> 
         <div class="col-xs-12"> 
          <span class="button"> 
           <button type="submit" class="submit" ng-click="CreateTutRequest(tutorRequest, tutrequestform.$valid)">Submit Request</button> 
          </span> 
          <!--<td><input type="submit" ng-click="CreateEmployee(Emp, myForm.$valid)" value="Create" /></td> 
       <td><input type="submit" ng-click="UpdateEmployee(Emp)" value="Update" /></td>--> 
          <span class="success"></span> 
         </div> 

        </form> 
       </div> 
      </div> 
     </div> 

    </div> 
</div> 

Und hier ist die eine teilweise grafische Darstellung der Benutzeroberfläche im Bildformat. Und hier ist mein angularJs Controller für die Seite.

myApp.factory('crudServiceTutorrequest', function ($http) { 
    // Create an object and start adding methods to the object. 
    crudTutRObj = {}; 

    // Add create method to the crudTutRObj 
    crudTutRObj.getAll = function() { 
     var tutorRequests; 

     tutorRequests = $http({ method: 'GET', url: '/Tutorrequest/Index' }). 
     then(function (response) { 
      return response.data; 
     }); 
     return tutorRequests; 
    } 

    crudTutRObj.getStates = function() { 
     var ddlStates; 

     ddlStates = $http({ method: 'GET', url: '/States/Index' }). 
     then(function (response) { 
      return response.data; 
     }); 
     return ddlStates; 
    } 

    crudTutRObj.getSubject = function() { 
     var Subjects; 

     Subjects = $http({ method: 'GET', url: '/Subject/Index' }). 
     then(function (response) { 
      return response.data; 
     }); 
     return Subjects; 
    } 

    crudTutRObj.createTutRequest = function (tutRequest) { 
     var tutorRequest; 

     tutorRequest = $http({ method: 'POST', url: '/Tutorrequest/Create', data: tutRequest }). 
      then(function (response) { 
       return response.data; 
      }); 
     return tutorRequest; 
    } 

    crudTutRObj.getById = function (id) { } 

    crudTutRObj.update = function (fms) { } 

    crudTutRObj.deleteById = function (id) { } 

    return crudTutRObj; 
}); 

myApp.controller('tutorequestController', function ($scope, crudServiceTutorrequest) { 

    // Get all tutorRequests 
    //crudServiceTutorrequest.getAll().then(function (result) { 
    // $scope.tutorRequests = result; 
    //}) 

    // Get data for states to populate the states dropdownlist 
    crudServiceTutorrequest.getStates().then(function (result) { 
     $scope.moreStates = result; 
    }) 

    // Submit the form with the create function 
    $scope.CreateTutRequest = function (tutorRequest) { 
     crudServiceTutorrequest.createTutRequest(tutorRequest).then(function (result) { 
      $scope.Msg = "Tutor Request has been submitted successfully!"; 
     }); 
    } 
}); 

myApp.controller('stateLGAController', function ($scope, $http) { 

    $scope.GetStateLgas = function() { 
     $http({ method: 'Get', url: '/StateLGA/Index' }) 
     .then(function (response) { 
      $scope.stateLGA = response.data; 
     }); 
    }; 

    $scope.GetStateLgasByid = function (state_id) { 
     $http({ method: 'Get', url: '/StateLGA/GetlgaByStateid/' + state_id }) 
     .then(function (response) { 
      $scope.stateLGA = response.data; 
     }); 
    }; 
}); 

angular.module("app", []).controller('subjectController', ['$scope', function ($scope, crudServiceTutorrequest) { 
    var subjects; 
    subjects = crudServiceTutorrequest.getSubject().then(function (result) { 
     $scope.subjects = result; 
    }) 

    $scope.tutorRequest = { 
     tutorsubject: subjects 
    }; 

    angular.forEach($scope.subjects, function (subject) { 
     var sub = angular.merge({ checked: false }, subject); 
     $scope.tutorRequest.tutorsubject.push(sub); 
    }); 

    $scope.allSubjectChecked = []; 
    $scope.updateChecked = function() { 
     console.log($scope.tutorRequest.tutorsubject); 
     $scope.allSubjectChecked = []; 
     angular.forEach($scope.tutorRequest.tutorsubject, function (sub) { 
      if (sub.checked) { 

       $scope.allSubjectChecked.push(sub); 
      } 
     }); 
    } 
}]); 

Und schließlich die JS-Datei ist Routen alle Seiten in den ng-Ansicht

var myApp = angular.module("myApp", ['ngRoute']); 

myApp.config(function ($routeProvider) { 
    $routeProvider.when('/Department', { 
     templateUrl: 'Templates/Admin/Department/Department.html', 
     controller: 'departmentController' 
    }); 
    $routeProvider.when('/Employee', { 
     templateUrl: 'Templates/Admin/Employee/Employee.html', 
     controller: 'employeeController' 
    }); 
    $routeProvider.when('/Aboutus', { 
     templateUrl: 'Templates/User/Aboutus/Aboutus.html', 
     controller: '' 
    }); 
    $routeProvider.when('/Contactus', { 
     templateUrl: 'Templates/User/Contactus/Contactus.html', 
     controller: '' 
    }); 
    $routeProvider.when('/Tutorregistration', { 
     templateUrl: 'Templates/User/Tutorregistration/Tutorregistration.html', 
     controller: '' 
    }); 
    $routeProvider.when('/Tutorrequest', { 
     templateUrl: 'Templates/User/Tutorrequest/Tutorrequest.html', 
     controller: 'tutorequestController' 
    }); 
    $routeProvider.otherwise({ 
     redirectTo: '/Home', 
     templateUrl:'Templates/User/Home/Home.html' 
    }); 
}); 

Würde Ihre Hilfe bei diesem zu schätzen wissen.

Answer 1

Die Probleme liegen in der Tatsache, dass Sie für jedes Thema das gleiche ng-Modell verwenden. Angular erstellt kein Array für eine Liste von Kontrollkästchen, Sie müssen jedes Kontrollkästchen an ein separates Modell binden.

Der beste Weg, dies zu tun ist es, Sie alle Werte möglich tutorsubject zu initialisieren und zu einem Feld auf false wie folgt festgelegt ‚checked‘:

angular.module("app", []).controller("ctrl", ['$scope', function($scope){ 
 
    $scope.tutorRequest = {tutorsubject : [{sub_id:1, subject1:"Foo"}, 
 
            {sub_id:2, subject1:"Foo2"}]}; 
 
    angular.forEach($scope.subjects,function(subject){   
 
      var sub = angular.merge({checked:false}, subject); 
 
      $scope.tutorRequest.tutorsubject.push(sub); 
 
    }); 
 
    
 
    $scope.allSubjectChecked = []; 
 
    $scope.updateChecked = function(){ 
 
    console.log($scope.tutorRequest.tutorsubject); 
 
    $scope.allSubjectChecked = []; 
 
    angular.forEach($scope.tutorRequest.tutorsubject, function(sub){ 
 
     if(sub.checked){ 
 

 
      $scope.allSubjectChecked.push(sub); 
 
     } 
 
    }); 
 
    } 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat="sub in tutorRequest.tutorsubject" class="col-xs-12 col-sm-4"> 
 
     <div class="chBoxPad" > 
 
      <input ng-model="tutorRequest.tutorsubject[$index].checked" type="checkbox" id="{{sub.sub_id}}" name="{{sub.subject1+'_'+$index}}" ng-change="updateChecked()"/> 
 
      <label for="{{sub.sub_id}}"><span></span>{{sub.subject1}}</label> 
 
     </div> 
 
    </div> 
 
    <h2> Subject selected : </h2> 
 
    <div ng-repeat="selected in allSubjectChecked"> 
 
     <span ng-bind="selected.subject1"></span><br/> 
 
    </div> 
 
</div>

Natürlich, wenn diese Art und Weise Speichern der Daten stimmen nicht mit Ihrem Backend überein; Sie können sie beim Übermitteln des Formulars filtern. Um anzuzeigen das Modell nicht zu ändern, wenn das zu tun, führen Sie dies im Ergebnis eines var myData = angular.merge({},$scope.tutorRequest);

EDIT: von Beispielcode ändern Snippet Arbeits

Answer 2

Das Problem könnte sein, dass MVC einen Kontrollkästchenwert nicht bindet, wenn es falsch ist. Versuchen Sie dies stattdessen:

<div ng-controller="subjectController"> 
    <div ng-repeat="sub in subjects" class="col-xs-12 col-sm-4"> 
     <div class="chBoxPad"> 
      <input ng-model="tutorRequest.tutorsubject" type="checkbox" id="{{sub.sub_id}}" name="{{sub.subject1}}" ng-true-value="{{sub.sub_id}}" /> 
      <input type="hidden" value="false" name="{{sub.subject1}}" /> 
      <label for="{{sub.sub_id}}"><span></span>{{sub.subject1}}</label> 
     </div> 
    </div> 
</div> 

Wenn das Kontrollkästchen falsch ist, wird das ausgeblendete Feld übergeben. Wenn es wahr ist, werden stattdessen zwei Felder zur gleichen Zeit eingereicht (falsch und wahr), und MVC wird das als einen "wahren" Wert erhalten.

Ich weiß, es klingt seltsam, aber dass es wie MVC funktioniert. Sie können dies selbst sehen, wenn Sie @ Html.CheckBoxFor() verwenden. Sie haben die gleiche Ausgabe.