How to execute 3 different controller methods from the same view

Question

I have created a C# ASP.NET MVC application. In the Index view, i have added 3 buttons, when each button is clicked i want to execute 3 different functions from the Index controller.

Index View that resides in the Home folder

@using (Html.BeginForm()) {

<input  type="submit" value="b1" />

 <input type="submit" value="b2" />
 <input type="submit" value="b3" />

}

Home Controller

public ActionResult Button1Click()
        {

            return View();
        }

public ActionResult Button3Click()
        {

            return View();
        }

public ActionResult Button2Click()
        {

            return View();
        }

When each button is clicked how can i write code to execute the correct controller method ?

possible duplicate of [How do you handle multiple submit buttons in ASP.NET MVC Framework?](http://stackoverflow.com/questions/442704/how-do-you-handle-multiple-submit-buttons-in-asp-net-mvc-framework) — tpeczek, Apr 17 '13 at 09:33

score 3 · Accepted Answer · answered Apr 17 '13 at 09:34

3

If you are posting then you can put each button in a separate form:

@using (Html.BeginForm("Button1Click","Index")) {
    <input  type="submit" value="b1" />
}
@using (Html.BeginForm("Button2Click","Index")) {
    <input  type="submit" value="b2" />
}
@using (Html.BeginForm("Button3Click","Index")) {
    <input  type="submit" value="b3" />
}

If there is no data to post, as shown in your method, and you still want to have all buttons in the same form then you can do an ajax post (this does not make sense though but hey I'm basing it on the code you gave in your question), with this though you may want to change your buttons from a submit into a button (input type="button").

$("#b1").click(function(){
    $.post('/index/button1click', function() {
    });
});
$("#b2").click(function(){
    $.post('/index/button2click', function() {
    });
});
$("#b3").click(function(){
    $.post('/index/button3click', function() {
    });
});

If you want to do a GET instead of a post then just replace .post with .get.

answered Apr 17 '13 at 09:34

von v.

16,868
4
60
84

When i click `button3` the page gets redirected to `../index/button3click`. And i don't have a view to display, so it ends up complaining that the page is not found. I want it to remain in the Index page it self. How can i do this ? – Sharon Watinsan Apr 17 '13 at 09:42
What do you intend to do with the buttons, will they be used for a POST or GET request? – von v. Apr 17 '13 at 09:44
It's a GET request. I want it to remain in the Index page or Redirect to another view. I tried `RedirectTo("Index","Home")` but it doesn't work – Sharon Watinsan Apr 17 '13 at 10:21
So you want to issue a GET request using your button but then do a redirect? I think it's better if you explain further what you want to do. You can edit your question and explain there, so everybody can see it too and more people can help you out. – von v. Apr 17 '13 at 10:25
You could do event.PreventDefault as part of the ajax post. http://api.jquery.com/event.preventDefault/ – nik0lai Apr 17 '13 at 11:02

score 3 · Answer 2 · answered Apr 17 '13 at 09:37

In MVC you need to remove the (Asp.Net) idea of linking button clicks to actions. ASP.Net is event driven MVC uses the classic HTTP REST approach.

So the buttons aren't actions, the buttons submit actions. The action that is submitted is controlled by your form. So your form POSTs data to the controller, using a HTTP post.

Now it's not clear what your trying to achieve here. You appear to be returning different views from each action. So using the REST idea, you should be a GETing not a POSTing (your getting HTML). So the simplest idea is to turn your input(submit) into Anchor tag, i.e. a HTTP GET:

@Html.ActionLink("Button1Click")

etc.

Ken Clark · Answer 3 · 2013-04-17T09:46:52.763

One easy way to execute different actions on different button within the same form is to distinguish button click by their name:

Example code is:

View:

@using (Html.BeginForm("MyMethod","Controller"))
{

<input  type="submit" value="b1" name="b1" />

 <input type="submit" value="b2" name="b2" />
 <input type="submit" value="b3" name="b3" />

}

Controller:

    [HttpPost]
    public ActionResult MyMethod(string b1, string b2, string b3)
    {
        if (b1 != null)
        {
            return Button1Click();
        }
        else if (b2 != null)
        {
            return Button2Click();
        }
        else
        {
            return Button3Click();
        }
    }

    public ActionResult Button1Click()
    {

        return RedirectToAction("Index");
    }

    public ActionResult Button3Click()
    {

        return RedirectToAction("Index");
    }

    public ActionResult Button2Click()
    {

        return RedirectToAction("Index");
    }

score 0 · Answer 4 · answered Apr 17 '13 at 09:43

0

MVC doesn't work like Webforms where you have a ButtonClick event. Do you want to post any values to the controller?

If not, you can use a link that you can style like a button. Use the buildin Html extensions.

//For links
@Html.ActionLink("Button1Text","Button1Click")
@Html.ActionLink("Button2Text","Button2Click")
@Html.ActionLink("Button3Text","Button3Click")

//If you need more styling options
<a href="@Html.Action("Button1Click")" class="btn">Button1</a>
<a href="@Html.Action("Button2Click")" class="btn">Button2</a>
<a href="@Html.Action("Button2Click")" class="btn">Button3</a>

That way you don't need any javascript or multiple forms in your view. You'll have to add some styling in your CSS files.

answered Apr 17 '13 at 09:43

Bart De Meyer

147
7

2

couldn't you just `@Html.ActionLink("Button1Text","Button1Click", new {@class="btn"})`? – Liam Apr 17 '13 at 09:45
@Liam Indeed, if you just want to add a css class you can use that notation! – Bart De Meyer Apr 17 '13 at 10:01
Well technically no, you can add any HTML attributes using that method. – Liam Apr 17 '13 at 10:13

How to execute 3 different controller methods from the same view

4 Answers4