绑定模型的问题

Question

When attempting to bind a model to a view, I'm getting a 404 error. The ActionResult is called 'SortDesc' but the view is just a standard 'Index' view. I understand that this isn't loading because the there is now view called 'SortDesc'. However I have two buttons one to sort data ascending and one to sort data decending hence the two seperate functions. I'm just not sure what the best solution would be here, either to continue with the two seperate functions and somehow pass in the correct view to load or to create a new, single HttpPost function on Index that will know which button has been clicked and sort accordingly. Here's the code I have so far:

Models:

public class NumberSetList
{
    public int NumberSetListId { get; set; }
    public List<NumberList> Numbers { get; set; }

    public string SortOrder { get; set; }
}

public class NumberList
{
    public int NumberListId { get; set; } 
    public int Number1 { get; set; }
    public int Number2 { get; set; }
    public int Number3 { get; set; }
    public int Number4 { get; set; }
    public int Number5 { get; set; }
    public string SortOrder { get; set; }
}

Razor:

@{
    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">
                        <a class="btn btn-default" href="@Url.Action("SortDesc", "Home")"><i class="glyphicon glyphicon-arrow-down"></i> Sort Desc</a>
                        <a class="btn btn-default" href="@Url.Action("SortAsc", "Home")"><i class="glyphicon glyphicon-arrow-down"></i> Sort Asc</a>
                    </div>
                </form>
                <p>
                    @if (Model != null)
                    {
                        foreach (int number in Model.Numbers)
                        {
                            <span class="label label-info">@number</span>
                        }
                    }   
                </p>
            </div>
        </div>
    </div>
</div>

Home Controller:

public ActionResult Index()
{
    return View();
}

[HttpPost]
public ActionResult SortDesc([Bind(Include = "Number1, Number2, Number3, Number4")] NumberSetList model)
{

    if (!ModelState.IsValid)
    {
        return View();
    }
    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);
    }

}

Answer 1

Try this

public class NumberSetList {
    public int NumberSetListId { get; set; }
    public List<NumberSetItem> Numbers { get; set; }
    public string SortOrder { get; set; }
}

public class NumberSetItem {
    public int Value { get; set; }
}

, use for loop to create inputs for the numbers

 @using (Html.BeginForm()) {
    <div class="col-md-9">
        <div class="form-group">
            @if (Model != null && Model.Numbers != null) {
                @for (int i = 0; i < Model.Numbers.Count; i++) {
                    <div class="form-group">
                        @Html.LabelFor(m => m.Numbers[i].Value, "Number " + (i+1).ToString())
                        @Html.TextBoxFor(m => m.Numbers[i].Value, new { @class = "form-control" })
                    </div>
                }
               <div class="col-md-3 text-right">
                   <input id="SortOrder" value="Desc" type="button" class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i> Sort Desc</input>
                   <input id="SortOrder" value="Asc" type="button" class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i> Sort Asc</input>
               </div>
            }
        </div>
    </div>
}

And in the View

[HttpPost]
public ActionResult Index(NumberSetList model) {
    if (!ModelState.IsValid) {
        return View();
    } else {
        var numbers = model.SortOrder == "Desc" ?
            model.Numbers.OrderByDescending(n => n.Value) : 
            model.Numbers.OrderBy(n => n.Value);
        model.Numbers = numbers.ToList();
        return View(model);
    }
}

Answer 2

You can fix the issue using a variety of techniques.

Pass the name of the view into the View method like this:

return View("Index", list);

The View method has many overloads and you can see them all here . It is nice to get yourself familiar with the overloads for scenarios like the one you are facing.

If your view is not in the same folder as the action, you will need to pass the path for the view instead of just the name.

Another way is to have a single action and you can call this one Index as well but this one will take a model as an argument. Your model can have the numbers and an enum for sort: Desc, Asc. In your action method you can analyze the model, and do whatever is needed.

The approach with the model is the one I prefer.

EDIT

I just noticed you have this line of code in your view:

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

That will trigger an HTTP GET and therefore it will not hit your SortDsc action method. Remove POST from your action method or use a post technique (Form) to hit your action method using POST.

EDIT 2

Honestly what you are doing is far simpler than you are making it. First thing is when you are using Url.Actio you are not passing nothing to your action method so how will it know about the numbers? I would normally call my action method using AJAX and get the result and display the result.

Without AJAX, you need to use one form for ascending and one for descending. Or you can use a radio button so user can select the order first.

Here is some code to do it using radio buttons.

Action:

[HttpPost]
public ActionResult SortDesc([Bind( Include = "Number1, Number2, Number3, Number4, SortOrder" )] NumberList model) {

   if( !ModelState.IsValid ) {
      return View("Index");
   }
   model.Numbers = new List<int>();
   model.Numbers.Add( model.Number1 );
   model.Numbers.Add( model.Number2 );
   model.Numbers.Add( model.Number3 );
   model.Numbers.Add( model.Number4 );
   model.Numbers.Add( model.Number5 );
   if (model.SortOrder == "Desc" ) {
      model.Numbers = model.Numbers.OrderByDescending( i => i ).ToList();
   }
   else {
      model.Numbers = model.Numbers.OrderBy( i => i ).ToList();
   }

   return View("Index", model);

}

Model:

public class NumberList {
   public int Number1 { get; set; }
   public int Number2 { get; set; }
   public int Number3 { get; set; }
   public int Number4 { get; set; }
   public int Number5 { get; set; }
   public int NumberListId { get; set; }
   public List<int> Numbers { get; set; }
   public string SortOrder { get; set; }
}

View:

@using( Html.BeginForm( "SortDesc", "Home", FormMethod.Post ) ) {
<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 class="form-group">
                            <input type="radio" class="form-control" id="number4" name="SortOrder" value="Desc">
                        </div>
                        <div class="form-group">
                            <input type="radio" class="form-control" id="number4" name="SortOrder" value="Asc">
                        </div>
                    </div>

                    <div class="col-md-3 text-right">
                        <button class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i> Sort </button>
                        @*<a class="btn btn-default"><i class="glyphicon glyphicon-arrow-down"></i> Sort Asc</a>*@
                    </div>
                </form>
                <p>
                    @if( Model != null ) {
                        foreach( int number in Model.Numbers ) {
                        <span class="label label-info">@number</span>
                        }
                    }
                </p>

            </div>
        </div>
    </div>
</div>

}