Aug 31, 2016, 1:29 AM
Here's a working version of the example.
For simplicity, both controllers and the model are all defined in the same controller, so the three views and the partial view will be found into the same path on the server.
The only thing this changes is that I won't need to specify the controller name in the actions, as by default it is all in the same controller.
Controller code: Controllers\c61383_iFrameWithPartialController.cs
For simplicity, both controllers and the model are all defined in the same controller, so the three views and the partial view will be found into the same path on the server.
The only thing this changes is that I won't need to specify the controller name in the actions, as by default it is all in the same controller.
Controller code: Controllers\c61383_iFrameWithPartialController.cs
public class c61383_iFrameWithPartialController : Controller
{
// GET: c61383_iFrameWithPartial
[HttpGet]
public ActionResult Shell()
{
return View();
}
public ActionResult Home()
{
var partialView = new Ext.Net.MVC.PartialViewResult
{
ContainerId = "MainContent",
WrapByScriptTag = false,
ViewName = "Home"
};
this.GetCmp<Container>(partialView.ContainerId).Unmask();
return partialView;
}
#region Foo controller
[HttpGet]
public ActionResult Index()
{
// This simulates a real-world server round-trip time
System.Threading.Thread.Sleep(1500);
var partialView = new Ext.Net.MVC.PartialViewResult
{
ContainerId = "MainContent",
ViewName = "FooView",
RenderMode = RenderMode.AddTo,
WrapByScriptTag = false,
Model = new FooModel()
{
TextValue = "TextValue",
DateTimeValue = DateTime.Now,
ComboValue1 = new ListItem("Item 1", "1"),
ComboValue2 = new ListItem[]
{
new ListItem("Item 1", "1"),
new ListItem("Item 5", "5")
},
ComboValue3 = "1",
CheckboxValue = true,
NumberValue = 1,
MultiSliderValue = new int[] { 10, 40, 70 },
Data = new ListItem[]
{
new ListItem("Item 1", "1"),
new ListItem("Item 2", "2"),
new ListItem("Item 3", "3"),
new ListItem("Item 4", "4"),
new ListItem("Item 5", "5")
}
}
};
this.GetCmp<Container>(partialView.ContainerId).Unmask();
return partialView;
}
[HttpPost]
public ActionResult Index(FooModel model)
{
// Simulate server round-trip timing
System.Threading.Thread.Sleep(2000);
X.Msg.Notify("Saved", "Successfully saved").Show();
return this.Direct();
}
#endregion FooController
#region FooModel
public class FooModel
{
[Field(FieldLabel = "TextField")]
public string TextValue { get; set; }
[Field(FieldLabel = "DateField")]
public DateTime DateTimeValue { get; set; }
[Field(FieldLabel = "ComboBox 1")]
public ListItem ComboValue1 { get; set; }
[Field(FieldLabel = "ComboBox 2")]
public IEnumerable<ListItem> ComboValue2 { get; set; }
[Field(FieldLabel = "ComboBox 3")]
public string ComboValue3 { get; set; }
[Field(FieldLabel = "CheckBox")]
public bool CheckboxValue { get; set; }
[Field(FieldLabel = "NumberField")]
public int NumberValue { get; set; }
[Field(FieldLabel = "MultiSlider")]
public int[] MultiSliderValue { get; set; }
public IEnumerable<ListItem> Data { get; set; }
}
#endregion FooModel
}@{
ViewBag.Title = "Index";
Layout = null;
var X = Html.X();
}
<script type="text/javascript">
var handleMenuChoice = function () {
var container = App.MainContent,
content = container.el.dom.children;
container.mask('Loading . . .');
// Remove the main content if present
if (content[1] && content[1].children[0]) {
var cmp = Ext.getCmp(content[1].children[0].id);
cmp.destroy();
}
if (content[0] && content[0].children[0]) {
var subContent = content[0].children[0].children;
for (var i = 0; i < subContent.length; i++) {
var subCmp = Ext.getCmp(subContent[i].id);
if (subCmp) subCmp.destroy();
}
}
}
</script>
@(Html.X().ResourceManager())
@(
X.Viewport()
.Layout(LayoutType.Anchor)
.Items(
X.Container()
.Region(Ext.Net.Region.North)
.Border(true)
.ID("TopPanel")
.Items(
X.Toolbar()
.ID("ToolBarContent")
.Items(
X.ComboBox()
.ID("cmbTest1")
.Editable(false)
.Width(250)
.LabelWidth(30)
.MarginSpec("0 5 0 5")
.FieldLabel("Test1:")
.Items(
new Ext.Net.ListItem("Item 1", "1"),
new Ext.Net.ListItem("Item 2", "2")
)
),
X.Toolbar()
.ID("ToolBarMenu")
.Items(
X.Button()
.ID("MenuGlobalSetupButton")
.Text("GlobalSetup")
.Icon(Icon.World)
.Menu(
X.Menu()
.Icon(Icon.ArrowDown)
.Header(false)
.Items(
X.MenuItem()
.ID("MenuFooItem")
.Icon(Icon.BulletWrench)
.Text("Foo Setup")
.Handler("handleMenuChoice()")
.DirectClickAction("Index")
)
)
)
),
X.Container()
.ID("MainContent")
.HeightSpec("100%") // The "iframe" panel will fit the page body nicely
.Loader(
X.ComponentLoader()
.ID("myLoader")
.Mode(LoadMode.Script)
.Url(Url.Action("Home"))
.Params(new { containerId = "MainContent" })
)
)
)@{Layout = null;}
@(
// This probably is the "catch" as for why you were getting errors on your side
Html.X().Container().Html(@<text>
<div>
<h1>Welcome </h1>
<p>This is a test page.</p>
</div>
</text>)
)@model ExtNetPlaygroundMVC_current.Controllers.c61383_iFrameWithPartialController.FooModel
@{
ViewBag.Title = "Model Bind";
Layout = null;
}
<h1>Foo</h1>
@(
Html.X().FormPanel()
.ID("myPartialForm")
.Layout(LayoutType.Form)
.Width(350)
.FieldDefaults(d =>
{
d.LabelWidth = 150;
})
.BodyPadding(10)
.Frame(true)
.Items(
Html.X().TextFieldFor(m => m.TextValue),
Html.X().DateFieldFor(m => m.DateTimeValue),
Html.X().ComboBoxFor(m => m.ComboValue1).Items(Model.Data),
Html.X().ComboBoxFor(m => m.ComboValue2).Items(Model.Data),
Html.X().ComboBoxFor(m => m.ComboValue3).Items(Model.Data),
Html.X().CheckboxFor(m => m.CheckboxValue),
Html.X().NumberFieldFor(m => m.NumberValue),
Html.X().SliderFor(m => m.MultiSliderValue)
)
.Buttons(
Html.X().Button()
.Text("Save")
.Icon(Icon.Disk)
.FormBind(true)
.DirectEvents(de =>
{
de.Click.Url = Url.Action("Index");
de.Click.Method = HttpMethod.POST;
de.Click.EventMask.ShowMask = true;
de.Click.EventMask.CustomTarget = "App.myPartialForm";
})
)
)
