PDA

View Full Version : [CLOSED] Partial View



PriceRightHTML5team
Jul 15, 2013, 10:59 AM
How to render MVC Partial view in Ext.net container or Panel?

Daniil
Jul 15, 2013, 12:40 PM
Hi @PriceRightHTML5team,

Please investigate these examples.
http://mvc.ext.net/#/search/partial

PriceRightHTML5team
Jul 15, 2013, 6:52 PM
Here is a sample project you can replicate the issues in.

As in the code I posted already you'll see the various ways I tried to load content into a portlet from a partial. None of these ways are working correctly. Please feel free to make the needed corrections and post an update.

Thanks,
-Rob

--

Download zip:
https://docs.google.com/file/d/0B23pNyZAHAJmYzlOdXppMlZDWUk/edit?usp=sharing

Example Urls - no need to login
http://localhost:50856/dashboard/index
http://localhost:50856/dashboard/indextwo

Note:
Css files are missing for portal and portal themes need to be applied correctly as well. I'm working on that issue in another thread here:
http://forums.ext.net/showthread.php?25643-Portal-Styles&p=113369#post113369

Baidaly
Jul 15, 2013, 8:38 PM
Try the following one:



@model SandboxOneMvc.Models.DashboardModel
@using Ext.Net
@using Ext.Net.MVC
@using SandboxOneMvc.Models

@{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_LayoutBlank.cshtml";
}

@*<link href="~/Content/thirdPartyCss/ext_custom_graythem.css" rel="stylesheet" />*@
<div class="dashboard-portal">

@functions
{

private Portlet InitPortlet(IWidget widgetContent)
{
var widgetModel = CastWidgetModel(widgetContent);

Portlet portlet = Html.X().Portlet()
.ID("portlet" + widgetModel.WidgetId)
.MinHeight(250)
.ContentFromPartial(widgetModel.WidgetUrl, widgetModel);

return portlet;
}

private IWidget CastWidgetModel(IWidget widgetContent)
{
IWidget widgetModel;

switch (widgetContent.WidgetId)
{
case 100:
widgetModel = widgetContent as WidgetModelAlerts;
break;
case 200:
widgetModel = widgetContent as WidgetModelRefernecePricing;
break;
default:
widgetModel = widgetContent as WidgetModelError;
break;
}

return widgetModel;
}

}

@(Html.X().ResourceManager())

@(Html.X().Portal().ID("Dashboard_Portal").Border(false)
.Items(Html.X().Portal()
.Items(Html.X().PortalColumn().Cls("x-column-padding")
.Items(portlets =>
{
foreach (var widgetContent in Model.Widgets)
{
IWidget thisWidget = widgetContent;
portlets.Add(this.InitPortlet(thisWidget));
}
})
)))



</div>

PriceRightHTML5team
Jul 15, 2013, 9:17 PM
ok, that worked but I want to be able to dynamically load the columns like I do in the example in the index.cshtml. Is there a way to build the portlet like I'm doing in that example?

Also, the javascript doesn't seem to be working for drag and drop, etc. What do I need to include?

Baidaly
Jul 15, 2013, 9:28 PM
My sample based on your IndexTwo.cshtml and I have the following: 6558

PriceRightHTML5team
Jul 15, 2013, 9:32 PM
yes, I have gotten indextwo to work before. I'm more interested in getting index.cshtml to work. We have this similar code working in another project but when I move it over to my project and the example I sent it doesn't work.

Baidaly
Jul 15, 2013, 10:30 PM
The following code based on your index.cshtml works for me:



@model SandboxOneMvc.Models.DashboardModel
@using Ext.Net
@using Ext.Net.MVC
@using SandboxOneMvc.Models

@{
ViewBag.Title = "Dashboard";
Layout = "~/Views/Shared/_LayoutBlank.cshtml";

// DEBUG:
var m = Model;
}

@* TODO: RobM - 6/13*@

@functions
{
private IEnumerable<PortalColumn> InitPortal()
{
return InitPortalColumn();
}

private IEnumerable<PortalColumn> InitPortalColumn()
{
var layoutColumnCount = 2; // NOTE: hardcoded

List<PortalColumn> columns = new List<PortalColumn>();

for (int currentColumn = 1; currentColumn <= layoutColumnCount; currentColumn++)
{
PortalColumn portalColumn = new PortalColumn
{
ID = "portal-column" + currentColumn,
Cls = "x-column-padding",
MarginSpec = "0 10 0 10"
};

InitPortlet(currentColumn, portalColumn);

columns.Add(portalColumn);
}

return columns;

}

private string GetPortletHtml(string widgetName)
{
string html = "";
var sb = new System.Text.StringBuilder();

sb.Append("<div>");
sb.Append("<p>" + widgetName + "</p>");
sb.Append("<p>");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("<br />");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("Test Test Test Test Test Test Test Test Test Test Test Test");
sb.Append("</p>");
sb.Append("</div>");

html = sb.ToString();

return html;
}

private string GetWidgetPartialViewHtml(string widgetUrl, IWidget widgetViewModel)
{
return Html.Partial(widgetUrl, widgetViewModel).ToHtmlString();
}

private void InitPortlet(int currentColumn, PortalColumn portalColumn)
{
var layoutColumnCount = 1; // NOTE: hardcoded
var widgets = Model.Widgets;

foreach (var widget in widgets.Where(w => w.WidgetColumnPosition == currentColumn))
{
var widgetViewModel = CastWidgetModel(widget);
var portlet = new Ext.Net.Portlet.Builder();

portlet = Html.X().Portlet()
.ID("portlet-" + widget)
// Load Partial
.ContentFromPartial(widget.WidgetUrl, widgetViewModel)
.Html(GetPortletHtml(widget.WidgetName))
//.Html(GetWidgetPartialViewHtml(widget.WidgetUrl, widgetViewModel))
// Ext.Net - Complex
.Title(widget.WidgetName)
.Closable(false)
//.Layout(LayoutType.Fit)
//.Anchor("100% 50%")
.MinHeight(250)
.TopBar(new Toolbar
{
Items = { new Button { Text = "Reload", Icon = Icon.ArrowRefresh, OnClientClick = "alert('toolbar')" } }
});

portalColumn.Items.Add(portlet);
}
}

private IWidget CastWidgetModel(IWidget widgetContent)
{
IWidget widgetModel;

switch (widgetContent.WidgetId)
{
case 100:
widgetModel = widgetContent as WidgetModelAlerts;
break;
case 200:
widgetModel = widgetContent as WidgetModelRefernecePricing;
break;
default:
widgetModel = widgetContent as WidgetModelError;
break;
}

return widgetModel;
}
}

@(Html.X().ResourceManager())
@(Html.X().Viewport().Layout("Fit")
.Items(
Html.X().Portal()
.ID("dashboardPortal")
.Layout(LayoutType.Fit)
.Items(InitPortal())
)
)

PriceRightHTML5team
Jul 16, 2013, 1:14 AM
ok, great!

Thanks for taking the time to help.
-Rob

* Comment out the .Html line so the code loads the partial view and not the static html.




private void InitPortlet(int currentColumn, PortalColumn portalColumn)
{
var layoutColumnCount = 1; // NOTE: hardcoded
var widgets = Model.Widgets;

foreach (var widget in widgets.Where(w => w.WidgetColumnPosition == currentColumn))
{
var widgetViewModel = CastWidgetModel(widget);
var portlet = new Ext.Net.Portlet.Builder();

portlet = Html.X().Portlet()
.ID("portlet-" + widget)
.ContentFromPartial(widget.WidgetUrl, widgetViewModel)
//.Html(GetPortletHtml(widget.WidgetName))
.Title(widget.WidgetName)
.Closable(false)
.MinHeight(250)
.TopBar(new Toolbar
{
Items = { new Button { Text = "Reload", Icon = Icon.ArrowRefresh, OnClientClick = "alert('toolbar')" } }
});

portalColumn.Items.Add(portlet);
}
}

Daniil
Jul 16, 2013, 1:16 PM
I guess you need the ContentFromPartial feature.

Index.cshtml

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@Html.X().Panel().ContentFromPartial("Partial")
</body>
</html>


Partial.cshtml

<b>Hello from Partial!</b>