We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is it possible to have a partial view as content of a Dialog?

Hi, 
I want to show some information that I have in a partial view but, I need to show it in a modal window. 
I was wondering if I could use Dialog modal to achieve this.

Kind regards,

Juan J.

1 Reply

PO Prince Oliver Syncfusion Team March 24, 2019 11:25 PM

Hello Juan, 

Greetings from Syncfusion support. 

Yes, you can show the partial view page content in the Dialog component. This can be achieved using the BeforeOpen event in the controls. We have got the partial view page content through AJAX request and placed it in the Dialog component using BeforeOpen event which triggers before opening the dialog. Kindly refer to the following code snippet. 

[Index.cshtml] 
@Html.EJS().Dialog("ajax").Visible(false).BeforeOpen("beforeOpen").IsModal(true).Render() @* Dialog component*@ 
 
<script> 
    function beforeOpen() { // Triggered when before open the dialog component 
        var ajax = new ej.base.Ajax('/Home/PartialView1/?Person2', 'GET', true); 
        ajax.send().then(); 
        ajax.onSuccess = function (data) { // Triggered when ajax post succeeded 
            $("#ajax_dialog-content").html(data) 
        }; 
    } 
</script> 

[PartialView1.cshtml] 
<div id="one"> 
    Parial view page content 
</div> 
@Html.EJS().ScriptManager() @* Please add this code, If you are using any syncfusion component on parital view page content.*@ 


Note: Add ScriptManager at the end of the partial view page when using any Syncfusion controls. 

We have prepared simple modal Dialog component with partial view page content. We have covered the following in the sample, 

  • Open the Dialog component when you click the ‘Open’ button.
  • Got the partial view page content through AJAX post and append into Dialog element when before open the dialog.


For further reference, kindly refer to the following 


Let us know if you need any further assistance on this. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon