How can I call controller method with anchor tag that has "href" attribute?

Question

I have a facebook share button in my View,

<div class="fb-share-button" 
     data-href="https://localhost:5001/venue/details/@Model.Id"
     data-layout="button_count" data-size="large">
  <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flocalhost%3A5001%2Fvenue%2Fdetails%2F@Model.Id%3Fq%3Dgaurav-acharya&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">
    Share
  </a>
</div>

So When a user clicks on It I want to save some data in Shares Tableof my Database, lets say i want to call controller method "https://localhost:5001/venue/share?vid=88.

In my Controller i have

public void Share(int vid)
        {
            Share share = new Share();
            share.UserName = GetUserName(_userManager);
            share.VenueId = vid;
            Console.WriteLine(vid);
            _context.Shares.Add(share);
            _context.SaveChanges();
        }

Answer 1

You can use JQuery and AJAX to post data to controller to save data.

---

When user click button, trigger the Javascript function to get data-href and post data to backend.

ps. don't forget to include jquery library.

Simply example:

FBShare View :

<h1>FBShare</h1>

<div name ="shareButton"
     class="fb-share-button" 
     data-href="https://localhost:5001/venue/details/100"
     data-layout="button_count" data-size="large">
    <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flocalhost%3A5001%2Fvenue%2Fdetails%2F@Model.Id%3Fq%3Dgaurav-acharya&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">
        Share
    </a>
</div>
<script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    crossorigin="anonymous"></script>
<script>
    $('[name="shareButton"]').on("click",saveData);
    function saveData() {
        var data_href = $('[name="shareButton"]').attr('data-href');
        $.post("SaveShare", { url: data_href } );
    }
</script>

Controller :

public IActionResult FBShare()
{
    return View();
}

[HttpPost]
public void SaveShare(string url)
{
    Console.WriteLine(url);
    // Save url data
}

Answer 2

You can use ajax.

<div class="fb-share-button" 
 data-href="https://localhost:5001/venue/details/@Model.Id"
 data-layout="button_count" data-size="large">
 <a id="fbLink" onclick="saveInfo(@Model.Id)" class="fb-xfbml-parse-ignore">
Share
 </a>
</div>
<script>
  function saveInfo(int vid){
    var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
        location.replace("https://www.facebook.com/sharer/sharer.php? 
        u=https%3A%2F%2Flocalhost%3A5001%2Fvenue%2Fdetails%2F@Model.Id%3Fq%3Dgaurav- 
        acharya&amp;src=sdkpreparse")
       }
     };
 xhttp.open("GET", "/venue/Share?vid=" + vid, true);
 xhttp.send();
 }
</script>