[CLOSED] How to Render Ext.NET controls on Bootstrap modal popup using PartialViewResult

Page 3 of 4 FirstFirst 1234 LastLast
  1. #21
    Hello! We are analyzing the sample code.

    Not really sure, why the example has a 'create' link, and a 'context menu' that shows 'delete ID' on it?

    Correct me if I am wrong, but to reproduce the error, we have to double click a company on the panel, right? The context menu and 'create' action link are disposable and not necessary to reproduce the error then, or did I get it wrong?

    I see when I double click a company that an Ext.NET window and a grayed out window with "close" and "save" buttons is shown in background, this happens because you are loading from partial view some HTML code -and- Ext.NET code to draw the window contents into the Ext.NET window with ID detailWindow. That's why the window contents only (the fields) are drawn on the Ext.NET window and you get the non-ext window grayed out and somewhere else. Simply put, you are redirecting the company details to the Ext.NET window while appending HTML to make that "modal non-Ext window", so it gets what you got.
    Fabrício Murta
    Developer & Support Expert
  2. #22
    Correct me if I am wrong, but to reproduce the error, we have to double click a company on the panel, right? The context menu and 'create' action link are disposable and not necessary to reproduce the error then, or did I get it wrong?
    Yes, on Row double click you can reproduce the issue. Context Menu and Create Action link are just part of example project but are disposable.



    That's why the window contents only (the fields) are drawn on the Ext.NET window and you get the non-ext window grayed out and somewhere else
    So what is the correct approach to render the partial view in my example?
  3. #23
    Hello!

    Just a quick feedback, we have discussed the issue and be posting the running version soon, sorry for the delay! It seems it would be enough to wrap your modal window in an Ext.NET container and that would make it, but we'll see to it.
    Fabrício Murta
    Developer & Support Expert
  4. #24
    Hello,

    Yes, wrapping the entire partial view's content into an Ext.NET Container is the best solution for a Razor partial view with mixed content - common HTML stuff and Ext.NET components.

    With C# (.cshtml) the syntax looks like:
    @(Html.X().Container()
        .Height(100)
        .Content(
            @<text>
                <input type="button" value="HTML Button">
                @Html.X().Button().Text("Ext.NET Button")
            </text>
        )
    )
    I don't know what the syntax is for .vbhtml and gave up trying to find it out. Since you are more familiar with .vbhtml, I guess already know or find out quickly how to achieve the same with .vbhtml stuff.

    So, on my side for the sake of testing I replaced yours _CompanyDetail.vbhtml with an identical .cshtml wrapped everything in an Ext.NET Container.

    _CompanyDetail.cshtml
    @model ExtNETExamples.ExtNETExamples.CompanyModel
    
    @(Html.X().Container()
        .Content(
            @<text>
                @using (Html.BeginForm())
                { 
                    @Html.AntiForgeryToken()
                    <div Class="modal-dialog">
                        <div Class="modal-content">
                            <div Class="modal-header">
                                <Button type="button" Class="close" data-dismiss="modal" aria-hidden="true">&times;</Button>
                                <h4 Class="modal-title" id="myModal-label">Modal title</h4>
                            </div>
                            <div Class="modal-body">
                                <div Class="form-horizontal">
                                    <h4> CompanyModel</h4>
                                    <hr />
                                    @Html.ValidationSummary(true, "", new { Class = "text-danger" })
                                    @Html.HiddenFor(m => Model.ID)
    
                                    <div Class="form-group">
                                        @Html.X().FormPanelFor(Model)
                                    </div>
                                </div>
    
                            </div>
                            <div Class="modal-footer">
                                <Button type="button" Class="btn btn-default" data-dismiss="modal" onclick="$('#myModal2').hide();">Close</Button>
                                <Button type="button" Class="btn btn-primary">Save</Button>
                            </div>
                        </div>
                    </div>
                }
            </text>
        )
    )
    On Index.vbhtml please add width for the Window, because in the given scenario it is not going to be resized automatically to fit the content.
    @Html.X().Window().ID("detailWindow").Width(800)...
    As for the EditDetail controller action, please:
    • Replace RenderMode.InstertTo with RenderMode.AddTo since it is more suitable for the given scenario
    • Add ret.ClearContainer = True because the Window's content is not going to be cleared automatically on rendering new content for each new row.


    EditDetail Controller Action
    Function EditDetail(id As Integer, containerId As String) As ActionResult
        Dim cmModel As New CompanyModel
        cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
        If (cmModel.companyList IsNot Nothing) Then
    
            For Each item In cmModel.companyList
                cmModel.ID = item.ID
                cmModel.Name = item.Name
                cmModel.Price = item.Price
                cmModel.PctChange = item.PctChange
                cmModel.LastChange = item.LastChange
                cmModel.Change = item.Change
            Next
    
        End If
        Dim ret As New Ext.Net.MVC.PartialViewResult()
        ret.ViewName = "_CompanyDetail"
        ret.Model = cmModel
        ret.ContainerId = containerId
        ret.RenderMode = RenderMode.AddTo
        ret.ClearContainer = True
    
        Me.GetCmp(Of Window)(containerId).Show()
        Return ret
    End Function
    I've not done any other changes with your code and it started working.

    But. To me placing a Bootstrap Window into an Ext.NET Window doesn't look very good. Here is a screenshot. You might want to stick with the only Window - either Bootstrap or Ext.NET.

    Click image for larger version. 

