如何将 jQuery 变量值传递给 c# mvc？

Question

如何将 jQuery 变量值传递给 c# mvc？

我需要在后面的mvc代码中获取变量btn的值。

$('button').click(function () {
        var btn = $(this).attr('id');

        alert(btn);

        $.ajax({
            type: 'GET',
            url: '@Url.Action("ActionName", "ControllerName")',
            data: { id: btn },
            success: function (result) {
                // do something
            }
        });
    });

基于变量值（提交按钮（或）预览按钮），我的模型将对某些字段进行必需的验证。

在我的控制器中，我调用为

[HttpGet]
    public ActionResult ActionName(string id)
    {

        var vm = id;
        return View(vm);
    }

虽然，控制器中的 ActionResult 没有被调用。

Jquery：警报（btn）； ——正在呼唤。我可以看到带有 id 的警报窗口。但是，我无法在控制器中检索 id。

Answer 1

您需要将jQuery.ajax()（或其缩写形式jQuery.get()/jQuery.post()）与GET/POST 方法一起使用，并使用参数设置控制器操作以传递按钮ID：

jQuery（在 $(document).ready() 内）

$('button').click(function () {
    var btn = $(this).attr('id');
    var url = '@Url.Action("ActionName", "ControllerName")'; 
    var data = { id: btn };   

    // if controller method marked as POST, you need to use '$.post()'
    $.get(url, data, function (result) {
        // do something
        if (result.status == "success") {
            window.location = '@Url.Action("AnotherAction", "AnotherController")';
        }
    });
});

控制器动作

[HttpGet]
public ActionResult ActionName(string id)
{
    // do something
    return Json(new { status = "success", buttonID = id }, JsonRequestBehavior.AllowGet);
}

[HttpGet]
public ActionResult AnotherAction()
{
    // do something
    return View(model);
}

如果您想将检索到的按钮 ID 从 AJAX 传递到其他操作方法，您可以使用 TempData 或 Session 来执行此操作。

Answer 2

您使用“获取”这个词来描述您想要做的事情是一个很好的巧合。

jQuery 作为前端框架在浏览器中运行。这意味着它在客户端的计算机上运行。您的 MVC-C#-Code 位于服务器上。因此，如果要在这两台计算机之间发送数据，就需要使用http协议。

1。 Ajax 和 REST：

通过使用 http 方法（post 或 put）的 ajax 调用将您的变量值作为 JSON 推送到后端的 REST api（路由）。 对于此选项，您可能需要查看 javascript 的 fetch function。

2。 HTML 表单

使用html form 将变量值存储在一个输入元素中。表单提交也会向后端执行 http post（默认情况下）请求，并将所有输入元素值用作 post 参数。

---

如果您对这个答案投了反对票，请您提供反馈意见，我可以做得更好。这是我可以从错误中学习并改进的唯一方法。谢谢。

Answer 3

有很多方法可以完成您想做的事情，但我会坚持使用您的代码示例。

所以您需要做的是利用 jquery 中的 .ajax 调用将数据从您的视图发送到您的控制器。更多信息在这里：http://api.jquery.com/jquery.ajax/

使用您的代码，您可以将 .ajax 调用放入您的逻辑流中，根据单击的按钮执行操作。

$("button").click(function ()
{
    var btn = this.id;
    if (btn == "previewButton")
    {
        $.ajax({
            url: "/MyApp/MyAction",
            type: "POST",
            data: { btnId: btn },
            dataType: "json",
            async: true,
            cache: false
        }).success(function(data){
            // do something here to validate if your handling worked
        }).error(function(){
            // Do something here if it doesnt work
        });

    }

}

您会看到有一个 URL。在我的示例中，我选择 MyApp 作为我的控制器，并选择 MyAction 作为我们向其中发布值的控制器的方法。 ajax 调用发布具有 btnId 属性的 1 个参数。如果您需要传递更多数据，jquery 调用中的属性名称应与控制器内的操作方法签名的参数相对应。

所以我的控制器看起来像

public MyAppController : Controller 
{
    [HttpPost]
    public JsonResult MyAction(string btnId)
    {
        Debug.WriteLine("btnId: {0}", btnId);

        return Json(new{ ButtonId= btnId });
    }
}

这将是使用 .ajax 调用和 jquery 处理将值从视图传递到控制器的一种方法。

我的首选方法是使用 Ajax.BeginForm 的 Html 助手，这可能是您的另一种选择。

https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx