Add Custom output caching on listing page in asp.net mvc

Add below attribute on controller's method.

[OutputCache(VaryByParam = "None", VaryByCustom = "Host", Duration = 14400)]
public ActionResult Index(string category)

Add below method in gobal.asax file


        public override string GetVaryByCustomString(HttpContext context, string custom)
        {
            if (custom == "Host")
            {
                string sCategory = "";
             

                if (!string.IsNullOrEmpty(HttpUtility.ParseQueryString(context.Request.Url.ToString()).Get("CategoryName")))
                {
                    sCategory = HttpUtility.ParseQueryString(context.Request.Url.ToString()).Get("CategoryName");
                }
           

                return context.Request.Url.Host + context.Request.Url.Port + sCategory ;
            }
            return String.Empty;
        }

display 360 view of image using arqspin api call

string requesturl = "http://api.arqspin.com/nodeapi/search/"ArqspinAPIKey"?query=341;

this request send response like below

{"error":0,"spins":[{"shortid":"2g9yw634atmb5","title":
"341","caption":"","created_at":"2015-09-02T21:11:49.000Z",
"thumbnail":"http://spins0.arqspin.com/2g9yw634atmb5/thumbnail.jpg"}]}

create url using shortid in order to display in 360 view form

var resizeurl  = "//spins0.arqspin.com/iframe.html?spin=" + Obj360Image["spins"][0]["shortid"].ToString() + "&is=-0.16"


add above url in iframe src

<iframe style='border:solid 2px #ddd;' src='" + resizeurl + "' width=350 height=350></iframe>




below are the reference link

https://arqspin.com/seamlessly-integrate-spins-using-the-arqspin-query-api/

Open Model Popup using jquery

first add below js and css into your page.


1) jquery-{version}.js
2) bootstrap-model.js
3) bootstrap-model.css
4 ) bottstrap.min.css

Add below html code into your page.

   <div class="popupindex modal" id="mdProcesserror" style="top: 46% !important; margin-top: -281px;">
        <div class="modal-content" style="width: 169%; margin-left: -40%; ">
            <a href="#" data-dismiss="modal" class="popupmodel_close" onclick="resetModelPopUp()"> </a>
            <div class="modal-body">
                <div id="ProcesserrorBody">
                  Content Of Body
                </div>
            </div>

        </div>
    </div>


Add below styles


.popupindex.modal {
    width: 595px;
}
.popupmodel_close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: transparent url("../../../content/images/close.png") -40px 0px;
    cursor: pointer;
    z-index: 1103;
}

to open model popup when click on link button

  <a href="#" onclick="javascript: $('#mdProcesserror').modal();">Model Popup</a>