[英]How to render partial view with in Main view on link clicking in MVC..?
I have controller Action Method like below wil return all details from DB. 我有如下所示的控制器操作方法,将从数据库返回所有详细信息。
public ActionResult Index()
{
BusDataContext db = new BusDataContext();
List<BusDetails> buses = db.Bus.ToList();
return View(buses);
}
Which will return list of details to Main view which is Strongly typed view like below. 它将详细信息列表返回到主视图,即如下所示的强类型视图。
@model IEnumerable<MVC_DAL.BusDetails>
<p>
@Html.ActionLink("Create New", "AddBus")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.BusSrlNo)
</th>
<th>
@Html.DisplayNameFor(model => model.BusName)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelIte => item.BusSrlNo)
</td>
<td>
@Html.DisplayFor(modelItem => item.BusName)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.BusSrlNo }) |
@*@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo }) |*@
@Ajax.ActionLink("Details", "Details", new { id = item.BusSrlNo }, new AjaxOptions{UpdateTargetId="update" })
@Html.ActionLink("Delete", "Delete", new { id = item.BusSrlNo })
</td>
</tr>
}
</table>
<div id="update">
</div>
With Model Class as 以Model Class为
public class BusDetails
{
public int BusSrlNo { get; set; }
public string BusName { get; set; }
}
And Details ActionMethod consists 和详细信息ActionMethod包括
public PartialViewResult Details(int id)
{
BusDataContext detail = new BusDataContext();
BusDetails bsdtledit = detail.Get_Edit(id);
return PartialView("Details",bsdtledit);
}
Corresponding partial view with above model class is below: 与上面的模型类对应的局部视图如下:
@model MVC_DAL.BusDetails
<div>
<h4>BusDetails</h4>
<hr />
<dl class="dl-horizontal">
<dt>
@Html.DisplayNameFor(model => model.BusSrlNo)
</dt>
<dd>
@Html.DisplayFor(model => model.BusSrlNo)
</dd>
<dt>
@Html.DisplayNameFor(model => model.BusName)
</dt>
<dd>
@Html.DisplayFor(model => model.BusName)
</dd>
</dl>
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { /* id = Model.PrimaryKey */ }) |
@Html.ActionLink("Back to List", "Index")
</p>
So overall i need to display above partial view in Main view only after i click Details link action which is there in Main view.Above code will Display details in seperatetly without main view rather than updating in same page at div (id="update")section. 因此,总体而言,仅在单击主视图中的“详细信息”链接操作之后,才需要在主视图中的局部视图上方显示。以上代码将在没有主视图的情况下单独显示详细信息,而不是在div的同一页面中进行更新(id =“ update” )部分。 So how do i update in same Main View..? 那么,如何在同一主视图中进行更新?
That's where Microsoft came out with the Ajax.ActionLink . 这就是Microsoft推出Ajax.ActionLink的地方 。 That's one option; 那是一种选择; I personally like jQuery better, so I do something like: 我个人比较喜欢jQuery,所以我做些类似的事情:
$.ajax({
type: "get",
url: "@Url.Action("Partial", "Controller"),
success: function(d) {
/* d is the HTML of the returned response */
$("#SomeParentIDForSection").html(d); //replaces previous HTML with action
}
});
Just make sure your controller returns a partial view: 只要确保您的控制器返回局部视图即可:
public ActionResult Partial()
{
var model = ..
//init work
return PartialView(model);
}
See these references for more information and some other approaches: 有关更多信息和其他方法,请参见以下参考资料:
Supposing that you will show you partial view in the following div: 假设您将在以下div中显示部分视图:
<div class="js-bus-details">
</div>
You could make an ajax call and update the html inside this div. 您可以进行ajax调用并在此div中更新html。 This can be done like below: 可以像下面这样完成:
@Html.ActionLink("Details", "Details", new { id = item.BusSrlNo, @class="js-bus-details-link" })
and then place the following script at the bottom of your page. 然后将以下脚本放在页面底部。
<script>
$(function(){
$(".js-bus-datails-link").click(function(){
var busId = $(this).data("id");
$.ajax({
method: "GET"
url: "", // Here you have to place the relative url to your action
data: { id: busId }
cache: false
success: function(e){
$(".js-bus-details").html(e);
}
});
})
})
</script>
by click event in javascript: 通过点击事件在javascript中:
$("#myCodes").load('@Url.Action("PartialViewResult", "Controller_Name")');
NB: PartialViewResult
must return PartialView(model);
注意: PartialViewResult
必须返回PartialView(model);
and .cshtml
page a partial page 和.cshtml
页面的部分页面
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.