Name:	Bootrap vs Ext.NET.png 
Views:	116 
Size:	24.8 KB 
ID:	24645
  5. #25
    Thanks Daniil,

    But this part now seems to be show stopper. I tried using the same in _CompanyDetail.vbhtml but again I am getting error.

    I don't know what the syntax is for .vbhtml and gave up trying to find it out. Since you are more familiar with .vbhtml, I guess already know or find out quickly how to achieve the same with .vbhtml stuff.

    So, on my side for the sake of testing I replaced yours _CompanyDetail.vbhtml with an identical .cshtml wrapped everything in an Ext.NET Container.
    I have put this below code now after finally founding out how to use <text> in vbhtml razor syntax



    Here's the text of _CompanyDetail.vbhtml.

    @ModelType ExtNETExamples.ExtNETExamples.CompanyModel
    
    @(Html.X().Container() _
             .Content( _
                @@<text>
                    @Using (Html.BeginForm())
                    @Html.AntiForgeryToken()
                    @<div Class="modal-dialog">
                        <div Class="modal-content">
                            <div Class="modal-header">
                                <Button type = "button" Class="close" data-dismiss="modal" aria-hidden="true">&times;</Button>
                                <h4 Class="modal-title" id="myModal-label">Modal title</h4>
                            </div>
                            <div Class="modal-body">
                                <div Class="form-horizontal">
                                    <h4> CompanyModel</h4>
                                    <hr />
                                    @Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
                                    @Html.HiddenFor(Function(model) model.ID)
                                    <div Class="form-group">
                                        @Html.X().FormPanelFor(Model)
                                    </div>
                                </div>
                            </div>
                            <div Class="modal-footer">
                                <Button type = "button" Class="btn btn-default" data-dismiss="modal" onclick="$('#myModal2').hide();">Close</Button>
                                <Button type = "button" Class="btn btn-primary">Save</Button>
                            </div>
                        </div>
                    </div>
                    End Using
        </text>
        ))
    But now error I am getting is error Can you please check what wrong I am doing here?

    Click image for larger version. 

Name:	_CompanyDetailView.jpg 
Views:	98 
Size:	65.0 KB 
ID:	24647

    Thanks,
    Puneet
    Attached Thumbnails Click image for larger version. 

