asp.net core - Update the data in View with AJAX not working

Question

I have diffrent <a> tags that normally pass a parameter to an action using asp-route="". Now i want to use AJAX t do this. each tag is supposed to pass an ID that comes from the model chats when the page loads up. (asp-route-ChatID="@Model.ID"). How can I achieve this in AJAX and pass that parameter? I tried using Data-ajax-update and Data-ajax-url but these option arent even available in Intellisense. Here is the method that i want to call

  public IActionResult Chat(string ChatID)
    {
        Chats userchats=new Chats(); // a class that holds chats
         //selecting data from the database......
        
        return View(userchats);//returns view with the model
    }

here is the <a> tag that gets clicked and it needs to pass a specific ID that comes from the model

<a > View Chat </a>

here is the <div> that needs to be updated depending on what <a> is clicked

    <div id="UpdateThis">  <!--show data that comes from the method ajax calls-->   </div>

How can I implement ajax here with tag helpers or any other way?

question from:https://stackoverflow.com/questions/65868561/update-the-data-in-view-with-ajax-not-working

Answer 1

Use PartialView instead of view if you want to update div.

public IActionResult Chat(string ChatID)
{
    Chats userchats=new Chats(); // a class that holds chats
    //selecting data from the database......
        
    return PartialView(userchats);//returns view with the model
}

View

<a id="btnView" data-id="1">View Chat</a>
<div id="UpdateThis"></div>

<script>
   $("#btnView").click(function () {
      $.post('@Url.Action("Chat")', { ChatID: $(this).data("id") }).done(function (e) {
          $("#UpdateThis").html(e);
      })
   });
</script>