Populate TextBoxes on DropDownList change using jQuery AJAX in ASP.Net MVC

Last Reply 8 months ago By dharmendr

Posted 8 months ago

Hi, 

I want to do the dropdown list. Once we click the data for other column will auto fill in other column.

i tried the code unfortunately it failed. When i choose the name, nothing display on age and address textboxes

So this is my controller

      public ActionResult ViewList()
      {
          ViewBag.platform = db.tblStudent.ToList();
          return View();
      }
 
      public JsonResult GetData(int id)
      {
          List<StudentList> plist = populateStudent();
          return Json(plist.Where(p => p.list_id == Convert.ToInt32(id)));
          
      }
 
     private static List<StudentList> populatePlatform()
      {
 
           
          List<StudentList> list = new List<StudentList>();
          var platform = db.tblStudent.ToList();
 
          foreach (var item in platform)
          {
              list.Add(new StudentList
              {
                  Name= item.Name,
                  Age= item.Age,
                  Address= item.Address
              });
          }
          return list;
      }

This is my View

    <script type="text/javascript">
        function get_sbu() {
            var id = $('#ddlCustomers').find(":selected").attr('value');
            $.ajax({
                type: "POST",
                url: "/Home/GetData",
                data: "id=" + id,
                success: function (data) {
                    if (data.length > 0) {
                        $('#task').val(data[0].Age);
                        $('#task2').val(data[0].Address);
                    }
                }
            });
        }
    </script> 
Name:
<select id="ddlCustomers" onchange="get_sbu()">
    @foreach (var item in ViewBag.platform)
    {
        <option>@item.Name</option>
    }
</select>
Age : <input type="text" id="task" />
Address : <input type="text" id="task2" />
Email Required? <input type="checkbox" id="isSelected" />

Thank you in advance :)

Posted 8 months ago Modified on 8 months ago

Hi nabilabolo,

Check the below code.

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        List<SelectListItem> items = new List<SelectListItem>();
        items.Add(new SelectListItem { Text = "Platform 1", Value = "1" });
        items.Add(new SelectListItem { Text = "Platform 2", Value = "2" });
        items.Add(new SelectListItem { Text = "Platform 3", Value = "3" });
        items.Add(new SelectListItem { Text = "Platform 4", Value = "4" });
        TempData["platform"] = items;
        return View();
    }
    public JsonResult GetData(int id)
    {
        List<StudentList> plist = populateStudent();
        return Json(plist.Where(p => p.list_id == id));
    }

    private static List<StudentList> populateStudent()
    {
        List<StudentList> list = new List<StudentList>();
        list.Add(new StudentList { list_id = 1, Name = "Name 1", Age = 30, Address = "Address 1" });
        list.Add(new StudentList { list_id = 2, Name = "Name 2", Age = 35, Address = "Address 2" });
        list.Add(new StudentList { list_id = 3, Name = "Name 3", Age = 50, Address = "Address 3" });

        return list;
    }

    public class StudentList
    {
        public int list_id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Address { get; set; }
    }
}

View

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function get_sbu() {
        var id = $('#ddlCustomers').find(":selected").attr('value');
        $.ajax({
            type: "POST",
            url: "/Home/GetData",
            data: "id=" + id,
            success: function (data) {
                if (data.length > 0) {
                    $('#task').val(data[0].Age);
                    $('#task2').val(data[0].Address);
                } else {
                    $('#task').val('');
                    $('#task2').val('');
                }
            }
        });
    }
</script>
Name:
<select id="ddlCustomers" onchange="get_sbu()">
    <option value="0">Select</option>
    <%foreach (var item in (List<SelectListItem>)TempData["platform"]) { %>
        <option value='<%=item.Value%>'><%=item.Text%></option>
    <% } %>
</select>
<br />
Age : <input type="text" id="task" /><br />
Address : <input type="text" id="task2" /><br />
Email Required? <input type="checkbox" id="isSelected" />

Screenshot

Use below code to populate Students from Database.

private static List<StudentList> populateStudent()
{          
    List<StudentList> list = new List<StudentList>();
    var platform = db.tblStudent.ToList();
    foreach (var item in platform)
    {
        list.Add(new StudentList
        {
            list_id = item.list_id,
            Name = item.Name,
            Age = item.Age,
            Address = item.Address
        });
    }
 
    return list;
}