Asp.net mvc razor render partial view using jquery Ajax

I will going to demonstrate how we can render PartialViews using Jquery Ajax. I will be clicking an a href link ,then I will be calling the controller through jquery Ajax which will fill the partialview for a really nice user experience.

Step 1:

First of all we will be creating an DisplayData class for the use for this example in the model.

    public class DisplayData
    {
       public int ID { get; set; }
       public DisplayData(int ID)
       {
              this.ID = ID;
       }
    }

Step 2:

We will create a Clicks page and write the following code on it. Specially note empty here which will going to empty and then fill partialview with new records.

     $(document).ready(function () {
        $('.msg').click(function () {
            var id = this.id;
            $.ajax({
                url: "/Category/Display",
                data: { data: id },
                success: function (mydata) {
                    $("#link").empty().append(mydata);
                },
                type: "POST"
            });
            return false;
        });
    }); 


<a class="msg" href="#" id="1">Click Me</a>
<a class="msg" href="#" id="2">AND Click Me</a>
<div id="link">
</div>

Step 3:

Create a User Control ClicksUC for partial rendering

foreach(var items in Model)
{  
    @items.ID  
}

Step 4:

And Finally Create an action methods inside the Category controller for calling the view and then rendering the partialview.

     public ActionResult Clicks()
     {
         return View();
     }
          
     public ActionResult Display(int data)
     {
         List<DisplayData> Display = new List<DisplayData>();
         if (data == 1)
         {
           Display.Add(new DisplayData(3));
           Display.Add(new DisplayData(4));
         }
         else
         {
           Display.Add(new DisplayData(1));
           Display.Add(new DisplayData(2));
         }
          
         return PartialView("ClicksUC", Display);
     }