Send (Pass) input type date value from View to Controller using AngularJS in ASP.Net MVC

Last Reply 12 days ago By dharmendr

Posted 12 days ago

Hi,

I have 2 textboxes

currently issue is that after clicking go button relevant values are coming to debugging but that values are not coming to controller

@{
    Layout = null;
}
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="~/scripts/attendanceentry.js"></script>
    <script src="~/masters/dirpagination.js"></script>   
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Go1 = function () {
                var fd = $scope.FDate;
                var td = $scope.TDate;
                $.post("/home/Edit1/", { Fdate: fd, tdate: td }, function (r) {

                });
            }
        });
    </script>
</head>
<body ng-app="MyAp" ng-controller="MyControllerr">
    <div class="container">       
        <div id="wrapper" class="clearfix" >
            <div class="well">
                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-4">
                           <label for="FDate">From Date</label>
                           <input type="date" ng-model="FDate" id="FDate" name="FDate" class="form-control" required />
                        </div>
                        <div class="col-md-4">
                            <label for="lblTDate">To Date</label>
                            <input type="date" ng-model="TDate" id="TDate" name="TDate" class="form-control" required />
                        </div>
                    </div>
                    <hr />
                    <div class="form-group">
                        <p><button class="btn btn-success btn-sm"ng-click="Go1()">Go</button></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

[HttpPost]
public JsonResult Edit1( DateTime? Fdate, DateTime? tdate)
{
}
Posted 12 days ago

Hi mahesh213,

Change the below lines.

mahesh213 says:
var fd = $scope.FDate;
                var td = $scope.TDate;

Check the below code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public JsonResult Edit1(DateTime? Fdate, DateTime? tdate)
    {
        return Json("");
    }
}

View

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope, $window) {
            $scope.Go1 = function () {
                var fd = $scope.FDate.toISOString().split('T')[0];
                var td = $scope.TDate.toISOString().split('T')[0];
                $.post("/Home/Edit1/", { Fdate: fd, tdate: td }, function (r) {

                });
            }
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <div class="container">
        <div id="wrapper" class="clearfix">
            <div class="well">
                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-4">
                            <label for="FDate">
                                From Date</label>
                            <input type="date" ng-model="FDate" id="FDate" name="FDate" class="form-control"
                                required />
                        </div>
                        <div class="col-md-4">
                            <label for="lblTDate">
                                To Date</label>
                            <input type="date" ng-model="TDate" id="TDate" name="TDate" class="form-control"
                                required />
                        </div>
                    </div>
                    <hr />
                    <div class="form-group">
                        <p>
                            <button class="btn btn-success btn-sm" ng-click="Go1()">
                                Go</button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot