'System.Dynamic.DynamicObject' does not contain a definition for 'var2' RSS

See more:

ASP.NET

jQuery

C#5.0

JSON.NET

MVC5

want to dynamically populate dropdownlist. have table of District{district_id,distrint_name} and Thana{thana_id,thana_name,district_id(fk)}.

The controller code:

public class CenterController : Controller
         {

           string connection =ConfigurationManager.ConnectionStrings["CenterConnString"].ConnectionString;
          List<SelectListItem> districtList = new List<SelectListItem>();      
          List<SelectListItem> thanaList = new List<SelectListItem>();

public ActionResult Index()
{
    ViewBag.var1 = DistrictList();
    ViewBag.var2 = thanaList;


    return View();
}
private SelectList DistrictList()  
{
    using (SqlConnection conn = new SqlConnection(connection))
    {
        conn.Open();
        SqlDataReader myReader = null;
        SqlCommand myCommand = new SqlCommand("select distrint_name,district_id from tbl_district ", conn);
        myReader = myCommand.ExecuteReader();
        while (myReader.Read())
        {
            districtList.Add(new SelectListItem { Text = myReader["distrint_name"].ToString(), Value = myReader["district_id"].ToString() });
        }
    }
    return new SelectList(districtList, "Value", "Text", "id"); //return the list objects in json form
}



public JsonResult ThanaList(int id)  
{
    using (SqlConnection conn = new SqlConnection(connection))
    {
        conn.Open();
        SqlDataReader myReader = null;
        SqlCommand myCommand = new SqlCommand("select * from tbl_thana where district_id ='" + id + "' ", conn);
        myReader = myCommand.ExecuteReader();
        while (myReader.Read())
        {
            thanaList.Add(new SelectListItem { Text = myReader["thana_name"].ToString(), Value = myReader["thana_id"].ToString() });
        }
    }
    return Json(thanaList, JsonRequestBehavior.AllowGet); //return the list objects in json form
}


View code:

<pre lang="HTML">


               @{
    ViewBag.Title = "Index";
}

<script src="~/Scripts/modernizr-2.6.2.js"></script>

<script src="~/Scripts/jquery-2.1.3.min.js"></script>

<h2>Index</h2>

District          @Html.DropDownList("var1", "Choose District")
Thana             @Html.DropDownList("var2", "Choose Thana")
                                   @*dropdown with name var1, var2,var3 and with viewbag object*@
<script type="text/javascript">
    //initial var2, var3 are empty
    //dropdownlist name and viewbag object name must be same

    $(function () {
        $("#var1").change(function () {
            var name = $("#var1 :selected").val();  //if user select the tournament
            var url = 'Home/DistrictList';
            var data1 = { "id": name };
            $.post(url, data1, function (data) { //ajax call
                var items = [];
                items.push("<option value=" + 0 + ">" + "Choose Thana" + "</option>"); //first item
                for (var i = 0; i < data.length; i++) {
                    items.push("<option value=" + data[i].Value + ">" + data[i].Text + "</option>");
                } //all data from the team table push into array
                $("#var2").html(items.join(' '));
            }); //array object bind to dropdown list
        });
});

</script>

<input type="submit" value="submit" />

The problem is that District list is populated ok.But the second ddl is not binding anything. By debugging it is seen that the code does not run through "Viewbag.var2=thanalist".