使用c#中的angularjs保存批量数据

时间:2016-12-09 09:45:55

标签: angularjs asp.net-mvc c#-4.0

HTML页面代码`

<div class="panel-heading">Question Answers Form</div>
<div class="panel-body">
    <form class="form-horizontal" role="form" id="questionanswersForm" name="questionanswersForm">
        <div class="form-group">
            <label for="questionpaper" class="col-sm-3 control-label">QuestionPaper</label>
            <div class="col-sm-6">
                <select class="form-control" name="questionpaper" id="questionpaper" ng-model="question.questionpaperid" required>
                    <option value="">---Please select---</option>
                    <option ng-selected="{{questionpaper.questionpaperid==question.questionpaperid}}" ng-repeat="questionpaper in questionpapers" value="{{questionpaper.questionpaperid}}">
                        {{questionpaper.questionpapername}}
                    </option>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label for="question" class="col-sm-3 control-label">Question</label>
            <div class="col-sm-6">
                <input type="text" id="question" name="question" class="form-control"
                       ng-model="question.questions" ng-required="true" placeholder="question" />
            </div>
        </div>

        <div class="form-group">
            <label for="question" class="col-sm-3 control-label">Answers</label>
            <table class="col-sm-6">

                    <tr ng-repeat="row in vm.rows">
                        <td>
                            <input type="radio"  class="form-control" name="group" ng-model="row.iscorrect"  />
                            </td>
                            <td>
                            <input type="text" class="form-control" ng-model="row.answertext" ng-readonly="row.reado" ng-disabled="row.reado" on-focus="!row.readonly" ng-blur="vm.addNewRow(false,'')" />
                        <!--</td>
                        <td>
                            <input type="text" class="form-control" ng-model="row.value" ng-readonly="row.readonly" ng-disabled="row.readonly" ng-blur="vm.addNewRow('','')" />-->
                        </td>
                        <td>
                            <button ng-click="vm.editRow($index)">{{row.readonly ? "Edit" : "Save" }}</button>
                            <button ng-click="vm.removeRow($index)">Remove</button>
                        </td>
                    </tr>

            </table>
            </div>



            <div class="form-group">
                <div class="col-md-4 col-md-offset-3 col-sm-3 col-sm-offset-3 ">
                    <button id="cancelSave" name="cancelSave" class="btn btn-warning"
                            ng-click="cancel()">
                        <i class="glyphicon glyphicon-thumbs-down"></i> Cancel
                    </button>
                    <button id="submitButton" name="submitButton" class="btn btn-primary"
                            ng-click="saveQuestionAnswers()">
                        <i class="glyphicon glyphicon-thumbs-up"></i> Save
                    </button>
                    <button id="deleteButton" name="submitForm" class="btn btn-danger"
                            data-ng-show="isEdit"
                            ng-click="modalDelete('md',question)">
                        <i class="glyphicon glyphicon-trash"></i> Delete
                    </button>
                </div>
            </div>

     `

Js控制器代码是

contactApp.controller('questionAnsersAddController',
['$scope', 'questionpaperDataService', 'questionDataService', '$window',
function categoryController($scope, questionpaperDataService, questionDataService, $window) {



    var vm = this;
    vm.rows = [{ "iscorrect": false, "answertext": "", "reado": false }];

    vm.addNewRow = function (value,name ) {

        if (vm.rows.length <0) {

            vm.rows.push({ "iscorrect": false, "answertext": "", "reado": false })
            vm.rows[vm.rows.length - 2].readonly = true;
        }
        else {
           // alert('you are creating more than 4 answers!');

            vm.rows.push({ "iscorrect": false, "answertext": "", "reado": false })
            vm.rows[vm.rows.length - 2].reado = true;
        }
    }      

    vm.removeRow = function (index) {
        vm.rows.splice(index, 1);
    }

    vm.editRow = function (index) {
        vm.rows[index].reado = !vm.rows[index].reado;
    }

    $scope.question = {};
    $scope.dt = [];
    $scope.isEdit = false;  



    $scope.questionpapers = [];

    loadQuestionPaperData();

    function loadQuestionPaperData() {
        questionpaperDataService.getQuestionPapers()
        .then(function () {
            $scope.questionpapers = questionpaperDataService.questionpapers;
        },
            function () {
                //Error goes here...
            })
            .then(function () {
                $scope.isBusy = false;
            });
    };

    $scope.cancel = function () {
        $window.location = "#/question";
    };

    $scope.saveQuestionAnswers = function () {         
        if ($scope.questionanswersForm.$invalid) return;
        $scope.dt[0] = vm.rows[0];

        alert(angular.isArray($scope.dt));
      //  $scope.dt = JSON.stringify(vm.rows);
            //vm.rows;
            //

        questionDataService.addQuestionAnswers($scope.question, {dt: vm.rows })
        .then(function () {
            $window.location = "#/question";
        },
        function () {
            //Error        
        })
    };
}]);

JS数据服务

contactApp.factory('questionDataService', ['$http', '$q',
function ($http, $q) {



    var _addQuestionAnswers = function (_questionansers, dt) {
        var deferred = $q.defer();
        var controllerQuery = "question/InsertQuestionAnswers";

        $http.post(controllerQuery, _questionansers, dt)
          .then(function (result) {
              //Success
              deferred.resolve();
          },
          function (error) {
              // Error
              deferred.reject();
          });
        return deferred.promise;
    };




    return {

        addQuestionAnswers: _addQuestionAnswers

    }
}]);

CS控制器代码

 [HttpPost]
    [ActionName("InsertQuestionAnswers")]
    public async Task InsertQuestionAnswers(question _question, List<answer> dt)
    {
        try
        {
            await ClientFactory.HelloWorldClient.InsertQuestionAnswersAsync(_question,dt);
        }
        catch (Exception)
        {

            throw;
        }

    }

当我单击页面上的“保存”按钮时,数据显示在js控制器中,并且还显示在js数据服务中 在CS控制器中,列表dt显示为空。

请帮助我

1 个答案:

答案 0 :(得分:0)

根据您的代码

$http.post(controllerQuery, _questionansers, dt)
      .then(function (result) {
          //Success
          deferred.resolve();
      },
      function (error) {
          // Error
          deferred.reject();
      });
    return deferred.promise;

从angularjs documentation,发布接受3个参数:

  

post(url,data,[config]);

所以我认为 _questionansers dt 必须作为一个对象传递。

希望有所帮助