如何获取文本框值到按钮 OnClick 函数中的参数？答案

【问题标题】：How to get text box values to parameters in Button OnClick Function?如何获取文本框值到按钮 OnClick 函数中的参数？
【发布时间】：2019-09-25 00:19:39
【问题描述】：

我需要将 txtRemarks 和 txtCost 文本框值放入 Button OnClick 方法的两个参数中。这样我就可以将这些参数传递给我的控制器中的方法。让我进一步解释一下。我有两个在模型之外创建的文本框。下面我已经提到了它们。

@Html.Editor("txtRemarks", new { htmlAttributes = new { @class = "form-control date-picker", @placeholder = "N/A" } })

@Html.Editor("txtCost", new { htmlAttributes = new { @class = "form-control date-picker", @type = "number", @placeholder = "0.00" } })

我需要将它们的值设置为 Button Onclick 事件中的两个参数。下面是点击事件和按钮。我需要将这些参数值获取到控制器 ServiceHeaders

中的 ActionResult Method ServiceDetails

<input type="button" id="btnAddtoGrid" value="Add" class="btn btn-group" onclick="location.href='@Url.Action("ServiceDetails", "ServiceHeaders")?Remark='+ $('#txtRemarks').val(),?Cost='+ $('#txtCost').val()" />

我只需要一种连接?Remark='+ $('#txtRemarks').val() 和?Cost='+ $('#txtCost').val() 的方法。我可以使用?Remark='+ $('#txtRemarks').val()或?Cost='+ $('#txtCost').val()传递一个参数。但我不知道如何同时获得两者。这就是我需要你宝贵帮助的地方。

【问题讨论】：

标签： javascript c# model-view-controller

【解决方案1】：

您可以链接参数，例如： localhost?Remark='+ $('#txtRemarks').val() + '&Cost='+ $('#txtCost').val().

在进行 HTTP GET 时，您可以使用 ...?var1=test1&var2=test2&var3=test3 等设置参数

请参阅doc 了解更多信息。

注意：您也可以考虑使用 HTTP POST。

【讨论】：

【解决方案2】：

链接建得不好。要连接参数，您必须使用&。试试这个

<input type="button" id="btnAddtoGrid" value="Add" class="btn btn-group" onclick="location.href='@Url.Action("ServiceDetails", "ServiceHeaders")?Remark='+ $('#txtRemarks').val() + '&Cost='+ $('#txtCost').val()" />

【讨论】：

【解决方案3】：

1) 从按钮中移除 onClick()。

2）为按钮点击添加ajax调用如下

$('#btnAddtoGrid').click(function () {
        $.ajax({
            url: '<%= Url.Action("ActionName", "ControllerName", new{Remark = ' + 
            $('#txtRemarks').val() + ', Cost = ' + $('#txtCost').val()+'}) %>',
            success: function (
                alert(data);
            }
        });
    });

【讨论】：

谢谢。我可以得到一个额外的想法:)

【解决方案4】：

客户端。

 $('#btnAddtoGrid').on("click",function () {
           $.ajax({
                        type: "POST",
                        url: "/Home/AjaxMethod",
                        data: '{newremark : "' + $('#txtRemarks').val() + '" , cost: "' + $('#txtCost').val() + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
        });

服务器端。

[HttpPost]
    public JsonResult AjaxMethod(string newremark,string cost)
    {       
        return Json(newremark);
    }

【讨论】：