[CLOSED] [MVC-Razor] How to pass Model to Ext PartialView

[UnifyEducation]

Hi,

Here is my example code using Ext.Net PartialView

/Test/RenderPartialView.cshtml:

@{
    Layout = "";
}
@Html.X().ResourceManager()
@Html.X().Label().Text(Model.ToString())
@(Html.X().Panel()
        .ID("Panel1")
        .Padding(5)
        .Layout(LayoutType.Fit)
        .BodyPadding(5)
        .Title("Panel1")
        .Height(500)
        .Width(400)
        .Icon(Icon.Add)
        .Buttons(buttons =>
            buttons.Add(Html.X().Button().Text("Render view").DirectEvents(e =>
            {
                e.Click.Url = "/Test/PartialRazorView/";
                e.Click.EventMask.ShowMask = true;
                e.Click.CleanRequest = true;
                e.Click.ExtraParams.Add(new Parameter("containerId", "App.Panel1"));
            }))
        )
     )
@(Html.X().Panel()
        .ID("Panel2")
        .Padding(5)
        .BodyPadding(5)
        .Title("Panel2")
        .Width(400)
        .Height(500)
        .Icon(Icon.Add)
        .Buttons(buttons =>
            buttons.Add(Html.X().Button().Text("Render view").DirectEvents(e =>
            {
                e.Click.Url = "/Test/PartialRazorView2/";
                e.Click.EventMask.ShowMask = true;
                e.Click.ExtraParams.Add(new Parameter("containerId", "App.Panel2.body.id", ParameterMode.Raw));
            }))
        )
)

/Test/PartialRazorView.cshtml

@(Html.X().Panel().Height(100)
           .Title("Panel from partial view")
           .Items(i=>i.Add(Html.X().Button().Text("Button"))))

Test/PartialRazorView2.cshtml

@(Html.X().Panel()
    .Title("Panel from partial view")
    .Content(@<text>
<h3>
    Simple content</h3>
@Html.X().Button().Text("Button")
</text>)
)

/Controllers/TestController.cs

public ActionResult RenderPartialView()
        {
            object mainModel = new object();
            return View(mainModel);
        }

        public Ext.Net.MVC.PartialViewResult PartialRazorView(string containerId)
        {
            object partialModel1 = new object();
            return new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.AddTo);
        }

        public Ext.Net.MVC.PartialViewResult PartialRazorView2(string containerId)
        {
            object partialModel2 = new object();
            return new Ext.Net.MVC.PartialViewResult(containerId, RenderMode.RenderTo);
        }

I have some questions about using you Ext.Net PartialView:

0.Can you tell me how to load PartialView at the first load. I don't want to click the button and load PartialView after that
1. How I can pass the partialModel1 and Partial Model2 to the PartialView?
2.Is there any way to use mainModel in PartialView?
3.With RenderMode=AddTo, the Panel in /Test/PartialRazorView.cshtml fill all height of Panel1. I have set panel height is 100 but it doesn't work

Thanks in advance

[Vladimir]

Please update from SVN first (form 2.1 branch)

0.Can you tell me how to load PartialView at the first load. I don't want to click the button and load PartialView after that

You can use
- ItemsFromPage/ContentFromPage: in this case, view will be loaded without anu action calling
Additional data can be passed as

      .ItemsFromPage(this, "~/Views/Items/SubPage.cshtml", new { date = DateTime.Now })

and read in SubPage

     .Title("SubPage - " + Page.date.ToString())

- ItemsFromAction/ContentFromAction: in this case, action will be used. Please note, that in this case you have to use standard PartialViewResult (from System.Web.Mvc) because Ext.Net.MVC.PartialViewResult is used for dynamic view loading (via separate request) or for WebForm views only
To pass additional data use routeValues

.ItemsFromAction("SubPage", new { mdl = new { p1 = 1, p2 = 2 } })

Action

public ActionResult SubPage(object mdl)
        {            
            return PartialView(mdl);
        }

In the view

.Title("SubPage - " + Model.p1)

- ItemsFromPartial/ContentFromPartial: load partial view with model passing ability

.ItemsFromPartial("SubPage", new { p1 = 1 })

Another option to use Html.ExtPartial (i don't recommend to use it, ItemsFromPartial generates much better script)

@(
 Html.X().Panel()
            .ID("MainPanel1")
            .Title("Panel 1")
            .Width(400)
            .Height(400)
            .Icon(Icon.Add)
            .Layout(LayoutType.Accordion)            
        )
    @Html.ExtPartial("SubPage", model: new { p1 = 1, p2 = 2 }, mode:RenderMode.AddTo, containerId:"MainPanel1")

1. How I can pass the partialModel1 and Partial Model2 to the PartialView?

Please see my answer for item 0
Also if you use Ext.Net.MVC.PartialViewResult

public ActionResult PartialViewAction()
{
      ViewData.Model = modelObject;


      return new Ext.Net.MVC.PartialViewResult 
      {
            ViewData = this.ViewData
      }
}

2.Is there any way to use mainModel in PartialView?

Please see above how to pass model/additional data to partial view

3.With RenderMode=AddTo, the Panel in /Test/PartialRazorView.cshtml fill all height of Panel1. I have set panel height is 100 but it doesn't work

Because you specified Fit layout, it fits child item to container

[UnifyEducation]

Thank you for your help.