MVC Grid (VB): Показать подробности при наведении

0

Я искал этот онлайн в течение нескольких часов сегодня и нашел полезный материал, но я не могу заставить его работать на 100%, как мне хотелось бы. Если кто-то может помочь, это будет фантастично! В моем коде ниже я удалил все, что могло бы вывести данные, которые бизнес, с которыми я работаю, может не захотеть поделиться, они будут указаны с помощью "<SOMETHING>". Здесь моя проблема: я заполняю сетку MVC

 @Html.Grid(Model.Activities).WithModel(New <CLASSNAME HERE>(Html)).Sort(ViewData.Item("actgridsort"))

эта часть отлично работает, сетка должна показывать действия, предпринятые службой поддержки, на поддержку, и я могу "развернуть" каждое действие, используя ссылку "подробности" внутри сетки, внутри каждой деятельности есть раздел "Примечания", Я пытаюсь разрешить пользователям видеть заметки из активности, просто зависая над ячейками сетки, которые относятся к этой конкретной деятельности. Например: Действие 101 может содержать примечание "Мирный мир". Действие 102 может содержать "До свидания",

На данный момент, если я наводил курсор на активность 101, мой код отображает:

hello world
goodbye world

Однако, если я нахожу более 102, он ничего не отображает. Я хочу, чтобы он показывал "Hello world", когда наводил курсор на 101, и "прощай мир" более 102 и т.д.

вот мой код: --VIEW ---

  @code
   For Each Activity In Model.Activities
      @<div id ='@string.Format("Activity{0}", Activity.ClgCode)' class = "ActivityDetails">
     <br />
      Activity @Activity.ClgCode:
      <b>
       @Activity.Notes

      </b>
      </div>
  Next

End Code

--JS--

<script>
    $(".ActivityDetails").hide();
  $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

</script>

Вот вывод скрипта в консоли по запросу @satpal. Некоторые из комментариев внутри здесь были удалены мной по соображениям конфиденциальности.

   <div class="display-label" >Details:</div>
    <div class="display-field display-field-bordered">
    <pre>
        <span style="white-space: pre-line">
PROBLEM WRITTEN HERE
 </span>

    </pre>
    </div>


</div>

<p>
    <table class="grid"><thead><tr><th><a href="/SupportCall/Details/2999?Column=ClgCode&amp;Direction=Ascending">Activity No.</a></th><th><a href="/SupportCall/Details/2999?Column=CntctDate&amp;Direction=Ascending">Date</a></th><th>Time</th><th><a href="/SupportCall/Details/2999?Column=ActivityType&amp;Direction=Ascending">Type</a></th><th><a href="/SupportCall/Details/2999?Column=ActivitySubject&amp;Direction=Ascending">Subject</a></th><th><a href="/SupportCall/Details/2999?Column=Priority&amp;Direction=Ascending">Priority</a></th><th>Details</th><th><a href="/SupportCall/Details/2999?Column=UserName&amp;Direction=Ascending">Ochiba Contact</a></th><th><a href="/SupportCall/Details/2999?Column=BPContact&amp;Direction=Ascending">Customer Contact</a></th><th class="sort_asc"><a href="/SupportCall/Details/2999?Direction=Descending"></a></th></tr></thead><tbody><tr class="gridrow"><td>6625</td><td>06/01/2014</td><td>12:24</td><td>Support</td><td>Website</td><td>0</td><td>Request for Further info from client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6625">Details</a></td></tr><tr class="gridrow_alternate"><td>6627</td><td>06/01/2014</td><td>12:32</td><td>Support</td><td>Website</td><td>1</td><td></td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6627">Details</a></td></tr><tr class="gridrow"><td>6628</td><td>06/01/2014</td><td>12:34</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6628">Details</a></td></tr><tr class="gridrow_alternate"><td>6630</td><td>06/01/2014</td><td>12:43</td><td>Support</td><td>Website</td><td>0</td><td>Request for further information</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6630">Details</a></td></tr><tr class="gridrow"><td>6631</td><td>06/01/2014</td><td>13:07</td><td>Support</td><td>Website</td><td>0</td><td>Issue with Credit Card Payment</td><td>Sue Simpson</td><td>Adrian Owen</td><td><a href="/Activity/Details/6631">Details</a></td></tr><tr class="gridrow_alternate"><td>6632</td><td>06/01/2014</td><td>13:25</td><td>Support</td><td>Website</td><td>0</td><td>Update to client</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6632">Details</a></td></tr><tr class="gridrow"><td>6635</td><td>06/01/2014</td><td>15:57</td><td>Support</td><td>Website</td><td>0</td><td>Update to client after investigation and referral to 3rd Par</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6635">Details</a></td></tr><tr class="gridrow_alternate"><td>6639</td><td>07/01/2014</td><td>09:01</td><td>Support</td><td>Website</td><td>0</td><td>Response to client after update from 3rd Party</td><td>NAME</td><td>NAME2</td><td><a href="/Activity/Details/6639">Details</a></td></tr></tbody></table>
          <div id ='Activity6625' class = "ActivityDetails">
         <br />
          Activity 6625:

          <b>
