Form Populate two fields after select a dropdown value

Question

I have an application that I want to auto populated the Import From Date and Import To Date field after selecting the Fiscal Quarter which predefined in the Database.

and my Database

I am stuck on how to Populating the ImportFromDate and ImportToDate.

Here is my code in the view

 @model PagedList.IPagedList<EMSFinal.Models.ClaimsArchived>

@using (Html.BeginForm("Index", "History", FormMethod.Get))
{
<div class="ui-controlgroup form-horizontal" style="position:relative;">
    <a href="/Claims/index" class="btn btn-info btn-sm"> << Current Month List</a> &nbsp;&nbsp;&nbsp;&nbsp;  
    Archived From Date: @Html.TextBox("fromdate", ViewBag.ArchivedFromDate as string, new { @class = "date-picker-month", id = "txtfromdate", placeholder = "Archived From Date..." })&nbsp;&nbsp;&nbsp;&nbsp; 
    Archived To Date: @Html.TextBox("todate", ViewBag.ArchivedToDate as string, new { @class = "date-picker-month", id = "txttodate", placeholder = "Archived To Date..." })&nbsp;&nbsp;&nbsp;&nbsp; 
    <input type="button" class="btn btn-success btn-sm" title="Update all current quarter displaying records to Paid." value="Paid All and Archived" onclick="location.href='@Url.Action("sp_UpdateQuarterRecordsToPaid","History")'" />
    <br />        
    @Html.DropDownList("ddlQuarterID", ViewBag.DropdownResult as List<SelectListItem>,"--Select A Fiscal Quarter--")
    Import From Date: @Html.TextBox("importfromdate", ViewBag.ImportFromDate as string, new { @class = "date-picker-month", id = "txtimportfromdate", placeholder = "Import From Date..." })&nbsp;&nbsp;&nbsp;&nbsp;
    Import To Date: @Html.TextBox("importtodate", ViewBag.ImportToDate as string, new { @class = "date-picker-month", id = "txtimporttodate", placeholder = "Import To Date..." })&nbsp;&nbsp;&nbsp;&nbsp; 
    Find : @Html.TextBox("searchString", ViewBag.CurrentFilter as string, new { @class = "form-search", id = "txtsearchString", placeholder = "Search..." })

    <input type="submit" class="btn btn-primary btn-sm" value="Search" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" class="btn btn-success btn-sm" title="Export records to excel." value="Export Excel" onclick="location.href='@Url.Action("ExportFilteredHistorydDataToExcel", "History")'" />&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" class="btn btn-success btn-sm" title="Reset" value="Reset" onclick="location.href='@Url.Action("resetsearch", "History")'" />
</div>
}

Here is my code in the ClaimsArchived.cs

    //------------------------------------------------------------------------------
 // <auto-generated>
 //     This code was generated from a template.
 //
 //     Manual changes to this file may cause unexpected behavior in your application.
 //     Manual changes to this file will be overwritten if the code is regenerated.
 // </auto-generated>
 //------------------------------------------------------------------------------
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
using System;
using System.Collections.Generic;
namespace EMSFinal.Models
{

public partial class ClaimsArchived
{

    public int Claim_ID { get; set; }
    public String Provider
    {
        get
        {
            if (Provider_Group == 73)
            {
                return "CEP";
            }
            else if (Provider_Group == 72)
            {
                return "CASE";
            }
            else
            {
                return "???";
            }
        }
    }

    [Display(Name = "Provider Num")]
    public Nullable<int> Provider_Group { get; set; }

    public string Facility { get; set; }
    public string Physician { get; set; }

    [Display(Name = "Last")]
    public string Patient_Last { get; set; }

    [Display(Name = "First")]
    public string Patient_First { get; set; }

    [Display(Name = "DOB")]
    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> Patient_DOB { get; set; }

    public int Age
    {
        get
        {
            //DateTime date = DateTime.Today;
            DateTime date = Convert.ToDateTime(admit_date);
            DateTime birthday = Convert.ToDateTime(Patient_DOB);

            int tempage = date.Year - birthday.Year;
            //int tempage = DateTime.Compare(date, birthday);

            return tempage;
        }
    }

