如何在 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);
                    }
                });


        });
    });