Load a div without refreshing the page in asp.net

Question

I'm loading a popup div dynamically with different html page contents. The HTML page controls are rending on div successfully but the problem is, the whole page is refreshing during loading the content using $("#middlepart").load() I want to reload the content without refreshing the page in asp.net. The code is given below:

 <div class="popmiddlepart">
                <div class="type-benifit">
                    <div class="subdivOne">
                        <div class="fl-lt">
                            <label>Type of Benefit</label>
                        </div>
                        <div class="fl-lt">
                            <div id="ddlBenefitType" >
                            </div>

                        </div>
                        <div class="clearfix"></div>
                        <hr style="margin-bottom: 10px; margin-top: 10px;">
                    </div>
                </div>


                <div id="relate-message-box-html" style="display: none">
                    <i class="fa fa-info-circle" aria-hidden="true" style="color: red;"></i><strong></strong>
                    <span id="spnToolTipTexthtml"></span>
                </div>

                <div class="clearfix"></div>
                <div id="middlepart" class="dynamic-content">
                    <div class="middle-part">
                        content goes here
                    </div>
                </div>

             </div>

I'm updating the div calling the dropdown onchange event

  $("#ddlBenefitType").relateSelectControl({
            selectControlDataSource: benefittypedata,
            dataValueField: 'id',
            dataTextField: 'text',

            onchange: function (e) {
                e.preventDefault();
                var selectedtype = $("#ddlBenefitType").getSelectControlText();

                if (selectedtype == 'Accommodation') {
                    var key = getQueryStringValue('id');
                    $("#middlepart").load(baseUrl + "employee/accomodationdetails_ie.html?id=" + key);
                }

                if (selectedtype == 'Loan') {
                    var key = getQueryStringValue('id');
                    $("#middlepart").load(baseUrl + "employee/loandetails_ie.html?id=" + key);
                }
            }
        });

Answer 1

Try $.get(). It is shorthand for making a jquery ajax call to load the html from an external source asynchronously.

Something like this should work:

$.get( baseUrl + "employee/accomodationdetails_ie.html?id=" + key, function( data ) {
    $( "#middlepart" ).html( data ); 
});