如何將多個參數從javascript函數傳遞到視圖內的控制器？

Question

目前，我為Razor視圖中的按鈕提供了一個javascript函數，當用戶單擊該按鈕時，將出現一個彈出消息。

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

現在，我想更改該函數，以便當用戶單擊它時，它將把參數作為HttpPost發送到控制器“ SaveAddress”。

我該如何實現？ 謝謝。

Answer 1

在MVC中使用ajax形式

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

還記得添加參考

jquery.unobtrusive-ajax.js

Answer 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
        }
    });
}

Answer 3

您有2個選項可以使用Form Postback或使用AJAX

--by使用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);
    } 

注意：-您可以創建模型類，並能夠發送多個值，就像演示一樣，我只是發送單個值。

-使用如下所示的Form Post

-模型類

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" />
        }

希望對您有幫助。 謝謝