MVC初学笔记(4):分部视图异步加载

来源：互联网发布：天津mac专柜在哪编辑：程序博客网时间：2024/06/04 20:03

MVC里面，每个Action对应一个视图。我开始以为一个视图就是一个完整的页面了，这页面上所有的信息都是由一个Action来完成的。可实际上有时候一个页面上的信息一个Action根本没办法完成，比如这里，这是一个显示很多条数据信息的界面，每条数据上都有按钮，点击按钮会异步加载显示该条数据的详细，一个Action和View是做不到的。这里就需要用到分部视图了。

分部视图其实也是视图了，只不过是其他视图的一小部分,如不是重复使用，可以写自己独立的样式和脚本。像我的项目这里，页面上显示详细的小模块都是一样的，用能重复使用的分部视图是最好的选择了，但样式表和JS最好不要放在分部视图中。在这里，数据列表是一个大的视图(WaitOpenList.cshtml)，它主要的工作是显示列表数据的。分部视图(EmailInfo.cshtml)主要工作是显示某一条数据的详细信息。因此，在加载分部视图的时候，其对应的Action是需要数据ID来作为参数的。列表数据视图对应的Action(它的参数是搜索条件，这里不提)：

        public ActionResult WaitOpenList(string name,int days)        {            List<WaitOpenEntity> datalist =  _bll.WaitOpenList(days, name);            if (datalist==null ||datalist.Count == 0) { return null; }            return View(datalist);        }

主视图前端：

@using Renos.OpenAccount.Web.Permission@model IEnumerable<Renos.OpenAccount.Model.WaitOpen.WaitOpenEntity>@{Layout=null;}<div class="conbox">    @foreach (var item in Model)    {        <div class="content">            <div class="zw">                <ul class="zwcont1">                    <li>企业名称:</li>                   <li class="hyhid">@item.CompanyName</li> @* @item.Aid*@                                       <li>@if (PermissionExtension.Permssion("WaitOpenApp", "SendNotification"))            {<a href="javascript:void(0)" onclick="Send('@item.Aid','@item.PNOId','@item.Id')">发送通知</a>}</li>                                    </ul>                <ul class="zwcont2">                    <li>开户时间：@item.CreateTime1.ToShortDateString()</li>                    <li>开户方：@item.BelongsCompany</li>                    <li>受理人：@item.Name</li>                </ul>                <ul class="zwcont3">                    <li>账户：@item.AccountName</li>                    <li>联系人：@item.ContactName</li>                    <li>联系电话：@item.Mobile</li>                </ul>                <ul class="zwcont4">                    <li>所属公证处：@item.PNOName</li>                    <li class="mailContent">                        邮件开通：                        @if (item.EmailState == 1){ <a href="javascript:void(0);"onclick="getEmail('@item.Aid','@item.PNOId','@item.Id')"><span class="aad26e">已开通</span></a>}else if (item.EmailState == 2){<span class="ff99">未开通</span>}                        else if (item.EmailState == 3)                        {                            if (PermissionExtension.Permssion("WaitOpenApp", "EmailUpdateInfo"))            {<a href="javascript:void(0)" onclick="setEmail('@item.Aid', '@item.PNOId', '@item.Id')"><span class="c648be">已设置</span></a>}else{<a><span class="c648be">已设置</span></a>}}                        else                        {<span class="ff99">未设置</span> }                    </li>                    <li class="faxContent">                        传真/保全号开通：                        @if (item.FVState == 1){ <a href="javascript:void(0);" onclick="getFaxVoices('@item.Aid','@item.PNOId','@item.Id')"><span class="aad26e">已开通</span></a>}else if (item.FVState == 2){<span class="ff99">未开通</span> }                        else if (item.FVState == 3)                        {                            if (PermissionExtension.Permssion("WaitOpenApp", "FaxVoicesUpdateInfo"))            {<a href="javascript:void(0);" onclick="setFaxVoices('@item.Aid','@item.PNOId','@item.Id')"><span class="c648be">已设置</span></a>}else{<a><span class="c648be">已设置</span></a>}}                        else                        {<span class="ff99">未设置</span>}                    </li>                    <li>                        RDP：                        @if (item.RDPState == 1)                        {<span class="aad26e">已开通</span>}                        else                        {<span class="ff99">未开通</span>}                    </li>                </ul>            </div>        </div>        <div id="@item.Id" name="hidDetail"></div>    }</div>

