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

在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" οnmοuseοver="this.style.background='lightblue'" οnmοuseοut="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)

 

转载于:https://www.cnblogs.com/jinghuimin/p/5833119.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值