Action Not Firing When Button Clicked

Question

I have a Razor Index page with a button, that when clicked should run an action on the Home Controller, but when I debug the home controller, the action is not firing and the break point not being hit.

The Razor code is:

@{
    ViewBag.Title = "csi media web test";
}

<div class="jumbotron">
    <h1>csi media web test</h1>
    <p class="lead">Liane Stevenson</p>
</div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-info">
            <div class="panel-heading"><i class="glyphicon glyphicon-arrow-right"></i> Enter Your Four Numbers</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="col-md-9">
                        <div class="form-group">
                            <label class="sr-only" for="number1">1st Number</label>
                            <input type="number" class="form-control" id="number1" name="Number1" placeholder="#1">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="number2">2nd Number</label>
                            <input type="number" class="form-control" id="number2" name="Number2" placeholder="#2">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="number3">3rd Number</label>
                            <input type="number" class="form-control" id="number3" name="Number3" placeholder="#3">
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="number4">4th Number</label>
                            <input type="number" class="form-control" id="number4" name="Number4" placeholder="#4">
                        </div>
                    </div>
                    <div class="col-md-3 text-right">
                        <button class="btn btn-default" onclick="location.href='@Url.Action("SortDesc", "Home")'"><i class="glyphicon glyphicon-arrow-down"></i> Sort Desc</button>
                        <button class="btn btn-default" onclick="location.href='@Url.Action("SortAsc", "Home")'"><i class="glyphicon glyphicon-arrow-up"></i> Sort Asc</button>
                    </div>
                </form>
                <p>
                    @if (Model != null)
                    {
                        foreach (int number in Model.Numbers)
                        {
                            <span class="label label-info">@number</span>
                        }
                    }   
                </p>
            </div>
        </div>
    </div>
</div>

And the Action is:

public ActionResult SortDesc (string number1, string number2, string number3, string number4)
        {
            NumberSetList list = new NumberSetList();
            List<int> numbers = new List<int>();
            numbers.Add(Convert.ToInt32(number1));
            numbers.Add(Convert.ToInt32(number2));
            numbers.Add(Convert.ToInt32(number3));
            numbers.Add(Convert.ToInt32(number4));
            numbers.OrderByDescending(i => i);
            list.SortOrder = "Desc";
            return View(list);
        }

When it runs it does however change the URL of the page to:

http://localhost/Home/Index?number1=5&number2=4&number3=3&number4=9

So it's almost as if it knows the action is there and what it takes but it just doesn't run it?

rather than have your variables \ parameters in the method signature have you thought about model binding and then you can see if the model is valid. I suspect youre getting there but theres something up with the data that youre passing across. — Simon Price, Dec 02 '16 at 12:56
Assumed I have to pas them as a string as they're coming from an input field — Web Develop Wolf, Dec 02 '16 at 12:58
mvc is clever enough to determine the data type being passed in, and if you use model biding that would make it much simpler for you — Simon Price, Dec 02 '16 at 12:59
When the page loads thoough there is no model until that data is entered by the user so surely theres nothing to bind to? — Web Develop Wolf, Dec 02 '16 at 13:03
this is the ViewModel Model View approach and yes, you can bind to a model, but it you look at my answer there are three things in there that would help you. The first you should try is adding `[HttpPost]` attribute before your public actionresult... — Simon Price, Dec 02 '16 at 13:05
I have experienced problems in the past where inline onclick events don't work.. which led me to [this](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice).. so I would suggest to not mix the languages and create separate scripts for these — Grizzly, Dec 02 '16 at 14:18
is the issue about the data not binding into your model or the click doesnt hit the mentioned controller. ?? — Rajshekar Reddy, Dec 02 '16 at 14:20
Originally it was the click not working - now it's about the view not loading — Web Develop Wolf, Dec 02 '16 at 14:21
@WebDevelopWolf since you accepted the answer should I consider the issue to be resolved? because that answer still doesn't guide you to Bind the form data to your controller. — Rajshekar Reddy, Dec 02 '16 at 14:28
I thought it might be best to resolve this one as the original issue is fixed and open a new question for the new issue. — Web Develop Wolf, Dec 02 '16 at 14:30

score 1 · Answer 1 · edited Dec 02 '16 at 13:06

This code is pseudo code and is untested but this should give you an idea

put this in your models folder

public class myViewModel
{
  public int Number1 {get; set;}
  public int Number2 {get; set;}
  public int Number3 {get; set;}
  public int Number4 {get; set;}

}

change your controller to something like this

[HttpPost]
public ActionResult SortDesc (myViewModel model)
{

    if(!ModelState.IsValid)
    {
        return View(list)
    }
    else
    {
        NumberSetList list = new NumberSetList();
        List<int> numbers = new List<int>();
        numbers.Add(model.Number1);
        numbers.Add(model.Number2));
        numbers.Add(model.Number3));
        numbers.Add(model.Number4));
        numbers.OrderByDescending(i => i);
        list.SortOrder = "Desc";
        return View(list);
    }

}

this will tell you if your model is valid or not, but I suspect your data is being passed and read as an integer rather than a string, so you could try changing the object type first and then try model binding

but on a review of my code just then, you might be missing the [HttpPost] attribute at the start of the code block which would mean this is always a HttpGet

Changing the data passed to int didn't fire anything either - also added [HttpPost] — Web Develop Wolf, Dec 02 '16 at 13:56
ok, can you post any more of your code please, and more of your razor code and i'll look at replicating your page and see what I can produce — Simon Price, Dec 02 '16 at 13:59
Ok so that fires now I change the butt ot an anchor - however my view is called "Index" not SortDesc - as I have two sort buttons is there any way around this? — Web Develop Wolf, Dec 02 '16 at 14:15

score 1 · Accepted Answer · answered Dec 02 '16 at 14:05

What you need is a anchor tag and not a button. Having a link on a tag will actually change the browser URL to the value given in its href. Where as a button will do nothing. To change the URL you will have to add additional Javascript to handle it.

So change this

<button class="btn btn-default" onclick="location.href='@Url.Action("SortDesc", "Home")'">
 <i class="glyphicon glyphicon-arrow-down"></i> Sort Desc
</button>

to

<a class="btn btn-default" href="@Url.Action("SortDesc", "Home")">
<i class="glyphicon glyphicon-arrow-down"></i> Sort Desc
</a>

Do the same changes to your other button syntax too.

Action Not Firing When Button Clicked

2 Answers2