-1

I am trying to invoke an action on a controller when changing the value in a DatePicker. Whenever the javascript runs the 'requestDate' parameter is null. Thank you , in advance for your expertise.

Controller

[HttpPost]
public ActionResult GetSummaryByDate(string requestDate)
{
    return View(_acctSummary);
}

View

<form  name= "SummaryForm" method="post" >
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                Date
                <input id="DateQry" type="text" class="datepicker" >style="width:70px" name="requestDate"  >        
            </div>
        </div>
    </div>
</form>

Partial

@Html.Partial("_SummaryList", @Model)

Javascript

$('.datepicker').on('change', function (e) {
    $.post('AcctSummary/GetSummaryByDate', {'string':e.date});
});
Eonasdan
  • 7,563
  • 8
  • 55
  • 82
FerSher
  • 9
  • 1
  • 3

2 Answers2

0
  1. Set your input type to date (currently you have set it to text)
  2. Pass the 'value' property (e.value) to your controller
Sparrow
  • 2,548
  • 1
  • 24
  • 28
  • This may or may not be correct. There is no need to setup the input to date if using a datepicker, in fact, that may cause the datepicker to not work. `e.value` will not necessarily have the date in it either. – Eonasdan Aug 22 '16 at 21:44
0

Make sure that you are sending the date value with the same parameter name as of your action method parameter name. Also you can use $(this).val() to get the current value of the input.

Your action method parameter name is requestDate. So let's use the same when we send data.

$('.datepicker').datepicker();  //enable date picker

$('.datepicker').on('change', function (e) {
  $.post('AcctSummary/GetSummaryByDate', { requestDate : $(this).val()},function(res){
      // do something with the response
      console.log(res);
  });
});

You might also consider using the Url.Action html helper method to build the correct relative url to the action method instead of hardcoding it.

So in your razor view,

<script>
  var summaryUrl = "@Url.Action("GetSummaryByDate","AcctSummary")";
  // use this in your following js code
</script>

Here is a detailed post about passing these url's generated by html helper methods to your javascript code.

Community
  • 1
  • 1
Shyju
  • 214,206
  • 104
  • 411
  • 497
  • Shyju - When the parameter names matches, it worked. Thank you very much. The @Url.Action method did not work for me, because in my testing, it would only response to Click event like in a button and not Change events. I am a new to StackOverflow. Do I need to close this question and is this the way to thank you? – FerSher Aug 22 '16 at 22:17
  • Url.Action is a server method and it should generate the correct url. I do not know what you mean by "only response to click event". BTW, If the answer helped, you can upvote/& mark this as answer (check the tick mark next to votes), I guess that is the way to thank people who helps you :) Thanks – Shyju Aug 22 '16 at 22:27