@model IEnumerable<DevExtreme.MVC.Demos.Models.Store>
<div id="multiview">
<div>
Item <span class="selected-index">1</span>
of <span class="item-count">@Model.Count()</span>:
<i>Swipe the view horizontally to switch to the next view.</i>
</div>
@(Html.DevExtreme().MultiView()
.ID("multiview-container")
.Height(300)
.DataSource(Model)
.SelectedIndex(0)
.Loop(false)
.AnimationEnabled(true)
.OnSelectionChanged("multiView_selectionChanged")
.ItemTemplate(@<text>
<div class="multiview-item">
<h1><%- CompanyName %></h1>
<div>
<p>
<b><%- City %></b>
(<span><%- State %></span>)
</p>
<p>
<span><%- Zipcode %></span>
<span><%- Address %></span>
</p>
</div>
<div>
<p>
Phone: <b><%- Phone %></b>
</p>
<p>
Fax: <b><%- Fax %></b>
</p>
<p>
Website:
<a href="<%- Website %>" target="_blank">
<%- Website %>
</a>
</p>
</div>
</div>
</text>)
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("loop-enabled")
.Value(false)
.Text("Loop enabled")
.OnValueChanged("checkBoxLoopEnabled_valueChanged")
)
</div>
<div class="option">
@(Html.DevExtreme().CheckBox()
.ID("animation-enabled")
.Value(true)
.Text("Animation enabled")
.OnValueChanged("checkBoxAnimationEnabled_valueChanged")
)
</div>
</div>
</div>
<script>
function multiView_selectionChanged(e) {
$(".selected-index")
.text(e.component.option("selectedIndex") + 1);
}
function checkBoxLoopEnabled_valueChanged(e) {
var multiView = $("#multiview-container").dxMultiView("instance");
multiView.option("loop", e.value);
}
function checkBoxAnimationEnabled_valueChanged(e) {
var multiView = $("#multiview-container").dxMultiView("instance");
multiView.option("animationEnabled", e.value);
}
</script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class MultiViewController : Controller {
public ActionResult Overview() {
return View(SampleData.Stores);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace DevExtreme.MVC.Demos.Models {
public class Store {
public int ID { get; set; }
public string CompanyName { get; set; }
public string Address { get; set; }
public string City { get; set; }
public string State { get; set; }
public int Zipcode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
public string Website { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly IEnumerable<Store> Stores = new[] {
new Store {
ID = 1,
CompanyName = "SuprMart",
Address = "702 SW 8th Street",
City = "Bentonville",
State = "Arkansas",
Zipcode = 72716,
Phone = "(800) 555-2797",
Fax = "(800) 555-2171",
Website = "http://www.nowebsitesupermart.com"
},
new Store {
ID = 2,
CompanyName = "El'Depot",
Address = "2455 Paces Ferry Road NW",
City = "Atlanta",
State = "Georgia",
Zipcode = 30339,
Phone = "(800) 595-3232",
Fax = "(800) 595-3231",
Website = "http://www.nowebsitedepot.com"
},
new Store {
ID = 3,
CompanyName = "K&S Music",
Address = "1000 Nicllet Mall",
City = "Minneapolis",
State = "Minnesota",
Zipcode = 55403,
Phone = "(612) 304-6073",
Fax = "(612) 304-6074",
Website = "http://www.nowebsitemusic.com"
},
new Store {
ID = 4,
CompanyName = "Tom Club",
Address = "999 Lake Drive",
City = "Issaquah",
State = "Washington",
Zipcode = 98027,
Phone = "(800) 955-2292",
Fax = "(800) 955-2293",
Website = "http://www.nowebsitetomsclub.com"
}
};
}
}
#multiview {
margin-top: 25px;
}
.multiview-item {
margin:25px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
padding: 20px 0 30px;
}
.multiview-item > div {
padding-top: 20px;
}
#multiview > div:first-child {
padding-left: 25px;
}
#multiview p,
#multiview h1 {
margin: 0;
}
#multiview h1 {
font-size: 34px;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}