How do I pass a textbox (DatePicker) variable to my controller using Html.ActionLink?

Question

I have a link that opens a pdf in a new window, without leaving the page. I had this link working...

<script type="text/javascript">
$(function () {

    $("#DatePicker").mask("99/99/9999").datepicker({ maxDate: new Date() });
});
if (document.images) {
    var pic1 = new Image(100, 200);
    pic1.src = '<%=Url.Content("~/images/calendarContent.png") %>'
}
</script>

<%= Html.ActionLink("Click ME", "Controller", "Home", new { id = Model.id }, new { onclick = "stayHomeFunc()"})%></div>

After a review, I have to add a DatePicker function that allows the user to select a date. How do I get to pass that date selection to my controller? This is what I have so far, which returns a null startDate by the way...

Enter Date:<input name="DatePicker" id="DatePicker" type="text" style="width: 80px" />
<%= Html.ActionLink("Click ME", "Controller", "Home", new { id = Model.id, startDate = DatePicker }, new { onclick = "stayHomeFunc()"})%></div>


public ActionResult COntroller(string id, string startDate){...}

Any ideas? Thanks in advance...

Answer 1

You have 2 possibilities:

1. use a submit button inside the form containing the #DatePicker field. This way you don't need to pass anything, when the form is submitted all input values will automatically be sent to the server:

   @using (Html.BeginForm("SomeAction", "Home"))
   {
       @Html.TextBoxFor(x => x.DatePicker)
       <input type="submit" value="Click Me" />
   }
   

2. if you want to use an anchor you will need to use javascript in order to append the value of the datepicker to the query string. So inside your stayHomeFunc function which is triggered when the link is clicked:

   function stayHomeFunc(link) {
       var date = $('#DatePicker').datepicker('getDate');
       var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
       link.href += '?DatePicker=' + formattedDate;
   }
   

   and then don't forget to pass the anchor instance to the onclick event:

   <%= Html.ActionLink(
       "Click ME", 
       "SomeAction", 
       "Home", 
       new { id = Model.id }, 
       new { onclick = "stayHomeFunc(this)"}
   ) %>
   

Personally I would go with the first option as it is semantically more correct and doesn't require any javascript.

Also be careful with the DateTime format that the model binder uses and the differences that exist between GET and POST requests. For more information refer to the following article.

Answer 2

You can also use FormCollection.

VIEW

 @using (Html.BeginForm("SomeAction", "Home"))
{

<input type="text" id="DatePicker"  name="date">
}

CONTROLLER

   public ActionResult SomeAction( FormCollection form)
    {
     var date = form["date"];

               if (date != String.Empty)
                {
                    MyModel model = new MyModel();
                    model.date= DateTime.Parse(date);
                }
       return RedirectToAction("YourNewAction", new {date = model.date});

    }