如何將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