bakalr 2018-11-14 11:21 采纳率: 0%
浏览 508

使用MvcPager的时候,点击查询会使js失效

初学mvc,在使用mvcpager分页的时候遇到一个棘手的问题,请教各位大神

            一个后台管理页面view,左边是导航相关,右边设置有一个iframe用于显示不同导航链接
            对应的view
            1.主页面index
     <div class="container-fluid">
        <div class="row">
            <!--RIP左侧固定导航栏-->
            <div class="col-md-2">
                <!--管理列表(使用Prodect页布局)-->
                <div class="list-group RIP-Leftnav" id="RIP-LEFTNAV">
                    <a href="#" class="list-group-item active" id="/RIPManage/RIPDynamic">
                        <h4 class="list-group-item-heading">首页</h4>
                        <p class="list-group-item-text">提供动态信息维护</p>
                    </a>
                    <a href="#" class="list-group-item" id="/RIPManage/RIPProduct">
                        <h4 class="list-group-item-heading">产品与服务</h4>
                        <p class="list-group-item-text">静态信息维护请联系开发人员</p>
                    </a>
                    <a href="#" class="list-group-item" id="/RIPManage/RIPApplication">
                        <h4 class="list-group-item-heading">应用案例</h4>
                        <p class="list-group-item-text">提供动态信息维护</p>
                    </a>
                    <a href="#" class="list-group-item " id="/RIPManage/RIPQuality">
                        <h4 class="list-group-item-heading">质量保证体系</h4>
                        <p class="list-group-item-text">静态信息维护请联系开发人员</p>
                    </a>
                    <a href="#" class="list-group-item " id="/RIPManage/RIPResult">
                        <h4 class="list-group-item-heading">研发能力</h4>
                        <p class="list-group-item-text">提供动态信息维护</p>
                    </a>
                    <a href="#" class="list-group-item " id="/RIPManage/RIPEnterprise">
                        <h4 class="list-group-item-heading">企业信息</h4>
                        <p class="list-group-item-text">静态信息维护请联系开发人员</p>
                    </a>
                </div>
            </div>
            <!--RIP右侧自动管理页-->
            <div class="col-md-10">
                <!--信息管理-->
                <section> 
                   <div class="embed-responsive embed-responsive-4by3">
                       <iframe class="embed-responsive-item" id="RIP-iframe" scrolling="no" name="RIP-iframe" onload="this.height = RIP-iframe.document.body.scrollHeight"
                               width="100%" frameborder="0"></iframe>
                   </div>         
                </section>
            </div>
        </div>
    </div>
