MVC 局部加载页面的实例

我们在做MVC 进行某一块的局部刷新，有的使用AJAX 请求，有的使用局部页；

下面我给大家推荐一种使用局部页面实现的这种方式：

第一步：

嵌套视图页

 <div id="showAudit">

        @*操作信息*@

        @{Html.RenderPartial("ShowAudit", Model);}

    </div>

第二步：

编写后台代码

[HttpGet]

        public ActionResult ShowAudit(int id)

        {

            using (var _ctx = new BtDbContext())

            {

                var memberSupply = _ctx.MemberSupplys.FirstOrDefault(c => c.MemberId == id);

                MemberSupplyModel model = new MemberSupplyModel();

                if (memberSupply != null)

                {

                    model.MemberId          = memberSupply.MemberId;

                    model.OrderNumber       = memberSupply.OrderNumber;

                    model.CardId            = memberSupply.CardId;

                    model.Name              = memberSupply.Name;

                    model.MemberMobile      = memberSupply.MemberMobile;

                    model.State             = memberSupply.State;

                    model.CreateTime        = memberSupply.CreateTime;

                    model.UpdateTime        = memberSupply.UpdateTime;

                    model.CompanyName       = memberSupply.CompanyName;

                    model.CompanyAddress    = memberSupply.CompanyAddress;

                    model.CompanyPhone      = memberSupply.CompanyPhone;

                    model.CompanyUrl        = memberSupply.CompanyUrl;

                    model.ManagementProduct = memberSupply.ManagementProduct;

                    model.ContactJob        = memberSupply.ContactJob;

                    model.ContactPeople     = memberSupply.ContactPeople;

                    model.ContactMobile     = memberSupply.ContactMobile;

                    model.Memo              = memberSupply.Memo;

                    model.OpEmployeeName    = memberSupply.OpEmployeeName;

                }

                return PartialView(model);

            }

        }

第三步：

编写视图页面：

@using WechatMall.Common.Extensions;

@model WechatMall.Model.ViewModel.MemberSupplyModel

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@if (Model.State != WechatMall.Common.EnumHelper.MemberApplyForStatus.AuditNot)

{

<table class="ltable" style="margin-top:30px;">

    <thead>

        <tr>

            <th colspan="" style=" text-align:left;padding-left:20px; font-weight:bold; background-color:#ffffff; ">操作信息</th>

        </tr>

    </thead>

    <tbody class="ltbody">

        <tr>

            <td style="width:18%">@Html.DisplayNameFor(model => model.OpEmployeeName)</td>

            <td style="width:18%">

                @Html.DisplayFor(modelItem => Model.OpEmployeeName)

            </td>

            <td>@Html.DisplayNameFor(model => model.State)</td>

            <td style="width:15%">

                @Model.State.ToDescriptionString()

            </td>

            <td>@Html.DisplayNameFor(model => model.UpdateTime)</td>

            <td>

                @Html.DisplayFor(modelItem => Model.UpdateTime)

            </td>

        </tr>

        <tr>

            <td>@Html.DisplayNameFor(model => model.Memo)</td>

            <td colspan="">

                @Html.DisplayFor(modelItem => Model.Memo)

            </td>

        </tr>

    </tbody>

</table>

}

第四步：

编写JS 代码

    $("#sbmbtn").click(function () {

            $.post('@Url.Action("AuditDispose", "Members")', $("#form1").serialize(), function (json) {

                if (json.f) {

                    $("#showAudit").load('@Url.Action("ShowAudit", "Members", new { id = Model.MemberId }, Request.Url.Scheme)')

                }

                else {

                    alert(json.ext);

                }

            });

        });

这样就可以轻松搞定了；推荐一下参考网址：https://cmatskas.com/update-an-mvc-partial-view-with-ajax/

那有里有不对的地方希望大家指出来，或者有更好的方法提出来，大家相互学习，进步..

巴特西

MVC 局部加载页面的实例

最新文章

热门文章