MVC 4 - 在同一页面中显示单行的项目详细信息

Question

我的问题是，当单击同一页面上的详细信息链接时，如何显示所选电影的详细信息？当前，当您单击超链接时，您将被重定向到将显示有关该电影的信息的控制器和操作，例如Movies/Details/1。我希望它显示在Movies

我使用位于此处的示例代码：http://code.msdn.microsoft.com/MVC5-Demo-with-Entity-c6bc81df 创建了我的 MVC 应用程序。

它使用 CRUD 创建读取、更新和删除记录。

这样做的原因是我正在创建一个与按钮一起使用的网站，以在数据库中显示适当的数据，例如 Button1 - ID1、Button2 - ID2 等......

这可以在列出电影的同一页面上详细说明吗？

Index.cshtml

@model IEnumerable<MvcMovie.Models.Movie>
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table>
    <tr>
        <th>@Html.DisplayNameFor(model => model.Title)</th>
        <th>@Html.DisplayNameFor(model => model.Genre)</th>
        <th>@Html.DisplayNameFor(model => model.Price)</th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.Title)</td>
        <td>@Html.DisplayFor(modelItem => item.Genre)</td>
        <td>@Html.DisplayFor(modelItem => item.Price)</td>
        <td>
        <a href='@Url.Action("Details", new { id = item.ID })' class="ajax">Details</a>
        </td>
    </tr>
}
</table>

<div id="TargetDiv"></div>
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".ajax").on("click", function (e) {
            e.preventDefault();
            var elementUrl = $(this).attr('href');
            $.ajax({
                url: elementUrl,
                cache: false,
                success: function (data) {
                    $('#TargetDiv').html(data);
                }
            });
        });
    });
</script>

电影控制器

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMovie.Models;

namespace MvcMovie.Controllers
    {
        public class Movies2Controller : Controller
        {
            private Jess_MoviesEntities db = new Jess_MoviesEntities();
            public ActionResult Index()
            {return View(db.Movies.ToList());}

            public ActionResult OneMovie(int id)
            {return View();}
        }
    }

Answer 1

在您的 _Layout.cshtml 中

原因：放在 _Layout.cshtml 中就可以在其他视图上复用了

把它放在 jquery 之后

<script src="~/Scripts/jquery-2.2.0.js"></script>
<script>
    $(document).ready(function () {
    $(".ajax").on("click", function (e) {
            e.preventDefault();
            var elementUrl = $(this).attr('href');
            $.ajax({
                url: elementUrl,
                cache: false,
                success: function (data) {
                    $('#TargetDiv').html(data);
                }
            });
        });
    });
</script>

在您的视图中添加一个 div <div id="TargetDiv"></div>

然后替换下面一行

@Html.ActionLink("Details", "Details", new { id=item.ID })

与

<a href='@Url.Action("Details", new { id=item.ID })' class="ajax">Details</a>

如果你设法让它工作，请告诉我。

确保将“详细信息”视图设为局部视图，否则您最终可能会在目标潜水中添加 _Layout.cshtml

解释 这将阻止正常重定向发生e.preventDefault() 之后，它将获取 URL，例如 Details/1 并使用 Ajax 获取结果并将结果放在 id 为 TargetDiv 的 div 内的同一页面中

编辑：

使用您当前的 Index.cshtml

创建一个新视图 详细信息.cshtml

内容如下：（需要的时候可以改）

@model MvcMovie.Models.Movie

<h2>Index for @Model.Title</h2>

不要编辑你的控制器并添加 ActionResult Details()

public class Movies2Controller : Controller
{
    private Jess_MoviesEntities db = new Jess_MoviesEntities();

    public ActionResult Index()
    {
        return View(db.Movies.ToList());
    }

    public ActionResult OneMovie(int id)
    {
        return View();
    }

    public ActionResult Details(int id)
    {
        //get model from database
        return PartialView(db.Movies.First(x => x.ID == id));
    }
}

Answer 2

如果你熟悉 jquery 和 ajax 你可以使用它。

例如：

 $("MyLick").click(function(){ 
         $.post("/MyDetailUrl",{Id:5},function(content){alert(content);});

});

这只是一个例子，你可以找到很多解决方案。

编辑帖子

在新项目中执行此步骤，然后在您的项目中执行相同操作。

1-在控制器中创建 2 个动作

public ActionResult Index() // To Show the Main Movie Page
{
    return View();
}

Public ActionResult ShowDetail(int id) //To Show Detail information
{
    // Do the Database operations to retrive movie information
    return Content("This is my Detail information");
}

2- 在控制器的 Index.cshtml 文件中

<input type="button" id="showDetail"><span>Show Detail</span></input>

<div id="detailBox"></div>

<script src="~/Scripts/jquery-2.2.0.js"></script>

$("#showDetail").click(function(){ 
         $.post("/Movie/ShowDetail",{Id:5},function(content){$("#detailBox").html(content)});

});