面板扩展和按钮按表行显示 - MVC 5/Bootstrap 3

Question

我一直在学习和使用 MVC 和 Bootstrap，现在我想接受一个新的挑战，以使我的虚拟站点更加灵活和不那么拥挤。为此，我想在我的显示表上实现另外两个功能，但我不确定我应该如何去做。

• 第一个功能是隐藏所有按钮，除非我的鼠标位于表格的相应行上。 即当我将鼠标移到表格下方时，每行的按钮都会在鼠标悬停在相应行上时短暂出现。

• 第二个功能是我还希望能够展开每一行以显示附加信息即现在我的表格显示电影名称、演员、角色和发行日期的数据.当我点击一行时，我希望它稍微向下展开以显示我拥有的所有其他信息，例如电影描述、评级等......

这是我当前的在线页面。

这是我的查看代码。

@model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
    <div class="panel-heading">
        <span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
    </div>

    <div class="row">
        <div class="col-xs-12">

            <button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='@Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
            <button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3"  onclick=" location.href='@Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>

        </div>
    </div>

    <table class="table table-striped table-hover table-responsive table-condensed">
        <tr>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
            </th>
            <th>
                <h3 style="font-size:x-large"><span style="font-weight:bolder">@Html.DisplayNameFor(model => model.Role)</span></h3>
            </th>
            <th></th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieName)</span>
                </td>
                <td class="col-lg-2">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.employeeName)</span>
                </td>
                <td class="col-lg-1">
                    <span style="font-size: 17px;">@Html.DisplayFor(modelItem => item.Role)</span>
                </td>
                <td class="col-lg-3">
                    <button type="button" class="btn btn-warning col-lg-3" onclick="location.href='@Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>

                    <button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>

                    <button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='@Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
                </td>
            </tr>
        }

    </table>
</div>

这是我的 ViewModel。 （其中有一些我想在点击一行时显示的额外信息）

namespace WebApplication2.ViewModels.Starring
{
    public class StarringViewModel
    {
        public int movieID { get; set; }
        public int roleID { get; set; }
        public int employeeID { get; set; }
        public string movieName { get; set; }
        public string movieDescription { get; set; }
        public DateTime? movieReleaseDate { get; set; }
        public string Role { get; set; }
        public string employeeName { get; set; }
        public DateTime employeeBirthdate { get; set; }
    }
}

谢谢！

Answer 1

我可以通过查看一些旧代码来帮助您解决第一个问题。

我所有的行都有'.element-row' 类。每行的最后一个<td>，有一个<div>（默认隐藏，带有'.element-options' 类）和一些按钮。

然后是一些 JavaScript 和 jQuery：

$('.element-row').hover(
    function () {
        hideAllElementOptions();
        var row = $(this);
        var elementOptions = row.find(".element-options");
        elementOptions.css({
            opacity: 0,
            display: 'inline-block'
        }).animate({ opacity: 1 }, 0); // your parameters here
    },
  function () {
      var row = $(this);
      var elementOptions = row.find(".element-options");
      elementOptions.css({
          display: 'inline-block'
      }).animate({ opacity: 0 }, 0); // your parameters here
  }
);

对于第二个功能，您可以添加一些 onClick 事件侦听器（到表行），它执行 AJAX 请求以获取必要的数据（返回 JSON 或部分视图）并在页面中填充某些内容。

我不确定如何扩展表格行（如果是 <div>，会更容易），但请查看以下问题：Can a table row expand and close?