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="6" 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="5">
                @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/

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