Do I have to use ViewBag for the buttonModel of Dialog buttons?

[Harvey Kravis]

I have a dialog with OK and Cancel buttons.  I define them as follows:

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>

My controller has this code which works fine:

            ViewBag.DialogButtons1 = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" };

            ViewBag.DialogButtons2 = new ButtonModel() { content = "Cancel", cssClass = "e-flat" };

My question is: Does this code need to be in the Controller?  Can I hard code it in the view and eliminate the use of ViewBag here?  I bet there is a way but I can't figure out the syntax.

Thanks!

[Revanth Krishnan]

Hi Harvey, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Do I have to use ViewBag for the buttonModel of the Dialog buttons. Does the viewBag code need to be in the controller?”. 

 

To avoid using the ‘ViewBag‘ for ‘ButtonModel’ of the Dialog buttons, first, the ‘ButtonModel’ needs to be defined in the Models folder. The ButtonModel content can be defined in the view part itself by assigning it to a variable. 

 

Code Snippet: 

 

Models/ButtonModel.cs 

namespace Dialog_Core_App.Models 

{ 

    public class ButtonModel 

    { 

        public string content { get; set; } 

        public bool isPrimary { get; set; } 

        public string cssClass { get; set; } 

    } 

} 

 

@{ 

    ViewData["Title"] = "Home Page"; 

    var okButton = new ButtonModel() { isPrimary = true, cssClass = "e-flat", content = "OK" }; 

    var cancelButton = new ButtonModel() { content = "Cancel", cssClass = "e-flat" }; 

} 

 

<div id='container' style="height:400px;"> 

    <ejs-button id="targetButton" content="Open Dialog"></ejs-button> 

    <ejs-dialog id="dialog" header="Dialog" content="This is a Dialog with button and primary button" target="#container" width="250px"> 

        <e-dialog-buttons> 

            <e-dialog-dialogbutton buttonModel="@okButton" click="dlgButtonClick"> 

            </e-dialog-dialogbutton> 

            <e-dialog-dialogbutton buttonModel="@cancelButton" click="dlgButtonClick"></e-dialog-dialogbutton> 

        </e-dialog-buttons> 

    </ejs-dialog> 

</div> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164137/ze/Dialog_Core_App-738336447 

 

Please check the above code snippet and the sample and let us know if it comes close to your requirement. 

 

Regards, 

Revanth 

[Harvey Kravis]

Thanks for this response.  I see how it can be done now without ViewBag.  That said, the main difference between the two solutions is that instead of a ViewBag variable you've defined a local variable (of the model's ButtonModel class) in the view.  The difference is so minimal that I might as well leave my code the way it is.  My goal was to reuse code and neither approach does that.  I was hoping to define the two buttons once and refer to them.  To take it a step further it would be great if I could reuse this entire block of code which is in about 80 views:

    <ejs-dialog id='dialog' header="Enter file name (without extension)" allowDragging="true" showCloseIcon="true" isModal="true" visible="false" width="430px" target="#Grid">

        <e-content-template>

            <div class='dialogContent'><input class="dialogText" /></div>

        </e-content-template>

        <e-dialog-buttons>

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>

        </e-dialog-buttons>

    </ejs-dialog>

Above code is invoked from toolbarClick of a grid.  I'm not expecting you to take this any further, but if you have a suggestion on how to reuse this code I'm listening. :)

[Revanth Krishnan]

Hi Harvey, 

 

 

Good day to you. 

 

 

We have validated your query, and the dialog can be used as a reusable dialog by rendering it as a partial view. We have prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164137/ze/Dialog_Partial_View-1630009273 

 

Documentation: https://www.syncfusion.com/kb/9630/how-to-render-syncfusion-components-in-partial-view 

 

Please check the above sample and the documentation and let us know if it satisfies your requirement. 

 

Regard, 

Revanth 

[Harvey Kravis]

Thank you for this.  I learned something that may come in handy for the future.  I am not going to implement it because it adds a level of complexity that seems unnecessary for the benefit.  You've essentially substituted one block of repeated code with another of nearly similar size, and introduced a new controller and partial view.  The reason I feel comfortable with this decision is that the code for my 80 views is generated based on metadata.  So I don't have to maintain them individually.

The Syncfusion team never ceases to amaze me with your willingness to go the extra mile and come up with creative solutions.  Thanks!

[Revanth Krishnan]

Hi Harvey, 

 

Thanks for your update . 

 

Please let us know if you need any further assistance. 

 

Regards, 

Revanth