2.嵌入的子页面
    <div class="RIP-inside">
        <div class="container">
            <div class="page-header">
                <h1>首页管理</h1>
                <p>提供对企业动态信息的维护管理,包括基本的文字、图片和附件管理</p>
            </div>
            <div class="RIP-Item-padding">
                @*<input class="form-control input-sm" type="text" placeholder="查询内容">*@
                <fieldset>
                    <legend>查询</legend>

                    <div class="RIP-CUDpadding">
                        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                        @Html.ActionLink("新增", "RIPDynamicInsert", new { }, new { @class = "btn btn-primary" })


                        <!-- Indicates a successful or positive action -->
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal" data-tempdata="" id="RIP-Delete">
                            删除
                        </button>
                        <!-- Modal -->
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="myModalLabel">删除确认</h4>
                                    </div>
                                    <div class="modal-body" id="Modal-DeleteContent">



                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        @*<button type="button" class="btn btn-primary" id="RIP-Delete-confirm">确认删除</button>*@
                                        <a href="javascript:void(0)" id="RIP-Delete-confirm" class="btn btn-primary">确认删除</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contextual button for informational alert messages -->
                        <button type="button" class="btn btn-info">修改</button>
                        <p>@TempData["Condition"]</p>
                    </div>

                    @using (Ajax.BeginForm("RIPDynamic", new RouteValueDictionary { { "id", "" } }, new AjaxOptions { UpdateTargetId = "articles", InsertionMode = InsertionMode.Replace }, new RouteValueDictionary { { "id", "searchForm" } }))
                    {

                        <div class="row">
                            <div class="col-md-4"><span>文章标题:</span><input type="text" name="title" id="title" class="form-control" /></div>
                            <div class="col-md-4"><span>上传人员:</span><input type="text" name="author" id="author" class="form-control" /></div>
                            <div class="col-md-4"><span>附件名称:</span><input type="text" name="source" id="source" class="form-control" /></div>
                        </div>

                        <div class="RIP-CUDpadding"><button type="submit" class="btn btn-success">查询</button></div>
                    }
                </fieldset>
            </div>
            <div id="articles">
                @Html.Partial("_AjaxSearchPost", Model)
            </div>
            @section Scripts
        {
                @{Html.RegisterMvcPagerScriptResource();}

            }
            <script>
                $(function () {
                    //1.Table点击效果,可以多选,第二次点击取消效果
                    $('#RIP-Table tr').click(function () {
                        var id = $(this).attr('id');
                        var value = $('#box-' + id + '').prop('checked');
                        if (value === true) {
                            $('#box-' + id + '').prop('checked', false);
                            $(this).removeClass('RIP-Click');
                        }
                        else {
                            $('#box-' + id + '').prop('checked', true);
                            $(this).addClass('RIP-Click');
                        }
                    });
                    //2.获取1中选择好的记录关键信息
                    $('#RIP-Delete').click(function () {
                        var idlist = '';
                        $('#RIP-Delete').removeData('data-tempdata');
                        $('#RIP-Table input').each(function () {
                            if ($(this).prop('checked') === true) {
                                var value = $(this).attr('id');
                                if (value != 'undefine')
                                    idlist += value;
                            }
                        });
                        //根据所选内容是否为空初始化模态框对应内容
                        if (idlist == '') {
                            $('#Modal-DeleteContent').text('需要选择数据');
                            $('#RIP-Delete-confirm').attr('disabled', 'true');
                        }
                        else {
                            $('#RIP-Delete').data('data-tempdata', idlist);
                            var content = $('#RIP-Delete').data('data-tempdata');
                            $('#Modal-DeleteContent').text(content);
                            $('#RIP-Delete-confirm').removeAttr('disabled');
                            $('#RIP-Delete-confirm').attr('href', '/RIPManage/RIPDynamicDelete/did=' + content + '');
                        }
                    });
                    //3.ajax触发删除
                });
            </script>

        </div>
    </div>

</body>

对应的分部页
 @using Webdiyer.WebControls.Mvc;
@model PagedList<Model.ViewModels.RIPDefaultViewModel>
<div style="float:left;width:50%;vertical-align:middle; padding-bottom:10px"><h4>当前页: @Model.CurrentPageIndex / @Model.TotalPageCount 页, 总共:@Model.TotalItemCount 条记录</h4></div>
<div>@Html.Partial("_DefaultTable", Model)</div>
<div class="text-center">@Html.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", CssClass = "pagination", CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>", DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>", PagerItemTemplate = "<li>{0}</li>", Id = "bootstrappager" })</div>
对应的table页
 @model Webdiyer.WebControls.Mvc.PagedList<Model.ViewModels.RIPDefaultViewModel>

<table class="table table-bordered table-hover table-striped table-responsive" id="RIP-Table">
    <tr>
        <th>
            <input role="checkbox" type="checkbox" id="checkbox-fullselect" />
        </th>
        <th class="nowrap">
            <p> @Html.DisplayNameFor(model => model.SingleOrDefault().AutoID)</p>
        </th>
        <th class="nowrap">
            <p>  @Html.DisplayNameFor(model => model.SingleOrDefault().Title)</p>
        </th>
        <th class="nowrap">
            <p>  @Html.DisplayNameFor(model => model.SingleOrDefault().Content)</p>
        </th>
        <th class="nowrap">
            <p>  @Html.DisplayNameFor(model => model.SingleOrDefault().UploadPerson)</p>
        </th>
        <th class="nowrap">
            <p>  @Html.DisplayNameFor(model => model.SingleOrDefault().UploadTime)</p>
        </th>
        <th class="nowrap">
            <p> @Html.DisplayNameFor(model => model.SingleOrDefault().FileName)</p>
        </th>
        <th class="nowrap">
            <p>  @Html.DisplayNameFor(model => model.SingleOrDefault().FileSize)</p>
        </th>
    </tr>
    @foreach (var item in Model)
    {
        <tr id="@Html.DisplayFor(modelitem=>item.AutoID)">
            <td>
                <input role="checkbox" type="checkbox" id="box-@Html.DisplayFor(modelitem=>item.AutoID)" />
            </td>
            <td class="nowrap">
                <p> @Html.DisplayFor(modelitem => item.AutoID)</p>
            </td>
            <td class="nowrap">
                <p> @Html.DisplayFor(modelitem => item.Title)</p>
            </td>
            <td class="nowrap">
                <p>  @Html.DisplayFor(modelitem => item.Content)</p>
            </td>
            <td class="nowrap">
                <p> @Html.DisplayFor(modelitem => item.UploadPerson)</p>
            </td>
            <td class="nowrap">
                <p> @Html.DisplayFor(modelitem => item.UploadTime)</p>
            </td>
            <td class="nowrap">
                <p>  @Html.DisplayFor(modelitem => item.FileName)</p>
            </td>
            <td class="nowrap">
                <p> @Html.DisplayFor(modelitem => item.FileSize)</p>
            </td>
        </tr>
    }
