如何使用AngularJS处理MVC的日期

时间:2016-06-18 09:58:06

标签: angularjs asp.net-mvc

我有输入日期时间,我正在传递日期。

无论我通过什么价值,但它始终给予" 01/01/0001 00:00:00"。

以下是我使用过的代码。我在表格ng-submit上调用AddUpdateEmployee()。​​

型号: -

   public partial class Employee
{
    public int Id { get; set; }
    public string name { get; set; }
    public DateTime DOB { get; set; }
    public string Gender { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
    public string Address { get; set; }
    public DateTime JoiningDate { get; set; }
    public int DepartmentID { get; set; }
    public int DesignationID { get; set; }
}

查看: -

 <form name="form.userForm" ng-submit="AddUpdateEmployee()" novalidate >
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">{{Action}} Employee Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-horizontal validationcheck">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Name :</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="text" class="form-control" data-modal="modal" filter="anything" ng-model="employeeName" placeholder="Employee's Name" ng-required="true" required="required" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>DOB :</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="datetime" class="form-control myCalendar" ng-model="employeeDOB" data-modal="modal" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Gender:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8" ng-required="true">
                                        <input type="radio" title="Male" data-modal="modal" ng-model="employeeGender" value="Male" />
                                        Male
                                    <input type="radio" title="Female" data-modal="modal" ng-model="employeeGender" value="Female" />
                                        Female
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Email:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="email" class="form-control" data-modal="modal" ng-model="employeeEmail" placeholder="Employee's Email" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Mobile:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="text" class="form-control" data-modal="modal" ng-model="employeeMobile" placeholder="Employee's Mobile" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Address:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="text" class="form-control" data-modal="modal" ng-model="employeeAddress" placeholder="Employee's Address" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Joining Date:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <input type="datetime" class="form-control myCalendar" data-modal="modal" ng-model="employeeJoiningDate" ng-required="true" />
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Department:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <select id="ddlDepartment" class="form-control ddlDepartment" data-modal="modal" ng-model="employeeDepartment" ng-options="dep.Id as dep.DepartmentName for dep in departments" ng-required="true">
                                            <option value="" selected>--Select Department--</option>
                                            @* <option data-ng-repeat="dep in departments" value="{{dep.Id}}">{{dep.DepartmentName}}</option>*@
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;">
                                        <b>Designation:</b>
                                    </div>
                                    <div class="col-md-8 col-sm-8">
                                        <select id="ddlDesignation" class="form-control ddlDesignation" data-modal="modal" ng-model="employeeDesignation" ng-options="dsg.Id as dsg.DesignationName for dsg in designations" ng-required="true">
                                            <option value="" selected>--Select Designation--</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-md-2 col-sm-2" style="margin-left: 20px; color: #5bc0de;"></div>
                                    <div class="col-md-8 col-sm-8">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <input type="submit" class="btnAdd btn btn-success" value="Save" ng-disabled="form.userForm.$invalid" />
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>


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

控制器: -

      public string UpdateEmployee(Employee Emp)
    {
        if (Emp != null)
        {
            using (EmpEntities dataContext = new EmpEntities())
            {
                int no = Convert.ToInt32(Emp.Id);
                var employeeList = dataContext.Employees.Where(x => x.Id == no).FirstOrDefault();
                employeeList.name = Emp.name;
                employeeList.DOB = Emp.DOB;                    
                employeeList.Gender = Emp.Gender;
                employeeList.Email = Emp.Email;
                employeeList.Mobile = Emp.Mobile;
                employeeList.Address = Emp.Address;
                //employeeList.JoiningDate = Convert.ToDateTime(Emp.JoiningDate.ToString("dd/MM/yyyy hh:mm"));
                employeeList.JoiningDate = Emp.JoiningDate;
                employeeList.DepartmentID = Emp.DepartmentID;
                employeeList.DesignationID = Emp.DesignationID;
                dataContext.SaveChanges();
                return "Employee Updated Successfully";
            }
        }
        else
        {
            return "Invalid Employee";
        }
    }

Angular Controller调用其服务: -

$scope.AddUpdateEmployee = function () {
    //alert('here');
    var Employee = {
        Name: $scope.employeeName,
        DOB: $scope.employeeDOB,
        Gender: $scope.employeeGender,
        Email: $scope.employeeEmail,
        Mobile: $scope.employeeMobile,
        Address: $scope.employeeAddress,
        JoiningDate: $scope.employeeJoiningDate,
        DepartmentID: $scope.employeeDepartment,
        DesignationID: $scope.employeeDesignation
        //alert();
    };

    var getAction = $scope.Action;

    if (getAction == "Edit") {
        Employee.Id = $scope.employeeId;
        var getData = myService.updateEmp(Employee);
        getData.then(function (msg) {
            // GetAllEmployee();
   }

响应其控制器的角度函数(响应角度控制器的角度服务函数): -

   this.updateEmp = function (employee) {
    var response = $http({
        method: "post",
        url: "/Employee/UpdateEmployee",
        data: JSON.stringify(employee),
        dataType: "json"
    });
    return response;
}

1 个答案:

答案 0 :(得分:0)

例如,在发送之前转换日期值 如果您使用日期插件JQuery等,请将其格式设置为除dd/mm/yyyy之外的格式,并将其转换为您的API除外格式yyyy-mm-dd

// here convert before you sent it with your Angualr Service
var apiDateFormat = Employee.DOB.split('/'); // ["MM", "dd", "yyyy"]
Employee.DOB = apiDateFormat[2]+ '-' +apiDateFormat[0] + '-'+ apiDateFormat[1];
// send it now... $http service