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?

Answer 1

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.

Answer 2

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