prevent Html.Action with JQuery

Question

Quick question guys, I have this on my view

    <div class="product_list">
        @Html.Action("GetProducts", "Products")
    </div>

and the controller is simply

public ActionResult GetProducts(string country, string currency, int category){
    var viewModel = new ProductsViewModel{
        Products = _proxy.GetProducts(country, currency, category, page)};

    return PartialView(viewModel);
}

Then the GetProducts View just renders each product in a foreach loop

I would like to prevent this to happen if JS is enabled and with JQuery call te service asynchronously. Something like

$(".product_list").SOMETHING(function(event) {
    event.preventDefault();
    ...
 });

How can I do this?

Answer 1

Try this instead :

$(".product_list a").click(function(event) {
    event.preventDefault();
    // code to be executed.
 });

Edit : As per @kooshka comment

When JS disabled :

<div class="product_list">
    <!-- Will execute when JS is disabled in browser -->
    <noscript>
        @Html.Action("GetProducts", "Products")
    </noscript>
</div>

When JS enabled than the script code should be :

$(".product_list").SOMETHING(function(event) {
    event.preventDefault();
    $(".product_list").html('@Html.Action("GetProducts", "Products")');
    ...
});

Good Luck !!