Better list

Description

Extended SimpleList sample: addition of an element is more complicated, delete and sort operations are added, work with multiple elements is available.

The original example: http://knockoutjs.com/examples/betterList.html

Live example

Add item:

Your values:

Model

public class BetterListModel
{
  public string ItemToAdd { get; set; }
  public List<string> AllItems { get; set; }
  public List<string> SelectedItems { get; set; }

  public void AddItem()
  {
    if (!string.IsNullOrEmpty(ItemToAdd) && !AllItems.Contains(ItemToAdd))
      AllItems.Add(ItemToAdd);
    ItemToAdd = "";
  }

  public void RemoveSelected()
  {
    AllItems.RemoveAll(item => SelectedItems.Contains(item));
    SelectedItems.Clear();      
  }

  public void SortItems()
  {
    AllItems.Sort();
  }
}

Razor

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.BetterListModel
@{
  var ko = Html.CreateKnockoutContext();
}
@using (ko.Html.Form("AddItem", "BetterList", null, new {id = "myform"}))
{
  <span>Add item: @ko.Html.TextBox(m => m.ItemToAdd).ValueUpdate(KnockoutValueUpdateKind.AfterKeyDown)</span>        
  <button type="submit" @ko.Bind.Enable(m => m.ItemToAdd.Length > 0)>Add</button>

  <p>Your values:</p>
  @ko.Html.ListBox(m => m.AllItems, new {width = 100, size = 10}).SelectedOptions(m => m.SelectedItems)

  <div>
    @ko.Html.Button("Remove", "RemoveSelected", "BetterList").Enable(m => m.SelectedItems.Count > 0)
    @ko.Html.Button("Sort", "SortItems", "BetterList").Enable(m => m.AllItems.Count > 1)
  </div>
}

<script type="text/javascript">
    $('#myform').ajaxForm();
</script>

@ko.Apply(Model)

Controller

public class BetterListController : BaseController
{
  public ActionResult Index()
  {
    InitializeViewBag("Better list");
    var model = new BetterListModel
    {
      AllItems = new List<string> { "Fries", "Eggs Benedict", "Ham", "Cheese" },
      SelectedItems = new List<string> { "Ham" }
    };
    return View(model);
  }

  public ActionResult AddItem(BetterListModel model)
  {
    model.AddItem();
    return Json(model);
  }

  public ActionResult RemoveSelected(BetterListModel model)
  {
    model.RemoveSelected();
    return Json(model);
  }

  public ActionResult SortItems(BetterListModel model)
  {
    model.SortItems();
    return Json(model);
  }
}

Html (autogenerated)

<form data-bind="submit : function() {executeOnServer(viewModel, &#39;/BetterList/AddItem&#39;);}" id="myform">
  <span>Add item: <input data-bind="value : ItemToAdd,valueUpdate : &#39;afterkeydown&#39;" /></span>        
  <button type="submit" data-bind="enable : (ItemToAdd().length > 0)">Add</button>
  <p>Your values:</p>
<select data-bind="options : AllItems,selectedOptions : SelectedItems" multiple="multiple" size="10" width="100"></select>  <div>
    <button data-bind="click : function() {executeOnServer(viewModel, &#39;/BetterList/RemoveSelected&#39;);},enable : (SelectedItems().length > 0)">Remove</button>
    <button data-bind="click : function() {executeOnServer(viewModel, &#39;/BetterList/SortItems&#39;);},enable : (AllItems().length > 1)">Sort</button>
  </div>
</form>

<script type="text/javascript">
    $('#myform').ajaxForm();
</script>

<script type="text/javascript"> 
var viewModelJs = {"ItemToAdd":"","AllItems":["Fries","Eggs Benedict","Ham","Cheese"],"SelectedItems":["Ham"]};
var viewModel = ko.mapping.fromJS(viewModelJs); 
ko.applyBindings(viewModel);
</script>