Name:	_CompanyDetailView.jpg 
Views:	106 
Size:	78.0 KB 
ID:	24646  
    Last edited by puns11; Jun 16, 2016 at 9:22 PM. Reason: Edited after founding how to use <text> in vbhtml
  6. #26
    Your code triggers the error on @Html.ValidationSummary(), but not on @Html.X().FormPanelFor().

    If strip the partial view down to this, the issue is still reproducible.
    @ModelType ExtNETExamples.ExtNETExamples.CompanyModel
    
    @(Html.X().Container() _
                            .Content(
                                @@<text>
                                    @Using (Html.BeginForm())
                                        @Html.AntiForgeryToken()
                                        @<div>
                                            @Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
                                        </div>
                                    End Using
                                </text>
                            )
    )
    I could not find a way to get @Html.ValidationSummary() working, but, unfortunately, I (and nobody from us) are not a VB.NET MVC Razor syntax expert. I only used Google trying to find a solution. Now I am even not sure if it is possible in VB.NET. Maybe, you could ask some VB.NET experts on a specialized forum.
  7. #27
    Alright I made quite a progress with vb syntax.

    _CompanyDetail.vbhtml

    @ModelType ExtNETExamples.ExtNETExamples.CompanyModel
    
    @(Html.X().Container() _
             .Content(
                @@<text>
                    @Using (Html.BeginForm()) _
                        @Html.AntiForgeryToken()
                            @<div Class="modal-content">
                                <div Class="modal-body">
                                    <div Class="form-horizontal">
                                        <h4> CompanyModel</h4>
                                        <hr />
                                        #@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
                                        #@Html.HiddenFor(Function(model) model.ID)
                                        <div Class="form-group">
    
                                            #@Html.X().Menu().ID("PartialGirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
                                                                                                                                                    ls.Click.Confirmation.ConfirmRequest = True
                                                                                                                                                    ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
                                                                                                                                                    ls.Click.Url = Url.Action("RemoveCompany")
                                                                                                                                                    ls.Click.ExtraParams.Add(New Parameter("id", "#{PartialGirdContextMenu}.param1", mode:=ParameterMode.Raw))
                                                                                                                                                End Sub))
    
                                            #@(Html.X().GridPanel() _
                                                    .ID("partialGrid") _
                                                    .Store(Html.X().Store() _
                                                    .ID("StorePartial") _
                                                    .Model(Html.X().Model() _
                                                        .IDProperty("partialIDs") _
                                                        .Fields(
                                                            New ModelField("ID", ModelFieldType.Int),
                                                            New ModelField("Name"),
                                                            New ModelField("Price", ModelFieldType.Float),
                                                            New ModelField("Change", ModelFieldType.Float),
                                                            New ModelField("PctChange", ModelFieldType.Float),
                                                            New ModelField("LastChange", ModelFieldType.Date)
                                                        )
                                                    ) _
                                                    .DataSource(Model.companyList)
                                                    ) _
                                                    .ColumnModel(
                                                    Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                                                    Html.X().Column() _
                                                        .Text("Name") _
                                                        .DataIndex("Name") _
                                                        .Flex(1),
                                                    Html.X().Column() _
                                                        .Text("Price") _
                                                        .DataIndex("Price") _
                                                        .Renderer(RendererFormat.UsMoney),
                                                    Html.X().Column() _
                                                        .Text("Change") _
                                                        .DataIndex("Change"),
                                                    Html.X().Column() _
                                                        .Text("PctChange") _
                                                        .DataIndex("PctChange"),
                                                    Html.X().DateColumn() _
                                                        .Text("Last Updated") _
                                                        .DataIndex("LastChange") _
                                                        .Format("yyyy-MM-dd")
                                                    ).View(Html.X().GridView().ID("partialGridView").Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();App.PartialGirdContextMenu.showAt(e.getXY()); return false;")))
                                        </div>
                                    </div>
                                </div>
                                <div Class="modal-footer">
                                    <input type="button" Class="btn btn-primary" onclick="alert('el');" value="Save"/>
                                </div>
                            </div>
                    End Using
    </text>
        )))
    Index.vbhtml

    @ModelType ExtNETExamples.ExtNETExamples.CompanyModel
    @Code
    ViewData("Title") = "Index"
    End Code
    @(Html.X().ResourceManager())
    <h2>Index</h2>
    
    
    @(Html.X().Menu().ID("ContextMenu").Items(
                Html.X().MenuItem().Text("Delete Contact"),
                Html.X().MenuItem().Text("Avery 5164"),
                Html.X().MenuItem().Text("Copy"),
                Html.X().MenuItem().Text("Envelope")
                )
    )
    
    @Html.X().Menu().ID("GirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
                                                                                                             ls.Click.Confirmation.ConfirmRequest = True
                                                                                                             ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
                                                                                                             ls.Click.Url = Url.Action("RemoveCompany")
                                                                                                             ls.Click.ExtraParams.Add(New Parameter("id", "#{GirdContextMenu}.param1", mode:=ParameterMode.Raw))
                                                                                                         End Sub))
    
    @(Html.X().GridPanel() _
                            .Title("Editable GridPanel") _
                            .Width(600) _
                            .Height(350) _
                            .ID("indexGrid") _
                            .Store(Html.X().Store() _
                            .ID("Store23") _
                            .Model(Html.X().Model() _
                                .IDProperty("IDs") _
                                .Fields(
                                    New ModelField("ID", ModelFieldType.Int),
                                    New ModelField("Name"),
                                    New ModelField("Price", ModelFieldType.Float),
                                    New ModelField("Change", ModelFieldType.Float),
                                    New ModelField("PctChange", ModelFieldType.Float),
                                    New ModelField("LastChange", ModelFieldType.Date)
                                )
                            ) _
                            .DataSource(Model.companyList)
                            ) _
                            .ColumnModel(
                            Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                            Html.X().Column() _
                                .Text("Name") _
                                .DataIndex("Name") _
                                .Flex(1),
                            Html.X().Column() _
                                .Text("Price") _
                                .DataIndex("Price") _
                                .Renderer(RendererFormat.UsMoney),
                            Html.X().Column() _
                                .Text("Change") _
                                .DataIndex("Change"),
                            Html.X().Column() _
                                .Text("PctChange") _
                                .DataIndex("PctChange"),
                            Html.X().DateColumn() _
                                .Text("Last Updated") _
                                .DataIndex("LastChange") _
                                .Format("yyyy-MM-dd")
                            ).View(Html.X().GridView().ID("indexGridView").DirectEvents(Sub(ls)
                                                                                            ls.RowDblClick.Url = Url.Action("EditDetail")
                                                                                            ls.RowDblClick.ExtraParams.Add(New Parameter("id", "record.data.ID", mode:=ParameterMode.Raw))
                                                                                            ls.RowDblClick.ExtraParams.Add(New Parameter("containerId", "detailWindow", mode:=ParameterMode.Value))
    
                                                                                        End Sub
                ).Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();#{GirdContextMenu}.param1 = record.data.ID; #{GirdContextMenu}.showAt(e.getXY()); return false;")))
    @Html.X().Window().ID("detailWindow").Modal(True).Hidden(True).Shadow(True).Width(800).AutoUpdateLayout(True)
    Now if you run this code for the first time. Like Double click on GridPanel Row on Index page to view the Window with Partial view.
    Right click on GridPanel on Window. It runs fine now. Though I am still need to get rid of # sign, that I had to use in vbhtml to say that Statement is ended.
    but Now close the window, and again double click on row of index page. You will not the results, None of the ext.net controls got rendered this time. Now again close this window, and again do double click operation on row of index page, now nothing will be rendered. Not even html part, just white blank window.
    Quite strange right.

    Now at this point, I think something fishy is happening inside the controller. Can you please take a look at this issue, meanwhile I look at how to get rid of # signs?

    HomeController.vb
    Imports System.Web.Mvc
    Imports System.Linq
    Imports ExtNETExamples.ExtNETExamples
    Imports Ext.Net.MVC
    Imports Ext.Net
    
    Namespace Controllers
        Public Class HomeController
            Inherits Controller
    
            ' GET: Home
           Function Index() As ActionResult
                Dim companyModel As New CompanyModel
                companyModel.companyList = companyModel.GetAll()
                Return View(companyModel)
            End Function
            Function EditDetail(id As Integer, containerId As String) As ActionResult
                Dim cmModel As New CompanyModel
                cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID = id).ToList()
                If(cmModel.companyList IsNot Nothing)
                    For each item In cmModel.companyList
                        cmModel.ID = item.ID
                        cmModel.Name= item.Name
                        cmModel.Price = item.Price
                        cmModel.PctChange = item.PctChange
                        cmModel.LastChange = item.LastChange
                        cmModel.Change = item.Change
                    Next
                    
                End If 
                'Me.GetCmp(Of Container)(containerId).Show()
                Dim ret As New Ext.Net.MVC.PartialViewResult()
                ret.ViewName = "_CompanyDetail"
                ret.Model = cmModel
                ret.ContainerId = containerId
                ret.RenderMode = RenderMode.AddTo
                ret.ClearContainer = True
                Me.GetCmp(Of Window)(containerId).Show()
    
                Return ret
            End Function
    
            Function RemoveCompany(id As Integer) As ActionResult
                Dim cmModel As New CompanyModel
                cmModel.companyList = cmModel.GetAll().Where(Function(m) m.ID <> id).ToList()
                Return View("Index",cmModel)
            End Function
        End Class
    End Namespace
    Edited:
    I am not sure if this is helpful for you to debug, but I see this error in console, when Row is double clicked for second time.
    Uncaught TypeError: Cannot read property 'lockingPartnerContext' of undefined
    Click image for larger version. 

Name:	_CompanyDetailView-WIndowError.jpg 
Views:	113 
Size:	92.9 KB 
ID:	24649
    Last edited by puns11; Jun 17, 2016 at 12:09 PM. Reason: Added screenshot of error caught
  8. #28
    Yes, I have also noticed a JavaScript error and it led me to the right direction that the problem lies on client side, not in the controller.

    Please set .DestroyContent(True) for the top level Container in the partial view:
    @(Html.X().Container().DestroyContent(True)
    This setting is false by default, but in your scenario of mixing HTML and Ext.NET controls this settings needs to be set to true.
  9. #29
    Hi Daniil,

    using .DestryContent helped, but now another issue which I am not able to understand, and also not sure if this is vb.net issue or Ext.Net issue, that I am not able to pass the parameters to ContextMenu, since in Ext.NET we have to use # sign to call the ContextMenu control and then set parameter value something like this

    #{PartialGirdContextMenu}.param1= record.data.ID
    _CompanyDetail.vbhtml

    @ModelType ExtNETExamples.ExtNETExamples.CompanyModel
    
    @(Html.X().Container() _
                         .Content(
                @@<text>
                    @Using (Html.BeginForm()) _
                        @Html.AntiForgeryToken()
                            @<div Class="modal-content">
                                <div Class="modal-body">
                                    <div Class="form-horizontal">
                                        <h4> CompanyModel</h4>
                                        <hr />
                                        #@Html.ValidationSummary(True, "", New With {.Class = "text-danger"})
                                        #@Html.HiddenFor(Function(model) model.ID)
                                        <div Class="form-group">
    
                                            #@Html.X().Menu().ID("PartialGirdContextMenu").Items(Html.X().MenuItem().Text("Delete ID").DirectEvents(Sub(ls)
                                                                                                                                                        ls.Click.Confirmation.ConfirmRequest = True
                                                                                                                                                        ls.Click.Confirmation.Message = "Are you sure you want to remove the company?"
                                                                                                                                                        ls.Click.Url = Url.Action("RemoveCompany")
                                                                                                                                                        ls.Click.ExtraParams.Add(New Parameter("id", "#{PartialGirdContextMenu}.param1", mode:=ParameterMode.Raw))
                                                                                                                                                    End Sub))
    
                                            #@(Html.X().GridPanel() _
                                                        .ID("partialGrid") _
                                                        .Store(Html.X().Store() _
                                                        .ID("StorePartial") _
                                                        .Model(Html.X().Model() _
                                                            .IDProperty("partialIDs") _
                                                            .Fields(
                                                                New ModelField("ID", ModelFieldType.Int),
                                                                New ModelField("Name"),
                                                                New ModelField("Price", ModelFieldType.Float),
                                                                New ModelField("Change", ModelFieldType.Float),
                                                                New ModelField("PctChange", ModelFieldType.Float),
                                                                New ModelField("LastChange", ModelFieldType.Date)
                                                            )
                                                        ) _
                                                        .DataSource(Model.companyList)
                                                        ) _
                                                        .ColumnModel(
                                                        Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                                                        Html.X().Column() _
                                                            .Text("Name") _
                                                            .DataIndex("Name") _
                                                            .Flex(1),
                                                        Html.X().Column() _
                                                            .Text("Price") _
                                                            .DataIndex("Price") _
                                                            .Renderer(RendererFormat.UsMoney),
                                                        Html.X().Column() _
                                                            .Text("Change") _
                                                            .DataIndex("Change"),
                                                        Html.X().Column() _
                                                            .Text("PctChange") _
                                                            .DataIndex("PctChange"),
                                                        Html.X().DateColumn() _
                                                            .Text("Last Updated") _
                                                            .DataIndex("LastChange") _
                                                            .Format("yyyy-MM-dd")
                                                        ) _
                                        .View(Html.X().GridView().ID("partialGridView").Listeners(Sub(ls) ls.RowContextMenu.Handler = "e.stopEvent();#{PartialGirdContextMenu}.param1= record.data.ID;#{PartialGirdContextMenu}.showAt(e.getXY()); return false;")))
                                        </div>
                                    </div>
                                </div>
                                <div Class="modal-footer">
                                    <input type="button" Class="btn btn-primary" onclick="alert('el');" value="Save"/>
                                </div>
                            </div>                                       End Using
    </text>
                    ).DestroyContent(True)))

    Is there any other way I can pass the parameters values to context menu, where I dont have to use # sign? I tried App.PartialGirdContextMenu.param1, but it does not work.

    Its quite a bizarre situation for me where nothing seems to be working for me either some ext.net issue or vb.net. Please help.
  10. #30
    Please replace all #{PartialGirdContextMenu} occurrences with App.PartialGirdContextMenu and it will start working - just tested.

    Actually, it is best not to use #{} syntax in Razor Views at all.
Page 3 of 4 FirstFirst 1234 LastLast

Similar Threads

  1. Replies: 3
    Last Post: May 25, 2016, 4:22 PM
  2. [CLOSED] Error in Namespace when PartialViewResult render.
    By softmachine2011 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 28, 2012, 2:10 PM
  3. Replies: 1
    Last Post: Aug 10, 2012, 1:09 PM
  4. [CLOSED] Open a modal popup from a modal popup
    By Aparna_B in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 24, 2012, 8:58 AM
  5. [CLOSED] PartialViewResult Controls in MVC 2
    By tiramisu in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Apr 26, 2010, 9:05 AM

Tags for this Thread

Posting Permissions