<div style="width:600px; margin-left:auto; margin-right:auto">
    <div style="background-color: lightgray">
        <h2>My Products</h2>
    </div>
    <p>Click the button to Get Products with an Ajax call</p>

    <input id="btnAjax" name="btnAjax" type="button" value="Get Products" />
    <div id="products" style="background-color:lightskyblue">
        <div id='loadingmessage' style='display:none'>
            loading...
        </div>
    </div>
</div>

@section Scripts {
        @*@Scripts.Render("~/bundles/jqueryval")*@
    <script>
        $('#btnAjax').click(function () {
            $.ajax({
                url: '/Test/GetProducts',
                contentType: 'application/html; charset=utf-8',
                data: { id: 1 },
                type: 'GET',
                dataType: 'html'
            })
            .success(function (result) {
                $('#products').html(result);
                $('#loadingmessage').hide();
            })
            .error(function (xhr, status, throwError) {
                alert(status);
            })
        });
        </script>
    }

public PartialViewResult GetProducts(int id)
    {
        var listOfCourses = db.Courses.ToList();
        Task.Delay(9000000);
        if(id == 1)
            throw new Exception("something bad");

        return PartialView("_GetProducts", listOfCourses);
    }

<input id="btnAjax" name="btnAjax" type="button" value="Get Products" data:id="1" />