如何将多个参数从javascript函数传递到视图内的控制器？答案

【问题标题】：How to pass multiple parameter from javascript function to controller inside a View?如何将多个参数从javascript函数传递到视图内的控制器？
【发布时间】：2017-04-06 03:20:56
【问题描述】：

目前我有一个用于 Razor 视图内的按钮的 javascript 函数，当用户单击它时，会出现一条弹出消息。

$("#confirmBtn").click(function() {
           alert("user confirmed address: " + address + street + country);

现在我想更改功能，以便当用户单击它时，它将参数作为 HttpPost 发送到控制器“SaveAddress”。

我怎样才能做到这一点？谢谢。

【问题讨论】：

使用表单并提交值（或者如果您想留在同一页面上，使用 ajax 来发布值）。
@StephenMuecke 如果我使用 ajax 先生怎么办？如果你能给我举个例子，真的很感激。

标签： javascript c# asp.net-mvc razor

【解决方案1】：

您有 2 个选项，要么使用 Form Postback，要么使用 AJAX

--通过像下面这样使用 ajax

-- 查看部分

<input type="text" id="address" name="address"/>

<input type="submit" id="btnSubmit" Value="Submit" 
 onclick="return myFunction()" />

-- 脚本部分

<script type="text/javascript">
    var address=$('#address').val();

function myFunction(shipId) {
    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/YourControllerName/SaveAddress")',
        cache: false,
        data: ({ add: address}),
        success: function (data) {
            if (data != null) {
                alert("Operation Completed")
            }
        },
        error: function () {

        }
    });
    return false;
 }
</script>

--控制器

    public ActionResult SaveAddress(string add)
    {
        //Write your code here      
        return Json("", JsonRequestBehavior.AllowGet);
    }

注意：- 您可以创建模型类并能够发送多个值演示我只是发送单个值。

--通过使用下面的表单发布

--模型类

public class MyClass
{
public string address {get;set;}
public string street {get;set;}
}

-- 控制器

    [HttpGet]
    public ActionResult SaveAddress()
    {
        //Write your code here      
        return View();
    }
   [HttpPost]
    public ActionResult SaveAddress(MyClass myclass)
    {
        //Write your code here      
        return RedirectToAction();
    }

--查看

  @model YourSolutionName.Models.MyClass 

      @using (Html.BeginForm("SaveAddress","Your Controller Name",FormMethod.Post))
        {
           @Html.TextBoxFor(x => x.address )<br/>
           @Html.TextBoxFor(x => x.street)
   <br/>
    <input type="submit" id="btnSubmit" Value="Submit" />
        }

希望对你有帮助。谢谢你

【讨论】：

谢谢！我会试试这个：D
欢迎您。尽情享受

【解决方案2】：

创建一个 dto 类：

public class AddressDto
{
    public string Address { get; set; }
    public string Street { get; set; }
    public string Country { get; set; }
}

你的控制器方法：

public ActionResult SaveData(AddressDto dto)
{
    // do stuff
    return Json(true);
}

您的 ajax 请求：

$("#confirmBtn").click(function() {
    // get values and pass them to dto
    var dto = {
        Address: address,
        Street: street,
        Country: country
    };

    $.ajax({
        url: 'MyController/SaveData',
        type: 'POST',
        data: { dto: dto },
        success: function (result) {
            // do stuff
        }
    });
}

【讨论】：

【解决方案3】：

在 MVC 中使用 ajax 形式

@using (Ajax.BeginForm("SaveAddress", "YourController", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "elementwhichholdsthisform", OnSuccess = "OnFilterSuccess" }, new { id = "frmSaveAddress" }))
{
}

还要记得添加参考

jquery.unobtrusive-ajax.js

【讨论】：