您的位置：首页 > 其它

MVC中局部刷新PartialView(与Ajax.BeginForm结合)的用法

2016-09-02 13:04 309 查看

在MVC程序中我们通常都会用到局部刷新的功能，比如点击”搜索“按钮时我们只希望结果Table刷新，而搜索的条件部分不变

Index页面如下：

@model IEnumerable<GetServerRelation.Models.ServerShowInfoModel>

@{
ViewBag.Title = "IndexPage";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>IndexPage</h2>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetRelationTree</title>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script type="text/javascript">
function btnclicksea() {
var id = $("#bssel").val();
$('#divservices').load('/Home/GetResults?id=' + id);
}
function btnclickcreate() {
var id = $("#bssel").val();
if (confirm('Are you sure Create id?')) {
$.ajax({
type: "post",
url: "home/CreateBusinessToCMDB",
data: { bsid: id },
dataType: "text",
success: function (data) {
if (data == "Sucess") {
alert("Create Sucess !");
}
}
});
}
else {
return;
}
}
</script>
</head>
<body>
<div>
@using (Ajax.BeginForm("GetResults", "Home", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divservices", InsertionMode = InsertionMode.Replace }))
{
<table>
<tr>
<td><span style=" font-size:15px">Business Name :</span></td>
<td>
<select style="width:230px;height:26px" id="bssel" name="bssel">
@foreach (var item in ViewBag.BS)
{
<option value="@item.id">
@item.name
</option>
}
</select>
</td>
<td><input type="submit" id="seaservice" value="Search" /></td>
</tr>
</table>
}
</div>

<div style="height: 5px; width: 955px; margin-left: auto; margin-right: auto;margin-top:10px"></div>
<div id="divservices">
@Html.Partial("~/Views/Home/ServiceView.cshtml", Model)
</div>
</body>
</html>

在以上Index页面中我们希望刷新的部分是id="divservices"的div在后台Controller中我们需找到“GetResults”这个Action 如下：

[HttpPost]
public ActionResult GetResults()
{
int id = Convert.ToInt32(Request.Form["bssel"]);
List<ServerShowInfoModel> list = GetServicesByBSid(id);
ViewBag.count = list.Count;
return PartialView("~/Views/Home/ServiceView.cshtml", list); //list可以是(from p in students select p).tolist();等
}

当然我们还需要建PartialView的页面(ServiceView.cshtml) 例如：

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>ServiceView</title>
</head>
<body>
<div id="services">
@*Total data: @Model.Count()*@
<table style="border :solid 1px green" width="960px">
<tr style="border:solid 1px green">
<th style="border:solid 1px green;text-align:center">Id</th>
<th style="border:solid 1px green;text-align:center">hostName</th>
<th style="border: solid 1px green; text-align: center">displayName</th>

</tr>
@foreach (var item in Model)
{
<tr class="trs" onmouseover="this.style.background='lightblue'" onmouseout="this.style.background=''" style="border:solid 1px green;">
<td style=" border:solid 1px green">@item.id</td>
<td style="border:solid 1px green">@item.hostName</td>
<td style="border:solid 1px green">@item.displayName</td>

</tr>
}
</table>
</div>

</body>
</html>

注：上面标红的几个js文件必须要引用否则可能没效果(F:/Projects/VNTDemoTest)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航