使用 mvc 4 在视图中显示部分视图答案

【问题标题】：Display partial view in a view using mvc 4使用 mvc 4 在视图中显示部分视图
【发布时间】：2014-09-11 08:28:50
【问题描述】：

我想在同一页面内单击视图链接时在主视图内显示部分视图。请帮助我，我是MVC的新手。除了使用 Ajax.ActionLink() 之外，还有其他方法吗？

这是我的添加细节控制器。

public ActionResult DisplayDetails()  
        {  
             SqlConnection connect = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ToString());  
            connect.Open();  
            DataSet ds = ExecuteQuery("select EmployeeID, EmployeeName, EmailID from EmployeeDetails");  
            IList<AddDetails> lst = new List<AddDetails>();  
            AddDetails ad;  
            foreach (DataRow dr in ds.Tables[0].Rows)  
            {  
                ad = new AddDetails();  
                ad.EmployeeId = Convert.ToInt32(dr["EmployeeID"]);  
                ad.EmployeeName = dr["EmployeeName"].ToString();  
                ad.EmailId = dr["EmailID"].ToString();  
                lst.Add(ad);  
            }  
            connect.Close();  
            return PartialView("DisplayDetails", lst);  
        }

这是主视图添加详细视图（主视图）。

@model mvcEmployeeTask.Models.AddDetails
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
@using (Html.BeginForm("AddDetail", "AddDetails", FormMethod.Post))
{

    <table>
        @*        <tr>
            <td>
                @(Html.Label("Employee ID : "))
            </td>
            <td>
                @Html.TextBoxFor(model => model.EmployeeId)
                @Html.HiddenFor(model => model.EmployeeId)
            </td>
        </tr>*@
        @Html.HiddenFor(model => model.EmployeeId)
        <tr>
            <td>
                @(Html.Label("Employee Name : "))
            </td>
            <td>
                @(Html.TextBoxFor(model => model.EmployeeName))
            </td>
        </tr>
        <tr>
            <td>
                @(Html.Label("Email ID : "))
            </td>
            <td>
                @(Html.TextBoxFor(model => model.EmailId))
            </td>
        </tr>
        <tr>
            <td>
                <input type="submit" value="submit" name="Add" />
            </td>
            <td>
                @* @Html.ActionLink("View", "DisplayDetails")*@
                @Html.ActionLink("View", "DisplayDetails")
            </td>
        </tr>
    </table>



    @Html.Action("DisplayDetails", "AddDetails");

}

这里是局部视图（显示视图）。

@model IList<mvcEmployeeTask.Models.AddDetails>

@{
    Layout = null;
}
@using (Html.BeginForm("DisplayDetails", "AddDetails", FormMethod.Get))
{
    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>DisplayDetails</title>
         <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    </head>
    <body> <div class="table" align="center">
            <table border="1" >
                <tr>
                    <th>EmployeeID</th>
                    <th>EmployeeName</th>
                    <th>Email</th>
                </tr>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @item.EmployeeId
                        </td>
                        <td>
                            @item.EmployeeName
                        </td>
                        <td>
                            @item.EmailId
                        </td>
                        <td>
                             @Html.ActionLink("Edit", "EditDetails", new { id= item.EmployeeId })
                        </td>
                        <td>
                             @Html.ActionLink("Delete", "DeleteDetails", new { id= item.EmployeeId })
                        </td>
                    </tr>

                }
            </table>
        </div>


    </body>
    </html>
}

请帮帮我！！

【问题讨论】：

首先将您的操作链接更正为@Html.ActionLink("DisplayDetails", "View") 并且为了在点击操作链接时加载部分内容，然后您可以使用 jquery(ajax 请求)
好的，有没有其他不用jQuery的方法？有一个类似的问题。网址如下：stackoverflow.com/questions/7295835/…
不使用 ajax 助手和 jquery.. 我认为不可能..
你能帮帮我吗？正如你提到的，我已经进行了更正。
您的主视图有一个比部分视图更简单的模型（这是主视图具有的单个项目的列表）。这似乎不正确（似乎倒退了）。你能澄清一下吗？