这里最下面name为hidDetail的div就是用于显示详细的，分部视图会加载在这里。这里div的ID使用的是每条数据的唯一标识ID，这样在加载分部视图的时候就能准确的加载到该数据的下方了。那个getEmail的是点击显示详细的事件。

分部视图(EmailInfo.cshtml)的Action：

        public ActionResult EmailInfo(string Id,string pnoId)        {                                  OpenEmailInfoEntity model = string.IsNullOrEmpty(pnoId)? _bll.getEmail(Id):_bll.getEmail(Id, pnoId);                        return View(model);//返回详细信息视图        }

分部视图前端：

@model Renos.OpenAccount.Model.WaitOpen.OpenEmailInfoEntity           @{               Layout = null;           }<div class="mailContent1 white_content" id="@Model.Id">    <div class="content22">        <div class="ktfs">            <div class="gzcxz">@(Model.DomainNameType==0?"客户域名":"公证处域名")</div>            <div class="clear"></div>        </div>        <div class="bk">            <ul class="bqczcon">                <li>邮箱地址：@Model.EmailAddress</li>                <li>用户限制数：@Model.UserLimitedNum</li>            </ul>            <ul class="bqczcon">                <li>邮箱密码：@Model.Password</li>                <li>可分配容量：@Model.AssignableCapacity</li>            </ul>            <ul class="bqczcon">                <li>域　　名：@Model.DomainName<!--</b>--></li>                <li>使用年限：@Model.DurableYears</li>            </ul>        <div class="clear"></div></div>        <div class="conbtn2">            <div class="conbtn2right"><a class="qx" href="javascript:void(0)" onclick="closeDiv('@Model.Id')">取消</a></div>        </div>    </div>    <div class="clear"></div></div>

主视图和分部视图都做好了。那么在主视图中的数据列中点击按钮该怎样异步加载分部视图呢？

其实引入Jquery包(jquery-1.8.2.min.js等版本库)，使用$.load就可以了。配合上面蓝色标注事件，在主视图添加JS脚本：

    function getEmail(Id, pnoId, divId) {        var div = $("#" + divId);            div.load('@Url.Content("~/WaitOpenApp/EmailInfo")', { "Id": Id, "pnoId": pnoId });            }

关闭详细窗口：

    function closeDiv(divid) {        $("#" + divid).remove();    }

这样就实现了异步加载分部视图了。

当然，加载视图的方法肯定不只这一种了，像@Html.Partial(),@Html.RenderPartial等等都是可以加载视图的。

PS:

这里数据列表其实也是一个分部视图，大的视图是有搜索条件的。如果条件搜索后需要异步更新数据列表，把数据列表做成分部视图就可以了。不过在提交搜索条件时，使用的是Jquery-form.js包。将每个条件文本框的name属性设为与后台搜索条件参数一致。放在form表单中，使用$.ajaxSumbit方法提交，然后获得结果列表视图，将其异步加载至主视图上。

后台用于搜索的Action,返回结果列表视图：

        //查询列表        public ActionResult List(UserQueryModel u)        {            List<UserQueryEntity> data = _bll.GetUserQueryList(u);                        return View(data);        }

在前端显示：

    function search(){                $('#searchForm').ajaxSubmit({            type: 'post',            url: '@Url.Content("~/UserQuery/List")',            success: function (data) {                $("#con").html(data);            }        });              }

使用$.html()来加载分部视图(结果数据列表)，说明视图其实不过是一串HTML而已啊。

0 0