Query Database Using JavaScript

Question

I am fairly new to JavaScript and never used Ajax before. I want to add an OnClick to the Index.cshtml, so when a row is clicked, my code will query database (MSSQL)and return results. I have two tables in database, User and Contact. The primary key in User, UID, is the foreign key in Contact. Here's my code:

Controller

 private UserInfoEntities db = new UserInfoEntities();
 public ActionResult Index(){
 var users = from u in db.User orderby u.UID select u;
 return View(users.ToList());
}

View

@<Info.Model.User>
 <script type="text/javascript">
 function showEmail() {
 var tb = document.getElementById("users");
 var rows = tb.rows;
 for (var i = 1; i < rows.length; i++) {
 rows[i].onclick = (function() { 
 //some code that query Contact table using UID
 // and return Contact.Email in a popup windows or something
 });
 }
 }
</script>
<table class="table" id="users" onclick="showEmail()">
 <tr>
 <th>
 @Html.DisplayNameFor(model => model.NAME)
 </th>
 <th>
 @Html.DisplayNameFor(model => model.UID)
 </th>
 </tr> 
@foreach (var item in Model) {
 <tr>
 <td>
 @Html.DisplayFor(modelItem => item.NAME)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.UID)
 </td> 
 </tr>

Any help is appreciated!

• Alex Kudryashev: @<List<Info.Model.User>>
• Krishnraj Rana: Rather than set this function onclick="showEmail()" on table click, set it on row click like this - <tr onclick="showEmail()">.... Now you no need to iterate thru each row.
• Rob: " for (var i = 1;" -- are you skipping the first row on purpose?

Answer 1

try this;

 <script type="text/javascript">
 function showEmail() {
 //some code that query Contact table using UID
 // and return Contact.Email in a popup windows or something
 }
</script>
<table class="table" id="users" >
 <tr>
 <th>
 @Html.DisplayNameFor(model => model.FirstOrDefault().NAME)
 </th>
 <th>
 @Html.DisplayNameFor(model => model.FirstOrDefault().UID)
 </th>
 </tr> 
@foreach (var item in Model) {
 <tr onclick="showEmail()">
 <td>
 @Html.DisplayFor(modelItem => item.NAME)
 </td>
 <td>
 @Html.DisplayFor(modelItem => item.UID)
 </td> 
 </tr>
}

• Kinjal Gohil: what issue are you facing?
• camus: When a row is clicked, user.UID of that row is passed ot javascrip code as a parameter, and the code will query Contact table in database on where (user.UID == contact.UID), and return contact.EMAIL
• Kinjal Gohil: not getting you. are you asking about how to pass parameter in it?