Load partial View on clicking href link on the same page

Question

SO I have action which returns a strongly typed partial view with list with products

public ActionResult GetProducts(int catID,int langID)
        {
            CategoryViewModel ob = new CategoryViewModel();
            ob.GetProducts(catID, langID);
            return PartialView("GetProducts",ob);

        }

In my Index() view on document ready I load the partial view which returns me GetCategories action in a div "categoriesPlace".

Here is my Index() View

<script>


    $(document).ready(function () {

        $("#categoriesPlace").load('@Url.Action("GetCategories")' + '?langId=' + $("#ddlLanguages").val());


    });
<div id="categoriesPlace"></div>
<div id="productsPlace"></div>

---

In GetCategories() view I have a lot of links. SO I WANT WHEN I CLICK SOME OF THIS LINK - to load the div productsPlace(which is in index() view) with the partial view which is returned from GetProducts() Action

Here is my GetCategories() View

@model IEnumerable<OnlineStore.Commercial.Models.CategoryViewModel>

@{
    ViewBag.Title = "Index";
}




    @foreach ( var tree in @Model)
    {
    <ul id="tree">
        <li>
            <a href="@Url.Action("GetProducts",  new { catID = tree.CategoryCode,langID= 1})">@tree.CategoryName</a>

        </li>
    </ul>
    }

Answer 1

I would give all the <a> elements a class, say getProducts, and then bind a click event to them: (Forgive me for writing the url in the <% syntax)

So for the <a> elements:

<a href="javascript:void(0);" class="getProducts">@tree.CategoryName</a>

And for the click event binding:

$('.getProducts').on('click', function() {
     $('#productsPlace').load('<%=Url.Action("GetProducts", "YourController")%>', new { catID =  tree.CategoryCode,langID= 1}, null);
});