如何将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的：alert（btn）; -正在打电话。 我可以看到带有ID的警报窗口。 但是，我无法在控制器中检索ID。

Answer 1

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

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

1. Ajax和REST：

使用使用http方法（发布或放置）的ajax调用将变量值作为JSON推送到后端的REST api（路由）。 对于此选项，您可能想看看javascript的提取功能 。

2. HTML表单

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

---

如果您对此答案投反对票，请提供反馈，我可以做得更好。 那是我学习形式错误并改进的唯一方法。 谢谢。

Answer 2

您需要将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);
}

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

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属性的参数。 如果需要传递更多数据，则jquery调用中的属性名称应与控制器内的action方法签名的参数相对应。

所以我的控制器看起来像

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

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

这将是通过使用带有jquery的.ajax调用来处理从视图向控制器传递值的一种方法。

我的首选方法是使用Ajax.BeginForm的HTML帮助器，这可能是您的另一选择。

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