[RESOLVED]multiple search option with cascading dropdown and MVC.Paging

how can i use multiple search options to get number of paged records

multiple search option like country ,state ,city ,gender, and etc…

here i created a controller browseallmemmbers where search criteria is working 

private const int defaultPageSize = 10;
       
        private IList<Profile> getAllmembers = new List<Profile>();
        public ActionResult BrouseAllMem(int? page, long? stateid, long? countryid,long? cityid)
        {

            int currentPageIndex = page.HasValue ? page.Value : 1;

            ViewData["countryid"] = countryid;
            ViewData["Stateid"] = stateid ;
            ViewData["cityid"] = cityid ;
           
            IList<Profile> members = this.getAllmembers;

           
            IQueryable<Profile> mm = db.Profiles.OrderByDescending(c => c.pid);
            if (countryid > 0)
            {
                
                mm = mm.Where(p => p.countryid == countryid);
            }
            if (stateid > 0)
            {
                mm = mm.Where(p => p.stateid == stateid);
            }
            if (cityid > 0)
            {
                mm = mm.Where(p => p.cityid  == cityid);
            }

           
            members = mm.OrderByDescending(p => p.pid).ToPagedList(currentPageIndex, defaultPageSize);
 
            ViewBag.cityid = new SelectList(db.citytables, "cityid", "cityname", ViewData["cityid"]);
            ViewBag.countryid = new SelectList(db.Countries, "COUNTRYID", "countryname", ViewData["countryid"]);
            ViewBag.stateid = new SelectList(db.states, "stateid", "statename", ViewData["stateid"]);
                      
            return View(members);
        }

View where result is displaying

@*@model IEnumerable<LovNMarProj.Models.Profile>*@
@using MvcPaging
@model IPagedList<LovNMarProj.Models.Profile>
@{
    ViewBag.Title = "BrouseAllMem";
    Layout = "~/Views/Shared/_LayoutTEM.cshtml";
}
@using (Html.BeginForm("BrouseAllMem", "Home", FormMethod.Get))
{
<div class="page-header">
    <div class="panel panel-default">
        <div class="panel-heading">All Members</div>
        <div class="panel-body">
            <div class="col-sm-3 col-md-3 pull-left">
                <div class="input-group input-group-sm">
                    @*<input class="form-control" id="appendedInputButton" type="text" name="member_name" placeholder="Name" value="@ViewData["member_name"]" />*@
                   
                </div>
            </div>
            @Html.DropDownList("countryid", ViewBag.countryid as SelectList, "Select a Country", @ViewData["countryid"])

            @Html.DropDownList("stateid",null ,string.Empty , @ViewData["stateid"])

            @Html.DropDownList("cityid",null ,string.Empty , @ViewData["cityid"])

            <div class="col-sm-3 col-md-3 pull-right" >
                <button class="btn" type="submit">
                    <i class="glyphicon glyphicon-search"></i>
                </button>
            </div>
        </div>
        <ul class="list-group">
            
            @foreach (var item in Model)
            {
                var gender = "Female"; if (@item.gender == "M") { gender = "Male"; } 
                var pimage = "no_avatar.gif"; 
                if (@item.photo != null && @item.photo  != "") { pimage = @item.photo ; }
                
                
                
                <li class="list-group-item ">
                    <div class="row">
                        <div class="col-sm-9">
                            <p> <strong>@item.headline</strong></p>
                        </div>
                        <div class="col-lg-3 text-muted text-right small">
                            Joined On: @item.profiledate
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-1">

                            <img src="~/profilepic/@pimage" class="img-thumbnail" />
                        </div>
                        <div class="col-sm-3">
                            <h5>
                                @item.fname
                                &nbsp;
                                @item.lname<small>(@gender)</small>
                            </h5>
                            <p>
                                @item.Country.countryname  -
                                @item.state.statename -
                                @item.citytable.cityname 
                            </p>
                        </div>
                        <div class="col-sm-5">
                            About:<p> @item.whoami</p>
                        </div>
                        <div class="col-sm-3">
                           Looking For:<p> @item.lookingfor</p>
                        </div>
                    </div>








                </li>
            }

        </ul>
        <div class="panel-footer">
            <div class="pager">
                @Html.Raw(Html.Pager(
            new Options
            {
                PageSize = Model.PageSize,
                TotalItemCount = Model.TotalItemCount,
                CurrentPage = Model.PageNumber,
                ItemTexts = new ItemTexts() { Next = "Next", Previous = "Previous" },
                ItemIcon = new ItemIcon() { First = "icon-backward", Previous = "icon-chevron-left", Next = "icon-chevron-right", Last = "icon-forward" },
                TooltipTitles = new TooltipTitles() { Next = "Next page {0}", Previous = "Previous page {0}", Page = "Go to page {0}" },
                Size = Size.normal,
                Alignment = Alignment.centered,
                IsShowControls = true,
                IsShowFirstLast = true,
                IsShowPages = true
            }, new { countryid = ViewData["countryid"], stateid = ViewData["stateid"], cityid = ViewData["cityid"] }))
            </div>

        </div>
    </div>
</div>
}
<script type="text/jscript">
    $(function () {

        $('#countryid').ready(function () {


            //$('#stateid').empty();
            //$('#cityid').empty();

            $.getJSON('/Kas/StateList/' + $('#countryid').val(), function (data) {
                var items = "";
                $.each(data, function (i, stateid) {
                    items += "<option value='" + stateid.Value + "'>" + stateid.Text + "</option>";
                });

                $('#stateid').html(items);
                $('#stateid').trigger("change");

            });
        });



        $('#countryid').change(function () {

            $.getJSON('/Kas/StateList/' + $('#countryid').val(), function (data) {
                var items = '';
                $.each(data, function (i, stateid) {
                    items += "<option value='" + stateid.Value + "'>" + stateid.Text + "</option>";
                });
                $('#stateid').html(items);

            });
        });

        $('#stateid').change(function () {
            $.getJSON('/Kas/Citylist/' + $('#stateid').val(), function (data) {
                var items = '';
                $.each(data, function (i, cityid) {
                    items += "<option value='" + cityid.Value + "'>" + cityid.Text + "</option>";
                });
                $('#cityid').html(items);



            });
        });





    });

</script>

it shows the result properly but if i go to next page search criteria is gone

how to keep search result and paging both

 with one search option its works but with multiple search its not working

Hi pjpatil,

Base on your code, I found that you are using ViewData and ViewBag with same key, which are conflict, in other words, the
ViewData data will be override.

Please use the different key to store current search conditions.

To keep the conditions, you just need to store them as parameters in the URL (Html.PagedListPager), and in the action has the corresponding parameters to get that data.

Best Regards

Starain Chen

Leave a Reply