MVC2.0 : Retaining Datepicker control values after submit button RSS

• • Reply
  

  ASHISH_TECHI...

  Member

  1 Points

  20 Posts

  MVC2.0 : Retaining Datepicker control values after submit button

  Nov 25, 2012 01:47 PM|LINK

  Hi Everyone,

  I've been using jQuery UI Datepicker v1.8 control for selecting a date range ("startdate" and "enddate" ), for retrieval of records from database table.

  After clicking the submit button the datepicker control sets back to its default values. I've set the default value of "startdate" as "First date of Month" and the "enddate" default value is set to current date.

  Now I want to retain the values of datepicker control after submit button is clicked i.e. after "Post" action.

  Can anyone please share some tips and code examples to perform this operation using MVC2.0 and .net 3.5.

  Thanks in advance.

  Ashish

• • Reply
  

  CPrakash82

  All-Star

  18290 Points

  2844 Posts

  Re: MVC2.0 : Retaining Datepicker control values after submit button

  Nov 25, 2012 02:55 PM|LINK

  ASHISH_TECHIT

  Now I want to retain the values of datepicker control after submit button is clicked i.e. after "Post" action.

  After post, you need to return the model again with appropriete values and assign it to datepicker or text box again.

  http://cprakash.com
• • Reply
  

  ASHISH_TECHI...

  Member

  1 Points

  20 Posts

  Re: MVC2.0 : Retaining Datepicker control values after submit button

  Dec 22, 2012 11:34 AM|LINK

  Hi Everyone,

  I'm sharing the solution that had worked for me. During POST, pass the input values for datepicker controls to

  the view (NOTE:- use ViewModel for this).

  After that create two hidden fields in the View and use javascript (or jquery) to retain the input values.

  VIEW CODE:-
  

  <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Master" Inherits="System.Web.Mvc.ViewPage<MVCSampleApplication.ViewModel.Results_Inputs_ViewModel>"

  .....

  javascript:-

  <script type="text/javascript" language="javascript">

   $(function() {

                                  ---------BELOW the datepicker properties are initialized, by default datepicker will have current date

                                                in START DATE and END DATE fields.
  

  
              $("#startdatepicker").datepicker({

                  showOn: 'button',
                  dateFormat: 'dd M yy',
                  changeMonth: true,
                  changeYear: true,
                  buttonImage: '<%= Url.Content("~/content/images/cal.jpeg")%>',
                  buttonImageOnly: true,
                  duration: 'fast',
                  onSelect: function() { $(".ui-datepicker a").removeAttr("href"); }
              }).datepicker("setDate", "0");

    $("#enddatepicker").datepicker({
                  showOn: 'button',
                  dateFormat: 'dd M yy',
                  changeMonth: true,
                  changeYear: true,
                  buttonImage: '<%= Url.Content("~/content/images/cal.jpeg")%>',
                  buttonImageOnly: true,
                  duration: 'fast',
                  onSelect: function() { $(".ui-datepicker a").removeAttr("href"); }
              }).datepicker("setDate", "0");

                          //----------BELOW is the code for using hidden fields and assign the input values to datepicker controls

  if ($("#hidData_Start").val()) {
  
                  var beginDate = $("#hidData_Start").val();
                  $("#startdatepicker").val(beginDate);
              }

   if ($("#hidData_End").val()) {
                  var endDate = $("#hidData_End").val();
                  $("#enddatepicker").val(endDate);
              
              }

   });

  </script>

  <input id="startdatepicker" name="StartDate" type="text" style="text-align:left;"/>

   <%if (Model != null)
      { %>
          <input type="hidden" value="<%=(Model.Inputs.BeginDate) %>" id="hidData_Start" name="hidData_Start" />
  <%} %>

  <input id="enddatepicker" name="EndDate" type="text" style="text-align:left" />
   <%if (Model != null)
        { %>
          <input type="hidden" value="<%= Model.Inputs.EndDate %>" id="hidData_End" name="hidData_End" />
   <%} %>

  ---------

  Hope it helps.

  Thanks.

  • Marked as answer by ASHISH_TECHIT on Dec 22, 2012 11:34 AM