如何使用具有“href”属性的锚标记调用控制器方法？

Question

我的视图中有一个 Facebook 分享按钮，

<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>

所以当用户点击它时，我想在我的数据库的共享表中保存一些数据，假设我想调用控制器方法“https://localhost:5001/venue/share?vid=88。

在我的控制器中，我有

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

您可以使用 JQuery 和 AJAX 将数据发布到控制器以保存数据。

---

当用户点击按钮时，触发Javascript函数获取data-href并将数据发布到后端。

ps。不要忘记包含 jquery 库。

简单示例：

FBShare 视图：

<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>

控制器：

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

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

Answer 2

你可以使用 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>