显示局部视图中使用MVC 4期 [英] Display partial view in a view using mvc 4
问题描述
我要在单击视图链接，在同一页中显示一个主视图内的局部视图。请帮助我，我在MVC新手。是否有任何其他方式做到这一点比使用Ajax.ActionLink（）等？
I want to display a partial view inside a main view upon clicking view link, within the same page. Help me please, I am newbie in MVC. Is there any other way to do it other than using the Ajax.ActionLink()?
这是我添加细节控制器。
This is my Add Detail controller.
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视图（主视图）。
Here is the main view AddDetail view(main view).
@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");
}
下面是部分视图（显示视图）。
Here is the partial view (Display view).
@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>
}
请帮助我！
推荐答案
您应该使用
@Ajax.ActionLink
原因：
Ajax.ActionLink很像Html.ActionLink对口，也这里创建超链接点击，但是当用户点击它，并有支持JavaScript的浏览器，Ajax.ActionLink发送，而不是导航到新的URL异步请求。随着Ajax.ActionLink我们指定调用哪些控制器的操作方法，还可以指定如何处理的响应来从操作方法回做，它适合你的情况非常好。
Ajax.ActionLink is much like Html.ActionLink counterpart, it also creates the hyperlink Click here but when user clicks it and have the JavaScript enabled browser, Ajax.ActionLink sends the asynchronous request instead of navigating to new URL. With Ajax.ActionLink we specify what controller’s action method to invoke and also specify what to do with the response coming back from the action method and it suits your case really well.
而不是
@Html.ActionLink("View", "DisplayDetails")
说明：
将呈现相同的索引画面，而不是打开新窗口中的局部视图。
It will render the partial view on the same index screen instead of opening new window.
像这样
@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"})
}
这篇关于显示局部视图中使用MVC 4期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
