locked
render partial view issue RRS feed

  • Question

  • User456628452 posted

    i want to render a partial view based on the results of dropdown search.

    i want to not to redirect to another view, but to display results in the same view.

    here is what i have done so far

    index

    <!--main-section team-start-->
    <section class="main-section" id="team">
    
    
        <div class="container">
    
            <div>
    
                @*@using (Html.BeginForm("SearchResults", "Members", FormMethod.Post))
                {*@
                    <div class="inner-form">
    
    
                        @Html.AntiForgeryToken()
                        <div class="advance-search">
                            <span class="desc">SEARCH</span>
                            <div class="row">
                                <div class="input-field">
                                    <div class="input-select">
                                        @Html.DropDownList("ProfessionId", null, htmlAttributes: new { @class = "form-control" }, optionLabel: ("Please Select Profession"))
                                    </div>
                                </div>
                                <div class="input-field">
                                    <div class="input-select">
                                        @Html.DropDownList("AreaId", null, htmlAttributes: new { @class = "form-control" }, optionLabel: ("Please Select Areas"))
                                    </div>
                                </div>
                                <div class="input-field">
                                    <div class="input-select">
                                        @Html.DropDownList("WorkId", null, htmlAttributes: new { @class = "form-control" }, optionLabel: ("Please Select Work"))
    
                                    </div>
                                </div>
                            </div>
    
                            <div class="row third">
                                <div class="input-field">
                                    <div class="result-count">
                                        <span>108 </span>results
                                    </div>
                                    <div class="group-btn">
                                        <button class="btn-delete" id="delete">RESET</button>
                                        <button class="btn-search" onclick='getResults('ProfessionId','AreaId','WorkId');'>SEARCH</button>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                    </div>
                }
    
            </div>
    
            <h2>team</h2>
            <h6>Take a closer look into our amazing team. We won’t bite.</h6>
            <div  id="divResults" class="team-leader-block clearfix">
    
    
              // i want to display searchresults here uisng a foreach loop
    
                @*<div class="team-leader-box">
                        <div class="team-leader  wow fadeInDown delay-06s">
                            <div class="team-leader-shadow"><a href="#"></a></div>
                            <img src="~/Content/images/team-leader-pic1.jpg" alt="">
                            <ul>
                                <li><a href="#" class="zmdi zmdi-facebook"></a></li>
                                <li><a href="#" class="zmdi zmdi-twitter"></a></li>
                                <li><a href="#" class="zmdi zmdi-google-plus"></a></li>
                                <li><a href="#" class="zmdi zmdi-instagram"></a></li>
                            </ul>
                        </div>
                        <h3 class="wow fadeInDown delay-06s">Jesse Pinkman</h3>
                        <span class="wow fadeInDown delay-06s">Product Manager</span>
                        <p class="wow fadeInDown delay-06s">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                    </div>
                    <div class="team-leader-box">
                        <div class="team-leader wow fadeInDown delay-09s">
                            <div class="team-leader-shadow"><a href="#"></a></div>
                            <img src="~/Content/images/team-leader-pic1.jpg" alt="">
                            <ul>
                                <li><a href="#" class="zmdi zmdi-facebook"></a></li>
                                <li><a href="#" class="zmdi zmdi-twitter"></a></li>
                                <li><a href="#" class="zmdi zmdi-google-plus"></a></li>
                                <li><a href="#" class="zmdi zmdi-instagram"></a></li>
                            </ul>
                        </div>
                        <h3 class="wow fadeInDown delay-09s">Skyler white</h3>
                        <span class="wow fadeInDown delay-09s">Accountant</span>
                        <p class="wow fadeInDown delay-09s">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC.</p>
                    </div>*@
            </div>
        </div>
    </section>

    ajax

    <script>
        function getResults(ProfessionId,AreaId,WorkId) {
            let professionId = document.getElementById("ProfessionId").value;
            let areaId = document.getElementById("AreaId").value;
            let workId = document.getElementById("WorkId").value;
            $.ajax({
                type: "GET",
                url: '../Members/SearchResults/?' + 'ProfessionId=' + professionId + 'AreaId=' + areaId + 'WorkId=' + workId,
                success: function (data) {
                    debugger;
                    $('#divResults').html(data);
    
                },
                error: function () {
                    alert("Details load failed.");
                }
            });
       
        }
    </script>

    controller

     [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult SearchResults(int? ProfessionId, int? WorkId, int? AreaId)
            {
                if (ProfessionId != null && WorkId == null && AreaId == null)
                {
                    var result = db.Members.Where(x => x.ProfessionId == ProfessionId).ToList();
                    ViewBag.Results = result;
                }
                if (ProfessionId != null && WorkId == null && AreaId != null)
                {
                    var result = db.Members.Where(x => x.ProfessionId == ProfessionId && x.MemberAreas.Any(y => y.AreaId == AreaId)).ToList();
                    ViewBag.Results = result;
    
                }
                if (ProfessionId != null && WorkId != null && AreaId == null)
                {
                    var result = db.Members.Where(x => x.ProfessionId == ProfessionId && x.MemberWorkAvailables.Any(y => y.WorkId == WorkId)).ToList();
                    ViewBag.Results = result;
                }
    
                if (ProfessionId != null && WorkId != null && AreaId != null)
                {
                    var result = db.Members.Where(x => x.ProfessionId == ProfessionId && x.MemberWorkAvailables.Any(y => y.WorkId == WorkId) && x.MemberAreas.Any(y=> y.AreaId == AreaId)).ToList();
                    ViewBag.Results = result;
    
                }
    
                return PartialView("_SearchResults");
            }
    

    searchresults view , which should be rendered in index view

    @foreach (var item in @ViewBag.Results)
    { 
        <div class="team-leader-box">
            <div class="team-leader wow fadeInDown delay-03s">
                <div class="team-leader-shadow"><a href="#"></a></div>
                <img src="~/Content/images/team-leader-pic1.jpg" alt="">
                <ul>
                    <li><a href="#" class="zmdi zmdi-facebook"></a></li>
                    <li><a href="#" class="zmdi zmdi-twitter"></a></li>
                    <li><a href="#" class="zmdi zmdi-google-plus"></a></li>
                    <li><a href="#" class="zmdi zmdi-instagram"></a></li>
                </ul>
            </div>
            <h3 class="wow fadeInDown delay-03s">@item.FullName</h3>
            <span class="wow fadeInDown delay-03s">@item.ProfessionName</span>
            <p class="wow fadeInDown delay-03s">@item.ShortBio</p>
        </div>
    }
    

    Saturday, April 11, 2020 5:57 PM

All replies