</table>

后台

  public ActionResult Index(int id=1)
        {
            return View();
        }
        //1.动态页管理
        public ActionResult RIPDynamic(int id=1)
        {
            List<Model.UDynamic> dylist = BLL.LUDynamic.GetRecordList();
            List<Model.UDynamicFile> dyfilelist = BLL.LUDynamicFile.GetRecordList();
            //linq方法
            var listmodel = (from dy in dylist
                             join dyf in dyfilelist on dy.DynamicFileID equals dyf.AutoID into result
                             from item in result.DefaultIfEmpty()
                             select new RIPDefaultViewModel
                             {
                                 AutoID = dy.AutoID,
                                 Title = dy.Title,
                                 Content = dy.Content,
                                 UploadPerson = dy.UploadPersonName,
                                 UploadTime = dy.UploadTime,
                                 FileName = item.FilesName,
                                 FileSize = item.FilesSize
                             }).OrderByDescending(s=>s.AutoID).ToPagedList(id,5);
            if (Request.IsAjaxRequest())
                return PartialView("_AjaxSearchPost", listmodel);
            return View(listmodel);
        }
        [HttpPost]
        public ActionResult RIPDynamic(string title,string author,string source,int id=1)
        {
            return RIPDynamicResult(title,author,source,id);
        }
        private ActionResult RIPDynamicResult(string title, string author, string source, int id = 1)
        {
            List<Model.UDynamic> dylist = BLL.LUDynamic.GetRecordList();
            List<Model.UDynamicFile> dyfilelist = BLL.LUDynamicFile.GetRecordList();
            //linq方法
            var listmodel = (from dy in dylist
                             join dyf in dyfilelist on dy.DynamicFileID equals dyf.AutoID into result
                             from item in result.DefaultIfEmpty()
                             select new RIPDefaultViewModel
                             {
                                 AutoID = dy.AutoID,
                                 Title = dy.Title,
                                 Content = dy.Content,
                                 UploadPerson = dy.UploadPersonName,
                                 UploadTime = dy.UploadTime,
                                 FileName = item.FilesName,
                                 FileSize = item.FilesSize
                             }).AsQueryable();
            if (!string.IsNullOrWhiteSpace(title))
                listmodel = listmodel.Where(s => s.Title.Contains(title));
            if (!string.IsNullOrWhiteSpace(author))
                listmodel = listmodel.Where(s => s.UploadPerson.Contains(author));
            if (!string.IsNullOrWhiteSpace(source))
                listmodel = listmodel.Where(s => s.FileName.Contains(source));
            var querymodel = listmodel.OrderByDescending(s => s.AutoID).ToPagedList(id, 5);
            if(Request.IsAjaxRequest())
                return PartialView("_AjaxSearchPost", querymodel);
            return View(querymodel);
        }

因为初学,有很多写的不对的地方,但为什么点击查询后,iframe嵌套的页面的自己写的js都失效了呢
因为暂时没有c币了,还请见谅,能有效解决的话会补回来

  • 写回答

1条回答 默认 最新

  • bakalr 2018-11-14 11:24
    关注

    没有点查询前点击tr会有这种效果

    点击搜索后,chrome中sources找不到子页面了

    没有点查询前点击tr会有第一张图的效果

    点查询后,就不会有第一张的效果了,而且chrome调试里sources什么都没有

    评论

报告相同问题?

悬赏问题

  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥15 stable diffusion
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘
  • ¥15 perl MISA分析p3_in脚本出错
  • ¥15 k8s部署jupyterlab,jupyterlab保存不了文件
  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