标签： asp.net-mvc asp.net-mvc-4 razor asp.net-mvc-partialview

【解决方案1】：

你应该使用

@Ajax.ActionLink

原因：

Ajax.ActionLink 很像 Html.ActionLink 对应物，它也创建超链接 Click here 但是当用户单击它并启用 JavaScript 浏览器时，Ajax.ActionLink 发送异步请求而不是导航到新 URL。使用 Ajax.ActionLink，我们指定要调用的控制器的操作方法，并指定如何处理从操作方法返回的响应，它非常适合您的情况。

代替

@Html.ActionLink("View", "DisplayDetails")

说明：

它将在同一索引屏幕上呈现部分视图，而不是打开新窗口。

类似的东西

@Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"}) //yourviewdiv is id of div where you want to show your partial view onClick

您的主视图

@model mvcEmployeeTask.Models.AddDetails  

<div id = "yourviewDiv">
  // it will populate your partial view here.
</div>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 

@using (Html.BeginForm("AddDetail", "AddDetails", FormMethod.Post))  
{  
@Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"})
}

【讨论】：

问题状态：“除了使用 Ajax.ActionLink() 之外，还有其他方法吗？”。你可能想澄清他为什么要使用。
@TrueBlueAussie 是的，你是对的，我必须说明原因，所以编辑了我的问题并提供了使用它的理由，感谢您的有用评论。
更好，但您是否不需要至少在AjaxOptions 参数中指定UpdateTargetId 以便它知道将返回的内容放在哪里？
@TrueBlueAussie 他必须在主视图中有项目列表，因此如果他单击视图中的特定项目，他可以通过参数以及 @Ajax.ActionLink(" ", "ViewDetails", "Auditor ", new { id = item.id }, new AjaxOptions { UpdateTargetId = "yourviewDiv"}) 如果没有项目列表，那么只需 @Ajax.ActionLink(" ", "ViewDetails", "Auditor", new AjaxOptions { UpdateTargetId = "yourviewDiv"})
但它重定向到新页面。我想在同一页面内显示。

【解决方案2】：

在特定事件上使用其 id 加载以下 div（比如单击主视图的按钮），然后将在主视图上加载部分视图。

<div id="loadpartialview">
    @Html.Partial("_yourPartialViewName")
</div>

【讨论】：

这段代码将总是加载局部视图。你能更详细地解释一下你的意思吗？
除非您不加载 div 标签，否则您的部分视图将不会直接加载。 $("#loadpartialview").show(); // 此代码将加载您的局部视图
我认为您对客户端和服务器操作感到困惑。 @Html.Partial 在页面返回之前呈现部分视图服务器端。 $("#loadpartialview").show(); 在显示时不会导致加载。它只会显示 div（假设它是隐藏的，你的例子没有提到）。
附言。您的公司网站似乎离线（我很好奇您在那里做什么）。
这正是我想要的：加载（主）视图的部分加载，因此这是一个有效的示例

【解决方案3】：

这里有一个很好的教程如何实现它：

http://mvc4beginner.com/Tutorial/MVC-Partial-Views.html

简单版的代码是

  <div>
    @Html.Partial("PartialView1", Model.partialModel)

</div>

理论：

要使其动态化，您需要创建 ajax 调用以在服务器上呈现操作并将结果插入页面。

这里已经回答了如何实现这一点的问题：

MVC Partial view with controller, ajax - how do I ge the partial controller to get data?

【讨论】：

问题询问如何动态加载局部视图（在链接点击等时）。这只会将部分视图注入到视图中。
您引用的另一个答案不是一个好的答案。最好自己尝试回答。 Ajax.ActionLink 是一个合适的解决方案。