MVC button click call POST Action method

Question

How can I call an MVC action method with complex parameters, like the below, from a button click event?

[ValidateInput(false)]
[HttpPost]
public ActionResult Export(ViewModel vm)
{
  // some logic
}

I have made it a POST action because I need to pass HTML tags of the current page on which the button is to the action method which is too long. I have tried this but this its for a GET operation

<input type="button" value="Detail" onclick="location.href='@Url.Action("Export", "Report")?html=' + $('#test').html()" />

You need to send a POST request to that Action, ie a form submission or AJAX request. location.href will make a GET request — Rory McCrossan
– Rory McCrossan, Commented May 23, 2017 at 13:50
Be weary of using [ValidateInput(false)] may cause you more headaches later than what you are trying to accomplish by turning it off. — Chad
– Chad, Commented May 23, 2017 at 13:52
Use <form method="post" action="<%: Url.Action("Export", "Report") %>"/> — Vinutha N
– Vinutha N, Commented May 23, 2017 at 13:55

j9070749 · Accepted Answer · 2017-05-23 14:08:50Z

If you want to do this using a button click you can subscribe the to click event of the button in JS. In your JS, you can do an ajax post, which will post a JSON object (your VM) to your action:

Razor:

<input type="button" value="Detail" id="buttonId" />

JS:

    $('#buttonId').click(function () { //On click of your button

    var property1 = $('#property1Id').val(); //Get the values from the page you want to post
    var property2 = $('#property2Id').val();


    var JSONObject = { // Create JSON object to pass through AJAX
Property1: property1, //Make sure these names match the properties in VM
Property2: property2
};

    $.ajax({ //Do an ajax post to the controller
        type: 'POST',
        url: './Controller/Action',
        data: JSON.stringify(JSONObject),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
        });

Another way to do this is submit the view model using a form.

    @using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post)) 
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">

    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(model => model.PropertyName1, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <input type="text" id="PropertyName1" name="PropertyName1" class="form-control"  />
            @Html.ValidationMessageFor(model => model.PropertyName1, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.PropertyName2, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.PropertyName2, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PropertyName2, "", new { @class = "text-danger" })
        </div>
    </div>



    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Button text" class="btn btn-primary" />
        </div>
    </div>
    </div>
}

Victor Leontyev · Accepted Answer · 2017-05-23 13:51:45Z

2

You can do that with HTML form

<form action="@Url.Action("Export", "Report")" method="POST">
    <input type="hidden" name="html" value="ADD YOUR HTML HERE">
    <input type="button" value="Detail" />
</form>

And inside your controller you need to use html parameter

[ValidateInput(false)]
[HttpPost]
public ActionResult Export(ViewModel vm, string html)
{
    // some logic
}

answered May 23, 2017 at 13:51

Victor Leontyev

8,7442 gold badges19 silver badges37 bronze badges

2 Comments

CSharped Over a year ago

this woudn'y help because the query string is too long from the second parameter

Victor Leontyev Over a year ago

You shoudn't achieve that limit, when you POST your data

Jay · Accepted Answer · 2017-05-23 14:05:43Z

-1

try this

<form action="@Url.Action("Export", "Report")" method="POST">
<input type="hidden" name="html" id="html"  value="ADD YOUR HTML HERE">
<input type="button" id="btn1" value="Detail" />
</form>

add Script in js

$("#btn1").click(function(){
   $("#html").val($('#test').html());
})

add param in your method string html

answered May 23, 2017 at 14:05

Jay

7239 silver badges21 bronze badges

Collectives™ on Stack Overflow

MVC button click call POST Action method

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related