MVC foreach statement

Question

Im new with MVC.

I have a model called UAV.

│Callsign│NumDeliveries│Mileage│MaxVelocity│MinVelocity│

　Hawk61　　　37　　　　96　　　　20 　　　　10

　BURL14　　 2047　　 　 57 　　　　30　　　　 15

　OTTO93　　　82　　　　72　　　　25 　　　　10

in cshtml file, i made a table only using Callsign, NumDeliveries, Mileage.

<table class="UAV_table" id="UAV_table">
    <tr>
        <th>Callsign</th>
        <th>NumDeliveries</th>
        <th>Mileage</th>
    </tr>
    @foreach (UAV uav in Model.UAVs)
    {
        <tr onclick="click_row()">
            <td onclick="click_row()">
                @Html.DisplayFor(modelItem => uav.Callsign)
            </td>
            <td>
                @Html.DisplayFor(modelItem => uav.NumDeliveries)
            </td>
            <td>
                @Html.DisplayFor(modelItem => uav.Mileage)
            </td>
        </tr>
    }
</table>

　so the table shows all datas for Callsign, NumDeliveries, Mileage. what i want to do is, when i click the row of the table, i want to see only that correspond information.

@foreach (UAVs uavid in Model.uavs)
{
    <p class="detail_title" id="detail_title">
        UAV: # (@Html.DisplayFor(modelItem => uavid.MaxVelocity))
    </p>
}

for example, using above line of code, if i click first row of that table(callsign = Hawk61), i want to see like UAV: # 20 (MaxVelocity for Hawk61). MaxVelocity is not in the table, so i need to get it from database.

But I have problem with showing data. If i use right above code, it has @foreach statement, it shows all the Hawk61, BURL14, OTTO93's MaxVelocity. it shows me like

UAV:# 20
UAV:# 30
UAV:# 25

I need to see only what i selected. (just shows what i click, in this example, only need to show UAV:# 20 which is first row, Hawk61's MaxVelocity).

is there any way to get the data from database not using foreach statement? Thank you.

Answer 1

Since the values of MaxVelocityand MinVelocity are populated, you can make use of data- attributes to store the values in the DOM and use jquery to display them. For example

@foreach (UAV uav in Model.UAVs)
{
  <tr class="uavrow" data-maxvelocity="@uav.MaxVelocity" data-minvelocity="@MinVelocity">
    <td>@Html.DisplayFor(modelItem => uav.Callsign)</td>
    <td>@Html.DisplayFor(modelItem => uav.NumDeliveries)</td>
    <td>@Html.DisplayFor(modelItem => uav.Mileage)</td>
  </tr>
}

And include some elements to display the associated data when you click on the row

<div>
  <div><span>Call Sign: </span><span id="callsign"></span>
  <div><span>Max Velocity: </span><span id="maxvelocity"></span>
  <div><span>Min Velocity: </span><span id="minvelocity"></span>
</div>

And the script

$('.uavrow').click(function) {
  // Get the call sign for the td element
  $('#callsign').text($(this).children('td').eq(0).text());
  // Get the velocity from the data attributes
  $('#maxvelocity').text($(this).data('maxvelocity'));
  $('#minvelocity').text($(this).data('minvelocity'));
});

If however the value were not populated, or you have a large number of properties to display, then it may be better to make an ajax call to a method (passing the callsign) which returns a partial view containing the details

<div id="uavdetails"></div>

$('.uavrow').click(function) {
  var callSign = $('#callsign').text($(this).children('td').eq(0).text());
  var url = '@Url.Action("Details", "YourController")';
  $('#uavdetails').load(url, { CallSign: callsign });
});

Controller

public ActionResult Details(string CallSign)
{
  UAV uav = // Get the UAV base on the CallSign value
  return PartialView(uav);
}

Answer 2

Actually you have all data that you need in there. The only thing that you need is to show proper item by using JavaScript.

You need to add parameter to your function call here:

<tr onclick="click_row('@uav.Callsign')">

And also add css class here:

@foreach (UAVs uavid in Model.uavs)
{
    <p class="detail_title @uavid.Callsign" id="detail_title" style="display=none;">
        UAV: # (@Html.DisplayFor(modelItem => uavid.MaxVelocity))
    </p>
}

And then add a bit of javascript:

<script>

function click_row(elClass){
    var elements = document.getElementsByClassName("detail_title");
    for (i = 0; i < x.length; i++) {
        if(x[i].className.contains(elClass)){
            x[i].style.display = 'block';
        } else{
            x[i].style.display = 'none';
        }
    }
};
<script/>