How to show a modal form using the DevExtreme framework

AWESOME … I'm going to give this a go…

@(Html.DevExtreme().Popup().HoverStateEnabled(false).ID("thePopUp").Shading(true).ShowCloseButton(true).ContentTemplate(@<text>
    <span id = "popupSpan">
        THIS IS THE POPUP
    </span>
 </text>)
)

Then I replaced the content of the popup with a partial (which is a dxForm for data entry).

ODD:

(1) the Form is too big for the popup but instead of adjusting to the scrren size … only first section of the form is visible.

(2) when I hit submit on the popup  which has a PARTIAL of just the form, the popup CLOSES (I didn't ask for that) … and the PARTIAL's controller action is NOT called.   Popup just closes.

(3) I thought of doing a dxScrollbar.Content(@<text> but couldn't use it because of nested @<text> not being allowed.
So, How would I put somthing with a template (or content) withing another dxObject that also has a Template/Content method

Hi Brian,

Let me answer you sequentially.
1. If you do not have enough space, I suggest that you use the scroll view component and customize a form to occupy the whole space.
2. As Alessandro mentioned, you need to handle the onHidden event in order to make a server side call to your controller. You can do it in the following way:

JavaScript
function onHiding(e) {  
    $.ajax({  
        type: "POST",  
        url: "TestForm/TestEx",  
        async: "true",  
        success: function (msg) {  
            // On success  
        },  
        Error: function (x, e) {  
            // On Error  
        }  
    });    }  

ASPx
Html.DevExtreme().Popup().ID("popup").Shading(true).OnHiding("onHiding")  

3. Am I right that you would like to add a scroll view and place the form inside? If so, you can add the ScrollView directly to a partial view. See the code below:

ASPx
Html.DevExtreme().Popup().ContentTemplate(@<text>  
    <span id="popupSpan">  
        @(Html.Partial("~/Views/TestForm/TestForm.cshtml"))  
    </span>  
</text>)  

ASPx
@(Html.DevExtreme().ScrollView().ID("scrollView").ShowScrollbar(ShowScrollbarMode.Always).Content(  
    @<text>  
        <h2>TestForm</h2>  
         @(Html.DevExtreme().Form()  
                    .ID("form")  
                    .ColCount(2)  
                    .FormData(Model)  
                    .LabelLocation(FormLabelLocation.Top)  
                    .MinColWidth(300)  
                    .ReadOnly(false)  
                    .ShowColonAfterLabel(true)  
        )  
    </text>  
))  

I hope you will find it useful.