您的位置: 首页 >日志>前端技术>详细内容

前端技术

siteAzure系统 首页ajax随机加载图片列表

来源:本站原创 发布时间:2021-07-08 09:23:23 浏览次数: 【字体:

最近项目,首页有一个人物专栏板块,该栏目下有上百个专家导师究研员,按正常方式来制作的话,关于排序在同级别职称下就是一个比较敏感的问题。谁排在前面都不合适,而且还要不定期更换排序,所以就有了随机排序的这个需求。需要随机显示到首页中,且每次刷新到都要展示不同的内容。

于是搜遍了整个模板标签文件,在会员中心下的“人性化首页”中找到一组随机显示的标签。拿来测试后,发现参数并不全,无法调用简介内容

\Views.Phone\_Common\ContentManage\Home\我的个性化首页.cshtml


<div id="content">

   <ul class="randomList">

       @Power.Partial("文章随机显示列表", new { Count = 3, NodeIdentifier = articleString, TitleLength = 200, DisplayDateTime = "yyyy-MM-dd", ImageWidth = 200, ImageHeight = 150 })

       @Power.Partial("图片随机显示列表", new { Count = 3, NodeIdentifier = photoString, TitleLength = 200, DisplayDateTime = "yyyy-MM-dd", ImageWidth = 240, ImageHeight = 180 })

       @Power.Partial("视频随机显示列表", new { Count = 3, NodeIdentifier = videoString, TitleLength = 200, DisplayDateTime = "yyyy-MM-dd", ImageWidth = 700, ImageHeight = 390 })

   </ul>

</div>

如果直接使用现在的代码,因为系统有缓存,所以不能实现每次刷新都是随机调用,所以要改为ajax调用方式。

 首页ajax调用代码

<div id="indRwzl ">

<div class="bd">

 <ul class="leaderList" id="datalist" ></ul>

</div>

</div>

          <script>

               refreshData();

               function refreshData() {

                   $.ajax({

                       url: '@(SiteHelper.GetSiteUrl(SiteContext.Current.SiteId))/Ajax/AjaxPartial',

                       type: 'post',

                       data: {

                           partialViewName: "文章随机显示列表",

                           parameters:"{Count:30,TitleLength:20,NodeIdentifier:'rcdw', DisplayDateTime:'yyyy-MM-dd', ImageWidth:216, ImageHeight:280,ContentLength:40 , ExtendField:true }"

                       },

                       success: function (response) {

                          $("#datalist").html(response.html);

                          $("#indRwzl .bd").addClass('successload')

                       }

                   });

               }

           </script>

加载完成后,再给.bd加一个class,用于控制loading图片的隐藏

$("#indRwzl .bd").addClass('successload')


标签内容:


@Power.VisualizationPartialView(new

{

    Description = "文章随机显示列表",

    Parameters = new

    {

        Count = new { DisplayName = "输出数量", Type = "Int32", ControlType = "Integer", DefaultValue = 5 },

        TitleLength = new { DisplayName = "标题长度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },

        ContentLength = new { DisplayName = "内容长度", Type = "Int32", ControlType = "Integer", DefaultValue = 0 },

        DisplayDateTime = new { DisplayName = "显示日期格式", Type = "String", ControlType = "ComboBox", DefaultValue = "", ListItemKey = "DateFormat" },

        ImageWidth = new { DisplayName = "图片宽度", Type = "Int32", ControlType = "Integer", DefaultValue = 400 },

        ImageHeight = new { DisplayName = "图片高度", Type = "Int32", ControlType = "Integer", DefaultValue = 300 },

        NodeIdentifier = new { DisplayName = "节点标识符", Type = "String", ControlType = "Text", DefaultValue = "" },

        LinkBlankTarget = new { DisplayName = "是否新窗口打开,true情况下由节点设置决定", Type = "Boolean", ControlType = "Boolean", DefaultValue = true, ToolTip = "是否新窗口打开,true情况下由节点设置决定" },

        DisplayNodeName = new { DisplayName = "显示节点名称", Type = "Boolean", ControlType = "Boolean", DefaultValue = false },

        ResizeModelType = new { DisplayName = "截图片的方式", Type = "Int32", ControlType = "Integer", DefaultValue = 1 }

    }

})

@{

    //参数

    int TitleLength = Param.TitleLength ?? 50; // 标题长度

    int ContentLength = Param.ContentLength ?? 200; //内容长度

    var DisplayDateTime = Param.DisplayDateTime ?? ""; //日期格式

    int ImageWidth = Param.ImageWidth ?? 400; // 图片宽度

    int ImageHeight = Param.ImageHeight ?? 300; // 图片高度

    var LinkBlankTarget = Param.LinkBlankTarget ?? true; //否新窗口打开,true情况下由节点设置决定

    var DisplayNodeName = Param.DisplayNodeName ?? false; //显示节点名称

    int Count = Param.Count ?? 5;

    string nodeIdentifier = Param.NodeIdentifier;

    var articles = new ArticleService().GetPicArticle(Count,nodeIdentifier, true,"",null,"",false).OrderBy(r => Guid.NewGuid());

    ResizeModelType resizeType = Param.ResizeModelType ?? ResizeModelType.CenterCrop;

    Node node = null;

    string target = "";

}


@if ((articles != null) && articles.Any())

{

    foreach (var item in articles)

    {

        node = new NodeService().GetEntity(x => x.NodeId == item.NodeId);

        target = LinkBlankTarget && node != null && node.ContentOpenInNewTarget ? "_blank" : null;

        <li class="articleLi">

            

            <a target="@target" href="@item.ContentUrl()" title="@item.Title">



                @if (!string.IsNullOrEmpty(item.FeaturedImage))

                {

                    <div class="pic">

                        <img alt="@item.Title" src="@Power.Thumbnail(item.FeaturedImage.ToUrl(), ImageWidth, ImageHeight, resizeType)" />

                    </div>

                }


                <div class="con">


                    <div class="title">

                        <a target="@target" class="tit" href="@item.ContentUrl()">@item.Title.CutText(TitleLength, "…")</a>

                    </div>

            

                    @if (ContentLength > 0)

                    {

                        <div class="intro">

                           @item.Intro(ContentLength, "...")

                        </div>

                    }

            

                    <div class="others">

                        @if (DisplayNodeName)

                        {

                            <span class="node">[@node.NodeName]</span>

                        }

                        @if (!string.IsNullOrEmpty(DisplayDateTime))

                        {

                            <span class="date">@item.PublishTime.ToString(DisplayDateTime)</span>

                        }

                    </div>


                </div>


            </a>


        </li>

    }

}


4c81a929cfe04548a06231e62449fe40.Gif

完成后的效果

 

 


 

×

用户登录