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>

MovieController

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

});

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

编辑帖子

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

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 id="TargetDiv"></div>

添加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() 之后它将获取网址，例如Details/1，并使用Ajax获取结果并将结果放在ID为TargetDiv的div内的同一页面中

修改

使用您当前的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 - 在单行的同一页面中显示项目详细信息

2 个答案: