How can I pass teleriks datepicker value to controller?

Question

Here's my code:

I need to pass the data to the controller.

@{
DateTime today = DateTime.Now; //current date
DateTime firstDay = today.AddDays(-(today.Day - 1)); //first day

today = today.AddMonths(1);
DateTime lastDay = today.AddDays(-(today.Day)); //last day
}
//@using (Html.BeginForm())
//{
//<fieldset>
    <br /><br />
    <h2>Please select date range for the report</h2>
    <table>
        <tr>
            <td>Begin Date</td>
            <td>
                @(Html.Telerik().DatePicker()
                    .Name("BeginDate")
                .ShowButton(true)
                .Value(firstDay)
                )
            </td>
        </tr>

        <tr>
            <td>End Date</td>
            <td>
                @(Html.Telerik().DatePicker()
                            .Name("EndDate")
                .ShowButton(true)
                        .Value(lastDay)
                )
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Show Report" />
            </td>
        </tr>

    </table>
//</fieldset>

//}

The datepicker was not bound to model, I need the value for the grid data which I'm using. (telerik grid ajax)

Also i want to prevent the user to enter an Enddate that is larger than the BeginDate

Thanks

Answer 1

You can send an ajax request to the controller passing the values of the datepickers. When you get the result, bind the grid to the result.

<input type="button" value="Display Grid" class="button" onclick="displayGrid()" title="Display grid using selected dates."/>


function displayGrid() {
  var grid = $('#Grid').data('tGrid');
  var beginDate = document.getElementById('BeginDate').value;
  var endDate = document.getElementById('EndDate').value;
  $.ajax(
  {
    type: 'POST',
    url: '/Home/NameOfActionMethod/',
    dataType: 'json',
    data: { bdate: beginDate, edate: endDate },
    success: function (result) {
      grid.dataBind(result);
    },
    error: function (req, status, error) {
      alert("Sorry! Error. " + status + error);
    }
  });
}