Question

我希望在同一页面中点击查看链接后在主视图中显示部分视图。请帮帮我，我是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);  
        }

这是主要观点 AddDetail视图（主视图）。

@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>
}

请帮助我!!

Answer 1

您应该使用

@Ajax.ActionLink

<强>原因：

Ajax.ActionLink非常类似于Html.ActionLink，它还会创建超链接单击此处但是当用户单击它并启用了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"}) }

Answer 2

在特定事件上使用其ID加载div后面（比如按住主视图的按钮），然后在主视图上加载部分视图。

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

Answer 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?

使用mvc 4在视图中显示局部视图

3 个答案: