How to call star rating dynamic using web services n MVC ?

See more:

Ajax

jQuery

webservice

MVC5

I am posting my code that display the data static .But i want all data dynamic by requesting to services.In Action method passing div(copy and past of inspect) in a variable.And in view using ajax.i want all data dynamically for that i need run the loop how and what is code to get all data in dynamically ?

What I have tried:

Controller Code:--

 [HttpPost]
        public string Filters(string id)
        {
            
        var rating = id;
        string Response = "";
              

        Response += "<div class='hotel-list-item'>"+
                                                "<figure class='hotel-img float-left'>"+
                                                    "<a href = '' title=''><img src = 'http://api.tbotechnology.in/imageresource.aspx?img=lLdKYi18YEiML+TprZkTabTwwwPgGXxCQkEoOgYSSU48eaJEnICIdvIDb0pYi+o5GZwJzfkMC9Sxq0vVkwfbTcrFAGjsyTcdg67i17PGuTTBeUYGo1wQsQ==' alt='' width='300' height='300'></a>"+
                                                "</figure> "+
                                                "<div class='hotel-text'>" +
                                                    "<div class='hotel-name'>" +
                                                    "<a href = '' title=''>Hotel Silver Gate - Chennai Central</a></div>"+
                                                    "<div class='hotel-star-address'>" +
                                                       " <span class='hotel-star'>" +
                                                               "" style="font-size: 15px">" +
                                                                "^__i class="glyphicon glyphicon-star" style="font-size: 15px">" +
                                                                 "</span>" +
                                                        "<span class='rating'>Good<br></span>" +
                                                        "<address class='hotel-address'>No 3 , Patnool Street, Periamet, New Chennai Railway Station, Tamil Nadu, Chennai, India, , , 600003, </address>" +"</div>" + "<p> </p>" +"<hr class='hr'>" + "<div class='price-box float-left'><span class='price old-price'>From-</span><span style = 'color:cadetblue;font-size:20px' > INR </ span >< span class='price special-price'> 1946.00<small>/Night</small></span></div>" + "<div class='hotel-service float-right'>" +"<a role = 'button' tabindex='1' class='at-icon-wrapper at-share-btn at-svc-twitter' style='background-color: rgb(29, 161, 242); border-radius: 0%;'><span class='at4-visually-hidden'>Share to Twitter</span><span class='at-icon-wrapper' style='line-height: 32px; height: 32px; width: 32px;'><svg xmlns = 'http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 32 32' version='1.1' role='img' aria-labelledby='at-svg-twitter-1' class='at-icon at-icon-twitter' style='width: 32px; height: 32px;'><title id = 'at-svg-twitter-1' > Twitter </ title >< g >< path d='M27.996 10.116c-.81.36-1.68.602-2.592.71a4.526 4.526 0 0 0 1.984-2.496 9.037 9.037 0 0 1-2.866 1.095 4.513 4.513 0 0 0-7.69 4.116 12.81 12.81 0 0 1-9.3-4.715 4.49 4.49 0 0 0-.612 2.27 4.51 4.51 0 0 0 2.008 3.755 4.495 4.495 0 0 1-2.044-.564v.057a4.515 4.515 0 0 0 3.62 4.425 4.52 4.52 0 0 1-2.04.077 4.517 4.517 0 0 0 4.217 3.134 9.055 9.055 0 0 1-5.604 1.93A9.18 9.18 0 0 1 6 23.85a12.773 12.773 0 0 0 6.918 2.027c8.3 0 12.84-6.876 12.84-12.84 0-.195-.005-.39-.014-.583a9.172 9.172 0 0 0 2.252-2.336' fill-rule='evenodd'></path></g></svg></span></a>" +
"<a href = 'http://facebook.com' title='Join Us On Facebook'><img src = '/MyDesign/images/icon-service-2.png' alt=''></a>" +
 "<a href = '#' title=''><img src = '/MyDesign/images/icon-service-3.png' alt=''></a>" +"<a href = '#' title=''><img src = '/MyDesign/images/icon-service-4.png' alt=''></a> "+ "<a href = '#' title=''><img src = '/MyDesign/images/icon-service-5.png' alt=''></a>" +
  "<a href = '#' title=''><img src = '/MyDesign/images/icon-service-6.png' alt=''></a> "+
  "<a href = '#' title=''><img src = '/MyDesign/images/icon-service-7.png' alt=''></a> "+  "</div> "+ "</div> "+"<br>" + "<div class='float-right'>" +
"<span><a class='btn btn-danger' href='/Home/HotelInfos?HotelCode=2320638&ResultIndex=7'>Book</a></span>" +"</div>" + "</div>";

            //return Json(rating, JsonRequestBehavior.AllowGet);
            return Response;

        }

View Code:-

<div class="widget-sidebar start-rating-sidebar">
 <h4 class="title-sidebar">Star rating</h4>
            <ul class="widget-rate">
                <li>
                    <div class="radio-checkbox">
                        <input id="rating-5" type="checkbox" class="checkbox">
                        <label for="rating-5"></label>
                    </div>
                    <div class="group-star">class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^</i__^ ^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^</div>5 Stars <span></span>
                </li>
                <li>
                    <div class="radio-checkbox">
                        <input id="rating-4" type="checkbox" class="checkbox">
                        <label for="rating-4"></label>
                    </div>
                    <div class="group-star">^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^</div>4 Stars <span></span>
                </li>
                <li>
                    <div class="radio-checkbox">
                        <input id="rating-3" type="checkbox" class="checkbox">
                        <label for="rating-3"></label>
                    </div>
                    <div class="group-star">^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"__^ ^__i class="glyphicon glyphicon-star"></div>3 Stars <span></span>
                </li>
                <li>
                    <div class="radio-checkbox">
                        <input id="rating-2" type="checkbox" class="checkbox">
                        <label for="rating-2"></label>
                    </div>
                    <div class="group-star">^__i class="glyphicon glyphicon-star"> ^__i class="glyphicon glyphicon-star"></div>2 Stars <span></span>
                </li>
                <li>
                    <div class="radio-checkbox">
                        <input id="rating-1" type="checkbox" class="checkbox">
                        <label for="rating-1"></label>
                    </div>
                    <div class="group-star">^__i class="glyphicon glyphicon-star"></div>1 Stars <span></span>
                </li>