NOTES HERE  
          </b>
          </div>
          <div id ='Activity6627' class = "ActivityDetails">
         <br />
          Activity 6627:

          <b>
          NOTES HERE

          </b>
          </div>
          <div id ='Activity6628' class = "ActivityDetails">
         <br />
          Activity 6628:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6630' class = "ActivityDetails">
         <br />
          Activity 6630:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6631' class = "ActivityDetails">
         <br />
          Activity 6631:

          <b>
NOTES HERE
          </b>
          </div>
          <div id ='Activity6632' class = "ActivityDetails">
         <br />
          Activity 6632:

          <b>
NOTES HERE 
          </b>
          </div>
          <div id ='Activity6635' class = "ActivityDetails">
         <br />
          Activity 6635:

          <b>
NOTES HERE

          </b>
          </div>
          <div id ='Activity6639' class = "ActivityDetails">
         <br />
          Activity 6639:

          <b>
     NOTES HERE
          </b>
          </div>
</p>
<script>
    $(".ActivityDetails").hide();
  // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });

   // $("table.grid tbody tr td:first-child").hover(function () { $(".ActivityDetails" + $("td:first", this).text()).toggle() });
    $("table.grid tbody tr td:first-child").hover(function () {
        $(".ActivityDetails" + $(this).text()).show()
    }, function () {
        $(".ActivityDetails" + $(this).text()).hide()
    });
//    $("table.grid tbody tr td:first").hover(function () {
//        var selectValue = $(this).siblings("td:first").html();
//    $(".ActivityDetails" + $(selectValue, this).text()).toggle() });

</script>

Большое спасибо заранее всем, кто даже нашел время, чтобы прочитать это.

Теги:
razor
asp.net-mvc

1 ответ

0
Лучший ответ

Попробуйте

$("table.grid tbody tr td:first-child").hover(function () {
    $(".ActivityDetails" + $(this).text()).toggle()
});

ИЛИ

$("table.grid tbody tr td:first-child").hover(function () {
    $(".ActivityDetails" + $(this).text()).show()
},function () {
    $(".ActivityDetails" + $(this).text()).hide()
});

ОБНОВИТЬ

Вы, где используете неправильный идентификатор

$(".ActivityDetails").hide();

$("table.grid tbody tr td:first-child").hover(function () {
      $(".ActivityDetails").hide();
      $("#Activity" + $(this).text()).show()
});

Fiddle DEMO

Поделиться
  • 0
    Боюсь, ничего с этим не происходит @Satpal, но спасибо за внимание :)
  • 0
    ты имеешь ввиду мою консоль IE (f12)?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню