javascript - AngularJS 中的数组未获取字符串值

Question

我目前正在从事一个会计项目，并且遇到了一个愚蠢的问题。我在文本框中输入值，然后单击“添加人员”按钮，这些值被添加，但是当我单击“保存到数据库”按钮时，多个添加的值被推送到数据库中。我能够在数据库中插入多个值，但无法将 SQL 服务器中的多个条目再次调用回我的 UI。

我的 SQL Server 表中有多个相同的名字，我想选取具有相同名字的所有值并将它们填充到我在 Angular 代码中定义的 $scope.arr 中。

当我在 $scope.GetPerson() 方法中传递整数值时，我得到了所需的结果，并且我的数组 ($scope.arr) 填充了具有相同 CustomerCode 的所有值，但是当我传递字符串值时即 GetPerson 方法中的 FirstName，我的数组($scope.arr)不会填充与放入数据库中的相同名字值。我希望专家们研究一下这个问题并指导我到底在哪里犯了错误。`

我的模型:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace TestProj.Models
{
    public class TestModel
    {
        public int ID { get; set; }
        public int CustomerCode { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public decimal Debit { get; set; }
        public decimal Credit { get; set; }
    }
}

我的 Angular JS 脚本:

var app = angular.module("TestApp", []);

app.controller("TestCtrl", function ($scope, TestService) {

    $scope.arr = [];


    GetAllPers();
    function GetAllPers() {
        var getPersData = TestService.getPersons();
        getPersData.then(function (Persons) {
            $scope.persons = Persons.data;
        }, function () {
            alert('Error in getting Person records');
        });
    }

    $scope.addPerson = function () {
        var obj = {
            CustomerCode: $scope.customercode,
            FirstName: $scope.firstname,
            LastName: $scope.lastname,
            Debit: $scope.debit,
            Credit: $scope.credit,
        };
        $scope.arr.push(obj);
    };

    $scope.savePerson = function () {
        var TestData = TestService.AddPer($scope.arr);
        TestData.then(function (msg) {
            $scope.customercode = "";
            $scope.firstname = "";
            $scope.lastname = "";
            $scope.debit = "";
            $scope.credit = "";
            GetAllPers();
            alert(msg.data);
            for (var i = 0; i < $scope.arr.length; i++) {
                $scope.arr.pop();
            }
        }, function () {
            alert('Error In Adding Person');
        });
    };

    $scope.GetPerson = function (test) {
        var getTestData = TestService.getPers(test.FirstName);
        getTestData.then(function (_test) {
            $scope.arr = _test.data;
        }, function () {
            alert('Error in getting person records');
        });
    }

});

app.service("TestService", function ($http) {

    this.getPersons = function () {
        return $http.get("/Test/GetAllPers");
    }

    this.AddPer = function (person) {
        var response = $http({
            method: "post",
            url: "/Test/AddPerson",
            data: JSON.stringify(person),
            dataType: "json",
        });
        console.log(response);
        return response;
    }

    this.getPers = function (persname) {
        var response = $http({
            method: "post",
            url: "/Test/GetPersonByFName",
            params: {
                firstname: JSON.stringify(persname)
            }
        });
        return response;
    }
});

我的 C# Controller :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TestProj.Models;

namespace TestProj.Controllers
{
    public class TestController : Controller
    {
        TestContext dc = new TestContext();
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetAllPers()
        {
            var personList = dc.TestModels.ToList();
            return Json(personList, JsonRequestBehavior.AllowGet);
        }
        public JsonResult GetPersonByFName(string firstname)
        {
            var q = (from ab in dc.TestModels.Where(b => b.FirstName == firstname) select ab);
            return Json(q, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public string AddPerson(List<TestModel> test)
        {
            bool val = false;
            foreach (var t in test)
            {
                if (t != null)
                {
                    dc.TestModels.Add(t);
                    val = true;
                }
                else
                {
                    val = false;
                }
            }
            dc.SaveChanges(); //save context at the end, when no error occurs
            if (val == true)
            {
                return "Success";
            }
            else
            {
                return "Failed";
            }
        }
    }
}

我的 HTML:

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div ng-controller="TestCtrl">
    <form>
        <button class="btn" data-toggle="modal" data-target="#myModal">Show records</button><br />
        Customer Code: <input class="form-control" ng-model="customercode" /><br />
        FirstName: <input class="form-control" ng-model="firstname" /><br />
        LastName: <input class="form-control" ng-model="lastname" /><br />
        Debit: <input class="form-control" ng-model="debit" /><br />
        Credit: <input class="form-control" ng-model="credit" /><br />
        <button class="btn btn-success" ng-click="addPerson()">Add Person</button>
        <button class="btn btn-success" ng-click="savePerson()">Save To DB</button>

        @*Table for showing pushed values*@
        <table class="table table-bordered">
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Debit</th>
                <th>Credit</th>
            </tr>
            <tr ng-repeat="a in arr">
                <td>{{a.CustomerCode}}</td>
                <td>{{a.FirstName}}</td>
                <td>{{a.LastName}}</td>
                <td>{{a.Debit}}</td>
                <td>{{a.Credit}}</td>
            </tr>
        </table>
        @*Modal popup*@
        <div class="modal fade" role="dialog" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4>Persons</h4>
                    </div>
                    <div class="modal-body">
                        <label class="control-label col-md-2" style="width: auto">Search:</label>
                        <div class="col-md-8">
                            <input class="form-control" ng-model="searchfor" />
                        </div><br />
                        <table class="table table-hover">
                            <tr>
                                <td><b>First Name</b></td>
                                <td><b>Last Name</b></td>
                                <td><b>Debit</b></td>
                                <td><b>Credit</b></td>
                                <td><b>Select</b></td>
                            </tr>
                            <tr ng-repeat="b in persons | filter:searchfor ">
                                <td>{{b.CustomerCode}}</td>
                                <td>{{b.FirstName}}</td>
                                <td>{{b.LastName}}</td>
                                <td>{{b.Debit}}</td>
                                <td>{{b.Credit}}</td>
                                <td>
                                    <button type="button" class="btn btn-success" ng-click="GetPerson(b)" data-dismiss="modal">Select</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Okay</button>
                    </div>
                </div>
            </div>
        </div><br />
    </form>
</div>

<script src="~/Scripts/MyAngular/Module.js"></script>

Answer 1

问题出在您的 getPers() 上。添加 JSON.stringify() 会将 " 添加到您的字符串中。

应该这样使用:

this.getPers = function (persname) {
    var response = $http({
        method: "post",
        url: "/Test/GetPersonByFName",
        params: {
            firstname: persname
        }
    });
    return response;
}