CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4
super cool
super cool

Reputation: 6045

Dropdownlist selection should auto populate textboxes? MVC 4

I am trying to use jquery for fetching data upon dropdownlist selection . The jquery method is firing and respective method call to controller which returns JSON is also doing its work i.e returning some list of customer data But i donno how to bind to textboxs .

Initially i worked on cascading drop down :

My code looks like : country/state

IN VIEW:

 @Html.DropDownList("state",ViewBag.stateid as SelectList,"select a state",new {id="state"}) 
 @Html.Label("District")
<select id="district"  name="District"></select>

AND RESPECTIVE JSON return in controller :

 public JsonResult DistrictList(string id)
        {
            int identity = Convert.ToInt32(id);
            dbforentityEntities1 db = new dbforentityEntities1();
            var district = db.districts.Where(m => m.stateid == identity);
            return Json(new SelectList(district.ToList(), "districtid", "districtname"), JsonRequestBehavior.AllowGet);
        }

But now i have a different scenario like i want to display the list i am getting from Controller into view and The data should fill in the textboxe's i created

My code till now :

View part

   <script type="text/jscript">
        $(function ()
        {
            $('#GETEDIT').click(function ()
            {
               $.getJSON('/Home/FetchData/'+$('GETEDIT').val(),function(data)
                    {
                    $.each(data, function (i, **?????** )

//next here i need to iterate to the data and fill it in respective textboxes 
                });
$('#district').html(**????**);
            });
        });
    });
</script>

???? : in th above code means *i dont know what to keep i.e i am having more than couple of text boxes *

Any ideas Thank you for your time

Regards

Upvotes: 1

Views: 2896

Answers (3)

Jaimin
Jaimin

Reputation: 8020

Try like this,

 for (var i = 0; i < listItems.length; i++) {
  var elements = "<input type='text' id='txt" + listItems[i].districtid+ "'class='required' name='text_"+listItems[i].districtname+"'/><br/></br>";
   $("#yourSelect").append(elements);
   }

 $.each(data, function (i, district) {
  var elements = "<input type='text' id='txt" + district[i].districtid+ "'class='required' name='text_"+district[i].districtname+"'/><br/></br>";
  $("#yourSelect").append(elements);
});

View

<div id="yourSelect"></div>

This is static demo for bind dynamic textbox on button click for your reference: http://jsfiddle.net/n7Nr2/1/

Upvotes: 1

Ashwini Verma
Ashwini Verma

Reputation: 7525

If I understood correctly, this what you need.

Assuming pre-created textboxes

<input type="text" id="tb1" />
<input type="text" id="tb2" />

returned JSon format as example

[{"Tb1":123,"Tb2":456,"Tb3":678}]

Read the json result using $.each()

   $.getJSON('/Home/FetchData/'+$('GETEDIT').val(), function(data) {
        $.each(data, function(index) {
            $("#tb1").val(data[index].Tb1);
            $("#tb2").val(data[index].Tb2);
        });
    });

Upvotes: 0

shenku
shenku

Reputation: 12438

Try append:

$.each(data, function (i, district) {
    $('#yourSelect').append($('<option>', { 
        value: district.value,
        text : district.text 
    }));
});

Upvotes: 0

Related Questions