Knockout MVC

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;" name="ItemToAdd" type="text" /></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>