bind a table on click event of button - asp.net-mvc

Question

I am working with ASP.NET MVC 3 Razor. I have a list method in controller, so want to bind this list to table on click event of a button. How will I achieve this functionality.
Here is my controller method:
public ActionResult getItnList(string scanCode)
{
List<List<String>> getitnDetails_List = getitnDetails(date, name);
ViewBag.getitnDetails = getitnDetails_List;
return Json(new { getitnDetails_List = getitnDetails_List }, JsonRequestBehavior. AllowGet);
}
Here is my view code:
#{
List<List<String>> str = (List<List<String>>)ViewBag.getitnDetails;
}
<table id="list" width="100%">
<td><b>Harvest Date</b></td>
<td><b>Product</b></td>
#for (int i = 0; i <= str.Count - 1; i++)
<td>#str[i][0].ToString()</td>
<td>#str[i][1].ToString()</td>
</table>
How will I bind this table to list on click event of button?

Answer 1

I'm not exactly sure what you are asking. But if you want to get the list on the click of a button you can use jQuery .getJSON (http://api.jquery.com/jQuery.getJSON/) to retrieve the list data and then insert it with javascript. Or you could render the list in the action and simply use json .get and insert the result.

Answer 2

Try this
View
<table>
<tr>
<th>
Name
</th>
<th>
PhoneNo
</th>
<th>
Address
</th>
<th>
Action
</th>
</tr>
#{var list = ViewBag.RegisterItems; }
#if (list != null)
{
foreach (var m in list)
{
<tr>
<td>
<input id="txtName-#m.ID.ToString()" type="text" class="hide" value="#m.Name.ToString()"/>
</td>
<td>
<input id="txtPhoneNo-#m.ID.ToString()" type="text" class="hide" value="#m.PhoneNo.ToString()"/>
</td>
<td>
<input id="txtAddress-#m.ID.ToString()" type="text" class="hide" value="#m.Address.ToString()"/>
</td>
</tr>
}
}
</table>
Controller
public ActionResult CustomerInfo()
{
ViewBag.RegisterItems = GetAllRegisterData();
return View();
}