<% MealCustomPopup.MultiLookup()
      .MultiLookupGrid(Page.Url().Action("MealMultiLookup", "MultiLookupDemo"))
      .Height(500)
      .Width(500)
      .Controller("MealsMultiLookup"); %>
<awe:Ocon runat="server" ID="MealCustomPopup" />

public class MealsMultiLookupController : Controller
{
    public ActionResult GetItems(int[] v)
    {
        var items = new List<Meal>();
        if (v != null)
        {
            items.AddRange(v.Select(Db.Get<Meal>));
        }

        return Json(items.Select(meal => new KeyContent(meal.Id, meal.Name)));
    }

    public ActionResult Search(string search, int[] selected, int page)
    {
        const int pageSize = 10;
        selected = selected ?? new int[] { };
        search = (search ?? "").ToLower().Trim();

        var items = Db.Meals.Where(o => o.Name.ToLower().Contains(search) && !selected.Contains(o.Id));

        return Json(new AjaxListResult
        {
            Items = items.Skip((page - 1) * pageSize).Take(pageSize).Select(o => new KeyContent(o.Id, o.Name)),
            More = items.Count() > page * pageSize
        });
    }

    public ActionResult Selected(int[] selected)
    {
        var items = new List<Meal>();
        if (selected != null)
        {
            items.AddRange(selected.Select(Db.Get<Meal>));
        }
        
        return Json(new AjaxListResult
        {
            Items = items.Select(o => new KeyContent(o.Id, o.Name))
        });
    }
}

@model AwesomeWebFormsDemo.ViewModels.Input.Lookup.LookupPopupInput
@using (Html.Awe().BeginContext())
{
    <div class="bar">
        @Html.Awe().TextBoxFor(o => o.Search).Placeholder("search...")
    </div>
    <div class="o-flexf o-flex-col" style="max-width: 900px; gap: .5em;">
        @(Html.Awe().Grid("MealsGrid1")
              .Mod(o => o.Main()
                .MovableRows(x => x.DropOn("MealsGrid1").DropOn("MealsGrid2"))
                .KeyNav())
              .CssClass("awe-srl")
              .Parent(o => o.Search, "name")
              .Columns(
                  new Column { Bind = "Id", Width = 120, ClientFormat = GridUtils.MoveBtn() + " .(Id)"},
                  new Column { Bind = "Name", Width = 150 }.Mod(o => o.Nohide()),
                  new Column { Bind = "Description", CssClass = "txtlim" }.Mod(o => o.Autohide()))
              .Url(Url.Action("MealsGridSearch", "Data"))
              .Groupable(false))
        @(Html.Awe().Grid("MealsGrid2")
              .Mod(o => o.PageInfo().KeyNav().MovableRows(x => x.DropOn("MealsGrid1").DropOn("MealsGrid2")))
              .CssClass("awe-sel")
              .Columns(
                  new Column { Bind = "Id", Width = 120, ClientFormat = GridUtils.MoveBtn() + " .(Id)" },
                  new Column { Bind = "Name", Width = 150 }.Mod(o => o.Nohide()),
                  new Column { Bind = "Description", CssClass = "txtlim" }.Mod(o => o.Autohide()))
              .Url(Url.Action("MealsGridSelected", "Data"))
              .ShowHeader(false)
              .Groupable(false)
              .Paging(false))
    </div>
}

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using AwesomeWebFormsDemo.Data;
using AwesomeWebFormsDemo.Models;

using Omu.AwesomeWebForms;

namespace AwesomeWebFormsDemo.Controllers.Awesome.MultiLookup
{
    public class MealsCustomItemMultiLookupController : Controller
    {
        public ActionResult SearchForm()
        {
            return PartialView();
        }

        public ActionResult GetItems(IEnumerable<int> v)
        {
            return Json(Db.Meals.Where(o => v != null && v.Contains(o.Id))
                          .Select(f => new KeyContent(f.Id, f.Name)));
        }

        public ActionResult Search(string search, int[] selected, int page)
        {
            const int pageSize = 10;
            selected = selected ?? new int[] { };
            search = (search ?? "").ToLower().Trim();

            var items = Db.Meals.Where(o => o.Name.ToLower().Contains(search)
                                            && (!selected.Contains(o.Id)));
            
            //instead of setting the Items property we set the Content with rendered html
            return Json(new AjaxListResult
                {
                    Content = this.RenderPartialView("items", items.Skip((page - 1) * pageSize).Take(pageSize)),
                    More = items.Count() > page * pageSize
                });
        }

        public ActionResult Selected(IEnumerable<int> selected)
        {
            return Json(new AjaxListResult
                {
                    Content = this.RenderPartialView("items", Db.Meals.Where(o => selected != null && selected.Contains(o.Id)))
                });
        }

        //used by the details button, in items view
        public ActionResult Details(int id)
        {
            return PartialView(Db.Get<Meal>(id));
        }
    }
}

@{ Layout = null; }
<input type="text" name="search" class="awe-searchtxt"/><button type="button" class="awe-searchbtn awe-btn">Search</button>
@(Html.Awe().InitPopup()
        .Name("details")
        .Url(Url.Action("Details"))
        .Modal()
        .Mod(o => o.OutClickClose()))

@model IEnumerable<AwesomeWebFormsDemo.Models.Meal>
@{
    Layout = null;
    var picUrl = Url.Content(DemoUtils.MealsUrl);
}
@if (ViewData["caption"] != null)
{
    foreach (var o in Model)
    {
        <li class="mealsMLCaption" data-val="@(o.Id)">
            <div>
                <img src="@(picUrl)@(o.ImageName)" alt="@o.Name" />
            </div>
            <div>
                @o.Name
            </div>
        </li>
    }
}
else
{
    foreach (var o in Model)
    {
        <li class="awe-li mealsMLItem" data-val="@(o.Id)">
            <div>
                <button class="awe-movebtn awe-btn" type="button" tabindex="-1">@(Html.Raw(Settings.MultiLookup.MoveIco))</button>
            </div>
            <div>
                <img src="@(picUrl)@(o.ImageName)" alt="@o.Name" />
            </div>
            <div style="text-wrap: nowrap; text-overflow: ellipsis; overflow: hidden;">
                @o.Name -
                @o.Description
            </div>
            <button onclick="awe.open('details', { params: { id: @o.Id } }, event)" class="awe-btn awe-nonselect lkdetail" tabindex="-1">
                Details
            </button>
        </li>
    }
}