尝试使用AngularJS保存客户详细信息

时间:2015-10-29 17:38:09

标签: c# angularjs

我正在研究一个MVC应用程序,我无法理解为什么我得到的值很少,因为' null'。

如何将日期值从JavaScript序列化为C#。

查看代码:

@{
    Layout = null;
 }

<!DOCTYPE html>

<html ng-app="mvcCRUDApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>


    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/angular.min.js"></script>

    <script type="text/javascript">
        var app = angular.module("mvcCRUDApp", []);

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

            // save Customer
            this.saveCustomer = function (objCustomer) {
                var response = $http({
                    method: "post",
                    url: "Customer/PostDataResponse",
                    data: JSON.stringify(objCustomer),
                    dataType: "json"
                });
                return response;
            }


        });

        app.controller("mvcCRUDCtrl", function ($scope, crudAJService) {

            $scope.AddCustomer = function () {                

                var objCustomer = {
                    id: "0",
                    Name: $('#txtName').val(),
                    Surname: $('#txtSurname').val(),
                    BirthDate: $('#txtBirthDate').val(),
                    Gender: $('#txtGender').val(),
                    CityId: $('#drpCity').val()
                };

                var getBookData = crudAJService.saveCustomer(objCustomer);
                    getBookData.then(function (msg)
                    {
                        alert(msg.data);                        
                    }, function () {
                        alert('Error in updating book record');
                    });
                }                         
        });

    </script>

    <script>

        $(document).ready(function ()
        {
            $("#drpState").change(function () {
                $("#drpCity").empty();
                $("#drpCity").append('<option value="0">-Select-</option>');
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("SelectCities")',
                    dataType: 'json',
                    data: { Stateid: $("#drpState").val() },
                    success: function (cities) {
                        // cities contains the JSON formatted list
                        // of state id passed from the controller
                        $.each(cities, function (i, city)
                        {
                            $("#drpCity").append('<option value="'
                             + city.id + '">'
                             + city.Name + '</option>');
                        });
                    },
                    error: function (ex)
                    {
                        alert('Failed to retrieve states.' + ex);
                    }
                });
                return false;
            })
        });
    </script>
</head>
<body>
    <div ng-controller="mvcCRUDCtrl">
        <fieldset>
            <table>
                <tr><td>@Html.Label("Name")</td><td>@Html.TextBox("txtName")</td><td>@Html.Label("Surname")</td><td>@Html.TextBox("txtSurname")</td></tr>
                <tr><td>@Html.Label("BirthDate")</td><td>@Html.TextBox("txtBirthDate")</td><td>@Html.Label("Gender")</td><td>@Html.TextBox("txtGender")</td></tr>
                <tr>
                    <td>State</td>
                    <td>@Html.DropDownList("drpState", ViewBag.StateCollection as List<SelectListItem>)</td>
                    <td>City</td>
                    <td>@Html.DropDownList("drpCity", ViewBag.CityCollection as List<SelectListItem>)</td>
                </tr>
                <tr><td><input type="submit" value="Submit" ng-click="AddCustomer()" /></td></tr>
            </table>
        </fieldset>
    </div>
</body>
</html>

Following is THE CODE OF CONTROLLER 

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

namespace DutchProject.Controllers
{
    public class CustomerController : Controller
    {

        DutchEntities db = new DutchEntities();

        //
        // GET: /Customer/

        public ActionResult Index()
        {
            List<SelectListItem> States = new List<SelectListItem>();

            var lstStates = db.States.ToList();

            States.Add(new SelectListItem { Text = "-Select-", Value = "0" });
            foreach (var item in lstStates)
            {
                States.Add(new SelectListItem { Text = item.Name, Value = item.id.ToString() });
            }

            ViewBag.StateCollection = States;


            List<SelectListItem> Cities = new List<SelectListItem>();

            Cities.Add(new SelectListItem { Text = "-Select-", Value = "0" });
            ViewBag.CityCollection = Cities;



            return View();
        }

        [HttpPost]
        public JsonResult SelectCities(int Stateid)
        {
            IEnumerable<City> cities = db.Cities.Where(stat => stat.StateId == Stateid);    // .Where(stat => stat.country_id == id);
            return Json(cities);
        }

        [HttpPost]
        public ContentResult PostDataResponse(Customer objCustomer)
        {
            objCustomer.BirthDate = DateTime.Now;
            objCustomer.Gender = 1;

            db.Customers.Add(objCustomer);
            db.SaveChanges();

            return Content("First name: " + Request.Form["firstName"] +
                " | Last name: " + Request.Form["lastName"] +
                " | Age: " + Request.Form["age"]);
        }

    }
}

1 个答案:

答案 0 :(得分:0)

ASP.NET MVC在控制器操作中传递一个null值,该值为无效值。事先可能对validate the date有所帮助,只是为了确保该值有效。

此外,分配日期而不是字符串可能会有所帮助:

...
var objCustomer = {
                        id: "0",
                        Name: $('#txtName').val(),
                        Surname: $('#txtSurname').val(),
                        BirthDate: new Date($('#txtBirthDate').val()),
                        Gender: $('#txtGender').val(),
                        CityId: $('#drpCity').val()
                    };
...