MVC foreach statement

Question

Im new with MVC.

У меня есть модель под названием БПЛА.

│Callsign│NumDeliveries│Mileage│MaxVelocity│MinVelocity│

Hawk61 37 96 20 10

BURL14 2047 57 30 15

OTTO93 82 72 25 10

в файле cshtml, Я сделал таблицу только с помощью 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> 

поэтому в таблице приведены все данные по Callsign, NumDeliveries, Пробег. что я хочу сделать, когда я нажимаю строку таблицы, я хочу видеть только соответствующую информацию.

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

, например, с использованием выше строк коды, если я нажмите первую строку этой таблицы (позывной = Hawk61), я хочу видеть, как UAV: # 20 (MaxVelocity для Hawk61). MaxVelocity не находится в таблице, поэтому мне нужно получить его из базы данных.

Но у меня проблема с отображением данных. Если я использую код выше кода, он имеет оператор @foreach, он отображает все MaxVelocity Hawk61, BURL14, OTTO93. она показывает мне, как

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

Мне нужно видеть только то, что я выбрал. (просто показывает, что я нажимаю, в этом примере нужно показать только БПЛА: # 20, которая является первой строкой, MaxVelocity Hawk61).

есть ли способ получить данные из базы данных, не используя инструкцию foreach? Спасибо.

Answer 1

На самом деле у вас есть все данные, которые вам нужны. Единственное, что вам нужно, это показать правильный элемент с помощью JavaScript.

Вам нужно добавить параметр к вашему вызову функции здесь:

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

А также добавить класс CSS здесь:

@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> 
} 

А потом добавить немного 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/> 

Answer 2

Поскольку значения MaxVelocity и MinVelocity заселены, вы можете использовать data-, чтобы сохранить значения в DOM и использовать jquery для их отображения.Например

@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> 
} 

И включают в себя некоторые элементы для отображения связанных данных при нажатии на строку

<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> 

и сценарий

$('.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')); 
}); 

Если же значение не заселенной, или у вас есть большое количество свойств для отображения, тогда может быть лучше сделать ajax-вызов метода (прохождение позывного), который возвращает частичный вид, содержащий данные

<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 }); 
}); 

Контроллер

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