0

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.

Improve this question
9
  • To clarify, you want the Max/Min velocity figures hidden until you click on a row or call sign. Is this correct? Commented Feb 15, 2015 at 20:05
  • Um.. no.. i want @foreach (UAVs uavid in Model.uavs) this line without using foreach... Commented Feb 15, 2015 at 20:38
  • get data from database without using loop... i want selected data row... Commented Feb 15, 2015 at 20:42
  • Do you mean that when you click on a table row, you want to display additional information (other properties of the selected UAV) on the page? Commented Feb 15, 2015 at 22:18
  • @KayleeYunKyungKim, Are those extra properties of UAV populated on the server when you pass the collection to the view? (p.s use the 'at' sign to respond to a user) Commented Feb 15, 2015 at 22:36

2 Answers 2

Reset to default
2

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);
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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/>
Improve this answer

6 Comments

um. after i added this code into my code, even if i click the row, it doesn't show me the title at all... any help?
i have so many other things in the code right now.. it is kinda too long to post here. somehow, i don't get into the click_row function. have no idea why that function is not getting called...
can you try to use <tr onclick="click_row('@uav.Callsign')"> instead of?
It's hard to see what's wrong, because I have no code on my side. Can you debug javascript to see if all things are correct?
the problem is, it doesn't get into the for loop somehow.. and can you tell me how to debug javascript???
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.