Question

我使用此处的示例代码：http://code.msdn.microsoft.com/MVC5-Demo-with-Entity-c6bc81df

基本上这是电影数据库的CRUD示例，您可以在其中创建读取，更新和删除它们。

我的问题是：如果点击同一页面上的Details链接，如何显示所选电影的详细信息？

点击详细信息时，您将被重定向到控制器，并显示有关该电影信息的操作。

我可以在列出电影的同一页面上显示详细信息吗？

Answer 1

有很多方法可以做到这一点，但它们都归结为进行某种Ajax调用来加载局部视图。以下是一个有效的实现，尽管是最小的：

模型 - Movie.cs

public class Movie
{
    public int ID { get; set; }

    public string Title { get; set; }

    public DateTime ReleaseDate { get; set; }

    public string Genre { get; set; }

    public decimal Price { get; set; }
}

我在这里推荐一个视图模型，但这似乎有点超出了手头问题的范围。

控制器 - MoviesController.cs

 public class MoviesController : Controller
{
    private readonly List<Movie> movies = new List<Movie>
    {
        new Movie { Title = "SomeTitle", Price = 23.25M, ID = 1 }, 
        new Movie { Title = "AnotherTitle", Price = 123.25M, ID = 2 }
    };

    public ActionResult Index()
    {
        return this.View(this.movies);
    }

    public PartialViewResult Details(int id)
    {
        return this.PartialView("_details", this.movies.First(x => x.ID == id));
    }
}

部分视图 - _Details.cshtml

@model YourProject.Models.Movie

<hr/>
<h3>Details</h3>

@Html.DisplayFor(m => m.Title)
@Html.DisplayFor(m => m.Price)

...etc

<button type="button" id="clearDetails">Details</button>

主视图 - Index.cshtml

@model IEnumerable<YourProject.Models.Movie>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        var detailsPartial = $('#details');

        $('.details-link').click(function (event) {
            event.preventDefault();
            var url = $(this).attr('href');

            $.ajax({
                url: url,
                type: 'get',
                success: function(data) {
                    detailsPartial.html(data);
                    $('#clearDetails').click(function () {
                        detailsPartial.html(null);
                    });
                }
            });
        });
    });
</script>

<h2>Movies</h2>
<table>
    <thead>
        <tr>
            <th></th>
            <th>@Html.DisplayNameFor(x => x.Title)</th>
            <th>@Html.DisplayNameFor(x => x.Price)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var movie in Model)
        {
            <tr>
                <td>@Html.ActionLink("Details", "Details", new { id = movie.ID }, new { @class = "details-link" })</td>
                <td>@Html.DisplayFor(x => movie.Title)</td>
                <td>@Html.DisplayFor(x => movie.Price)</td>
            </tr>
        }
    </tbody>
</table>
<div id="details"></div>

完全放下这个，你可以看到一个可以点击详细信息的视图，Ajax将从服务器检索部分视图HTML并将其插入到指定的div标签中。

MVC 5 - 选择项目时在同一页面中显示项目详细信息

1 个答案: