如何在 asp.net mvc 中執行 jquery http post req

Question

我想從視圖中向我的 controller 發送一個字符串。 該字符串是網站的名稱。

在視圖中，用戶單擊網站名稱，我想根據單擊的網站名稱呈現信息。

我的觀點（注意所有網站呈現 100%）

<h1>My Websites</h1>
@{
    foreach (var website in Model.websites)
    {
            <table>
                <tr>
                    <td>  <a  class="websiteLink" href="">@website </a> </td>
                </tr>
            </table>
    }
}

MVC 動作

[HttpPost]
public ActionResult getWebsiteName(string webiste)
{
   
    //return partial view here
    return RedirectToAction("WebsiteOptions", "Home");
}       

js:

 document.querySelectorAll('.websiteLink').forEach(item => {
    item.addEventListener('click', event => {
        var websiteName = item.innerHTML;
        $.post("/Home/getWebsiteName", { WebsiteName: websiteName }, function (data) {
            console.log(data);
        });
        //alert(WebsiteName);
    });
});

當我執行警報 function 以測試它是否正常工作時，單擊時會顯示正確的網站名稱，我只想將單擊的網站名稱發布到我的 controller 但它不起作用:( 操作中沒有任何反應，因為它不起作用..我在那里設置了斷點來測試參數是否正確

Answer 1

你的請求應該是這樣的：

document.querySelectorAll('.websiteLink').forEach(item => {
    item.addEventListener('click', event => {
        var websiteName = item.innerHTML;
        $.post("/Home/getWebsiteName?website=" + websiteName, function (data) {
            console.log(data);
        });
        //alert(WebsiteName);
    });
});

Answer 2

下面解決了我的問題

document.querySelectorAll('.websiteLink').forEach(item => {
        item.addEventListener('click', event => {

            //storing clicked website name
            var websiteName = item.innerHTML;
            item.style.textDecoration  = "underline";
           


                $.ajax({
                    type: "POST",
                    url: "@Url.Action("getWebsiteName")",
                    dataType: "json",
                    data: { WebsiteName: websiteName },

                    success: function (data) {

                        alert(data);
                    },
                    failure: function (errMsg) {

                        alert(errMsg);
                    }
                });


        });
    });