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

时间:2020-01-30 07:34:59

标签: javascript html asp.net-mvc model-view-controller .net-core

我的视图中有一个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();
        }

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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