Question

我正在开发一个程序，我必须将家庭成员的名字和姓氏和年龄添加到SQL数据库中。我试图在我的AngularJS代码中获取JSON对象，以便在我的C＃代码隐藏中对我的create（添加到数据库）方法进行POST。任何帮助将不胜感激。

这是我的family1.aspx：

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="family1.aspx.cs" Inherits="WebApplication6.family1" %>

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="familyCtrl">

<h2>Family App</h2>

<form ng-submit="addPerson()">
    <input type="text" ng-model="firstNameInput" size="20" placeholder="First Name" />
    <input type="text" ng-model="lastNameInput" size="20" placeholder="Last Name" />
    <input type="number" ng-model="ageInput" size="20" placeholder="Age" />
    <!--<input type ="number" ng-model="monthInput" stye=20 placeholder="Month" />/
    <input type ="number" ng-model="dayInput" stye=20 placeholder="Day" />/
    <input type ="number" ng-model="yearInput" stye=20 placeholder="Year" />-->

    <input type="submit" value="Add New Person">
</form> 

<br>

<table style ="width:50%">
    <tr><td>Name</td><td>Age</td><td>Remove</td></tr>
        <tr>
        <td>
          <div ng-repeat="per in family"><span ng-bind="per.FirstName"></span>&nbsp;<span ng-bind="per.LastName"></span></div>
             </td>

               <td> <div ng-repeat="per in family"><span ng-bind="per.Age"></span></div>

                </td>

                <td><div ng-repeat="per in family"><input type="checkbox" ng-model="per.IsActive" ></div></td>
            </tr>
        </table>
<p><button ng-click="remove()">Remove marked</button></p>

<script>
var app = angular.module('myApp', []); 
app.controller('familyCtrl', function($scope) {
    $scope.family = <%Response.Write(jsonString);%>;//[{ Name: "Joe", Age: 19 }, { Name: "Gabby", Age: 16 }];

    $scope.addPerson = function () {
        $http.post("/family1.aspx.cs/create",{FirstName : $scope.firstNameInput, LastName : $scope.lastNameInput, Age : $scope.ageInput});
    $scope.firstNameInput="";
    $scope.lastNameInput="";
    $scope.ageInput="";

};

    $scope.remove = function() {
        var oldFamily = $scope.family;
        $scope.family = [];
        angular.forEach(oldFamily, function(per) {
            if ((!per.IsActive)) 
                $scope.family.push(per);

        });
    };
});
</script>
    </body>
</html>

这是我的代码隐藏的family1.aspx.cs：

namespace WebApplication6
{
    public partial class family1 : System.Web.UI.Page
    {
        public string jsonString;
        protected void Page_Load(object sender, EventArgs e)
        {
            JavaScriptSerializer js = new JavaScriptSerializer();    //serializing JSON
            jsonString = js.Serialize(this.GetAllPeople());
        }


        public List<Person> GetAllPeople()
        {
            List<Person> ppl = new List<Person>();

            using (var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["FamilyAppConnectionString"].ConnectionString))
            {
                var command = new SqlCommand("dbo.Person__Read", conn);
                command.CommandType = System.Data.CommandType.StoredProcedure;

                conn.Open();
                var reader = command.ExecuteReader();
                var dataTable = new DataTable();
                dataTable.Load(reader);

                foreach (DataRow row in dataTable.Rows)
                {
                    Person person = new Person(row["FirstName"].ToString(), row["LastName"].ToString(), (int)row["Age"]);
                    ppl.Add(person);
                }

            }
            return ppl;
        }
        [HttpPatch]
        public void create(Person p)
        {

            using (var conn = new SqlConnection(ConfigurationManager.ConnectionStrings["FamilyAppConnectionString"].ConnectionString))
            {
                var command = new SqlCommand("dbo.Person__Create", conn);
                command.CommandType = System.Data.CommandType.StoredProcedure;

                command.Parameters.Add(new SqlParameter("FirstName", p.FirstName));
                command.Parameters.Add(new SqlParameter("LastName", p.LastName));
                command.Parameters.Add(new SqlParameter("Age", p.Age));

                conn.Open();
                command.ExecuteNonQuery();
            }
        }
    }
}

对于Person对象，我也有一个C＃：Person.cs：

    namespace WebApplication6
    {

        public class Person
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public int Age { get; set; }
            public bool IsActive { get; set; }

            public Person(string firstName,string lastName, int age)//int month, int day, int year)
            {
                this.FirstName = firstName;
                this.LastName = lastName;
                this.Age = age;              
                this.IsActive = false;
}
}
}

如何让JSON对象在后端C＃代码中发布

0 个答案: