[CLOSED] Partial View

[PriceRightHTML5team]

How to render MVC Partial view in Ext.net container or Panel?

[Daniil]

Hi @PriceRightHTML5team,

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

[PriceRightHTML5team]

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/0B23p...it?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...369#post113369

[Baidaly]

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]

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]

My sample based on your IndexTwo.cshtml and I have the following:

[PriceRightHTML5team]

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]

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]

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]

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>