将数据从视图发送到控制器

Question

Inside my view I have two jquery date input fields with two buttons for processing those date selections. On the first button I'm send data over ajax and display data inside some div which works perfect.

Beside that button I have one more button which displays data inside pdf document. Ofcourse I do not want to use ajax for that but I do want to use same selected date data (I do now want to use two more inputs for handling user selection).

so my view code snippet is something like this

<tr>
    <td>@Html.TextBox("dateFrom", null, new { @class = "date", @id = "datePickerFrom" })</td>
    <td>@Html.TextBox("dateTo", null, new { @class = "date", @id = "datePickerTo" })</td>
    <td>
        <input type="submit" value="Send" class="dateBtn" /></td>
     <td>
        <input type="submit" value="PDF" class="dateBtnPdf" />
     </td>

</tr>

and I'm having js which handles click handler and send data to the controller for ajax manipulation

$(document).ready(function () {
   $(".dateBtn").click(function (event) {
      var dateFrom = $("#datePickerFrom").val();
      var dateTo = $("#datePickerTo").val();
      GetDetails(dateFrom, dateTo);
   })
function GetDetails(dateFrom, dateTo) {
    $.ajax({
..... ommited on purpose

so my question is how can I send this selected values to the controller for the second button which will not use ajax (do I need to use form and if so how to use this same input fields to grab value which will be sent to the controller?)

 $(".dateBtnPdf").click(function (event) {
   var dateFrom = $("#datePickerFrom").val();
   var dateTo = $("#datePickerTo").val();

   //send values to the controller /report/pdfDemo
 })

Thanks

Answer 1

I see few solutions to this situation, i suggest the one you are close to:

<form id="form-dates" action"/report/pdfDemo"> <!-- Here you could use @Url.Action("pdfDemo","report") -->

@Html.Hidden("dateFromPdf");
@Html.Hidden("dateToPdf");

<input type="submit" value="PDF" class="dateBtnPdf" />

</form>

And in your javascript, update the hidden values of the form and submit it:

$(".dateBtnPdf").click(function (event) {
   $('[name="dateFromPdf"]').val( $("#datePickerFrom").val() );
   $('[name="dateToPdf"]').val( $("#datePickerTo").val() );

   $('#form-dates').submit();
   //send values to the controller /report/pdfDemo
 })