Show a partial view containing a form inside a dialog

[Fayçal HANNOUN]

Hello,

I'm trying to show a form partial within a dialog without loading the form content via ajax.

Here's the dialog call: 

@Html.EJS().Dialog("Dialog").IsModal(true).OverlayClick("dlgOverlayClick").Header("Opération effectuée").Content(Html.Partial("~/Views/Shared/TestForm.cshtml").ToString()).Target("#dlg-container").ShowCloseIcon(true).Visible(false).Width("80%").Height("80%").Buttons(btn =>

        {

            btn.Click("dlgBtnOkClick").ButtonModel(new { isPrimary = true, cssClass = "e-flat", content = "Ok" }).Add();

            btn.Click("dlgBtnCancelClick").ButtonModel(new { cssClass = "e-flat", content = "Cancel" }).Add();

        }).Render()

And here's the form Partial:

@{

    List<CrescendoPMS.Models.RoomType> roomsTypes = new List<CrescendoPMS.Models.RoomType>()

{

        new CrescendoPMS.Models.RoomType() {id = 1, name = "Single" },

        new CrescendoPMS.Models.RoomType() {id = 2, name = "Double" },

        new CrescendoPMS.Models.RoomType() {id = 3, name = "Twin" },

        new CrescendoPMS.Models.RoomType() {id = 4, name = "Triple" },

        new CrescendoPMS.Models.RoomType() {id = 5, name = "Suite" }

    };

}

<div class="control-collection">

    <div class="control_wrapper accordion-control-section">

        @Html.EJS().TextBox("invoice_number").Placeholder("Invoice number").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

        @Html.EJS().TextBox("invoice_ref").Placeholder("Invoice reference").ShowClearButton(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

        @Html.EJS().DatePicker("invoice_date").Format("dd/MM/yyyy").Placeholder("Invoice date").Render()

        @Html.EJS().NumericTextBox("gross_te").Format("c").ShowSpinButton(false).Placeholder("Net amount tax exluded").Render()

        @Html.EJS().ComboBox("room_type").Placeholder("Room type").AllowFiltering(false).DataSource(roomsTypes).Fields(new Syncfusion.EJ2.DropDowns.ComboBoxFieldSettings { Text = "name", Value = "id" }).Render()

        @Html.EJS().CheckBox("recurrent").Label("Recurrent").Render()

    </div>

</div>

@Html.EJS().ScriptManager()

This is not working, and i'm having a syntax error saying that there's an incorrect token somewhere...

Thank you for your help

[Fayçal HANNOUN]

I finaly figured it out !

Here how i could do it:

@Html.EJS().Dialog("Dialog").IsModal(true).OverlayClick("dlgOverlayClick").Header("Opération effectuée").ContentTemplate(@<div>@Html.Partial("~/Views/Shared/TestForm.cshtml")</div>).Target("#dlg-container").ShowCloseIcon(true).Visible(false).Width("80%").Height("80%").Buttons(btn =>

   {

       btn.Click("dlgBtnOkClick").ButtonModel(new { isPrimary = true, cssClass = "e-flat", content = "Ok" }).Add();

       btn.Click("dlgBtnCancelClick").ButtonModel(new { cssClass = "e-flat", content = "Cancel" }).Add();

   }).Render()

All i had to do was wrap the @Html.Partial("...") in a @<div></div> in the ContentTemplate method !

Please tell me if this is good to go with or there is a recomended way to do it so i can mark the issue as resolved.

Thank you.

[Narayanasamy Panneer Selvam]

Hi Fayçal, 

 

Good day to you. 

 

Your last shared solution is the recommended way, you can proceed further. Please let us know if you need any further assistance on this. 

 

Regards, 

Narayanasamy P. 

[Fayçal HANNOUN]

Thank you very much.

[Narayanasamy Panneer Selvam]

Hi Fayçal, 

 

You are welcome. Please feel free to contact us, if you need further help while integrating syncfusion controls into your application. 

 

Regards, 

Narayanasamy P.