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

Question

我的问题是单击同一页面上的详细信息 link 时如何显示所选电影的详细信息？当前，当您单击 hyperlink 时，您将被重定向到将显示有关该电影的信息的控制器和操作，例如 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

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

例如：

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

});

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

编辑Post

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

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)});

});

Answer 2

在你的_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>

如果你成功了，请告诉我。

一定要让你的 'Details' 查看部分视图，否则你最终可能会在目标 dive

中添加 _Layout.cshtml

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

编辑：

使用您当前的 Index.cshtml

创建新视图 Details.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));
    }
}

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

MVC 4 - Show Item Details in the same page for single row

c#

asp.net

partial-views

button

asp.net-mvc-4