    public string Funding_Type
    {
        get
        {
            //DateTime date = DateTime.Today;

            DateTime birthday = Convert.ToDateTime(Patient_DOB);
            DateTime date = Convert.ToDateTime(admit_date);
            int compareAge = date.Year - birthday.Year;
            //int compareAge = DateTime.Compare(date, birthday);
            if (compareAge > 20)
            {
                return "MADDY";
            }
            else
            {
                return "RICHIE";
            }
        }
    }

    [Display(Name = "Gender")]
    public string Patient_Gender { get; set; }

    /// <summary>
    ///  temp remove that from the output and export -- SSNs are sensitive information so that's why disabled in this case 
    /// </summary>
    [Display(Name = "SSN")]
    [DisplayFormat(ApplyFormatInEditMode = false, DataFormatString = "{0:###-##-####}")]
    public Nullable<int> Patient_SSN { get; set; }

    [Display(Name = "Zip")]
    public string Patient_Zip { get; set; }
    public string Diagnosis { get; set; }

    [Display(Name = "Total Charges")]
    public Nullable<decimal> Total_Charges { get; set; }

    [Display(Name = "EMS Rate")]
    public Nullable<decimal> Total_EMS { get; set; }
    public bool Paid { get; set; }
    //public bool Paid { get; set; }

    [Display(Name = "Paid Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> Paid_date { get; set; }

    [Display(Name = "Unique ID")]
    public Nullable<int> Unique_ID { get; set; }

    [Display(Name = "Import Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> ImportDate { get; set; }

    [Display(Name = "Arh Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> ArchiveDate { get; set; }

    [Display(Name = "Archived")]
    public bool ArchiveYesNo { get; set; }

    [Display(Name = "Admit Date")]
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    public Nullable<System.DateTime> admit_date { get; set; }
}
}

Here is my code in the Controller

ViewBag.CurrentFilter = searchString;
ViewBag.ArchivedFromDate = fromdate;
ViewBag.ArchivedToDate = todate;

//var varquarterlist = db.QuarterName.OrderBy(b => b.QuarterId).Distinct().ToList();
//getting data for dropdown list
List<SelectListItem> objResult = new List<SelectListItem>();
var varquarterlist = db.QuarterName.Select(x => x.QuarterName1).Distinct().ToList();
//select qtlist;

foreach (var item in varquarterlist)
{
    SelectListItem temp = new SelectListItem();
    temp.Text = item;
    temp.Value = item;
    objResult.Add(temp);                
}
ViewBag.DropdownResult = objResult;

Answer 1

Here is my view page syntax

     @Html.DropDownList("ddlQuarterName",(SelectList)ViewData     ["viewdataQuarterName"],"-Select A Fiscal Quarter-",new { onchange="Action(this.value);"})

    Import From Date: @Html.TextBox("importfromdate", ViewBag.ImportFromDate as string, new { @class = "date-picker-month", id = "txtimportfromdate", placeholder = "Import From Date..." })    
    Import To Date: @Html.TextBox("importtodate", ViewBag.ImportToDate as string, new { @class = "date-picker-month", id = "txtimporttodate", placeholder = "Import To Date..." })             
    Find : @Html.TextBox("searchString", ViewBag.CurrentFilter as string, new { @class = "form-search", id = "txtsearchString", placeholder = "Search..." })

<script type="text/javascript">
function ToJavaScriptDate(value) {
    var pattern = /Date\(([^)]+)\)/;
    var results = pattern.exec(value);
    var dt = new Date(parseFloat(results[1]));
    return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();


function Action(QuarterID) {
    $.ajax({
        url: '@Url.Action("Action","History")',
        type: "POST",
        data: { "QuarterID": QuarterID },
        "success": function (data) {
            if (data != null) {
                var vdata = data;
                $("#txtimportfromdate").val(ToJavaScriptDate(vdata[0].QuarterStartDate));
                $("#txtimporttodate").val(ToJavaScriptDate(vdata[0].QuarterEndDate));
            }
        }
    })
}

HistoryController code (History)

ViewData["viewdataQuarterName"] = new SelectList(db.QuarterName, "QuarterID", "QuarterName1"); 


        [HttpPost]
    public ActionResult Action(string QuarterID)
    {
        var query = from c in db.QuarterName
                    where c.QuarterId.ToString() == QuarterID
                    select c;
        return Json(query);
    }