使用MVC开发也有一段时间了,总结下无刷新部分视图的使用、PagedList分页控件的使用。

@using PagedList
@model StaticPagedList<T>
<style type="text/css">
    .tab-title {
        background-color: #efefef;
        width: 10%;
    }

    .btn-custom {
        padding: 6px 24px !important;
        color: #ffffff !important;
        border-radius: 5px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
</style>
@{

}
<section>
    <div class="container" style="margin-top:10px;padding-top:2em;padding-bottom:4em;">
        @using (Ajax.BeginForm("Index", "Hscode", null,
                        new AjaxOptions()
                        {
                            HttpMethod = "Post",
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "div-result",
                            OnComplete = "regJs"
                        },
                        new { @class = "form-horizontal", role = "form", id = "ajax-form" }))
        {  <div class="form-group">
            <div class="col-sm-4">
                <input type="text" class="form-control" id="hscode" name="hscode" placeholder="商品编码">
            </div>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="gname" name="gname" placeholder="商品名称">
            </div>
            <div class="col-sm-4">
                <button type="submit" class="btn btn-custom btn-sm">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
                <a href="javascript:void(0)" class="btn btn-custom btn-sm" id="btnExport"><span class="glyphicon glyphicon-download"></span> 导 出</a>
            </div>
        </div>
        }
        <div id="div-result">
            @Html.Partial("_Index", Model)
        </div>
    </div>
</section>

@section scripts{
    <script src="~/Scripts/jquery.nicescroll.min.js"></script>
    <script type="text/javascript">
        function regJs() {
            $("#pager > .pagination-container > .pagination > li > a").click(function () {
                var pageUrl = $(this).attr("href");
                var queryStr = $("#ajax-form").serialize();
                $(this).attr("href", pageUrl + "&" + queryStr);
            });

        }

        regJs();

        $("html").niceScroll({
            cursorcolor: "#ddd",
            cursoropacitymax: 1,
            touchbehavior: false,
            cursorwidth: "10px",
            cursorborder: "0",
            cursorborderradius: "5px"
        });

        $("#btnExport").click(function () {
            var queryStr = $("#ajax-form").serialize();
            location.href = "/Hscode/Export?" + queryStr;
        });
    </script>
}
主视图

相关文章:

  • 2022-12-23
  • 2021-12-22
  • 2021-12-04
  • 2021-12-21
  • 2022-12-23
  • 2021-12-08
  • 2022-12-23
猜你喜欢
  • 2021-11-23
  • 2021-12-13
  • 2021-06-22
  • 2022-12-23
  • 2021-05-20
  • 2022-02-16
相关资源
相似解决方案