Partial View Ajax form post

[Bernard Jurlina]

Is there some example of something like this:

I have one edit view from which I want to open dialog and load partial view inside. Then I want to post that ajax form in dialog and catch any exceptions when posting and showing them like alert. 

After successfully post I want to close that dialog and call some javascript function in edit view.

Basically,

my edit view is something like this:

and I want to open dialog when click on blue square, create new Kontakt osoba with partial view, catch exception when creating new Kontakt osoba,

close that opened dialog, and refresh data for combobox Kontakt osoba.

Thanks!

Bernard.

[Balaji M]

Hi Bernard, 

 

Thanks for using Syncfusion products. 

 

We have created dialog sample as per your requirement.  If you click the button, it will send an ajax post into a partial view page using contentUrl property.  We have dynamically loaded dialog content using contentUrl ajax post.  If you click dialog content button, it will close the dialog using close public method and triggered parent view page javascript function.  An alert box will show when a partial page loaded state and Ajax post succeeded state using AjaxSuccess client side event in the dialog.  Please find the below code.       

 

parentView.html 

 

@Html.EJ().Button("stop").ClientSideEvents(e => e.Click("click")) 

 

@{ 

    Html.EJ() 

        .Dialog("dialog") 

        .Title("Dialog") 

        .ShowOnInit(false)  // Set showOnInit property as false 

        .ClientSideEvents(evt => evt.AjaxSuccess("onSuccess").AjaxError("onError")) 

        .Render(); 

} 

 

<script> 

    function parentCall() { 

        alert('Parent view page is called'); 

    } 

    function onSuccess(args) { 

        var obj = $("#basicDialog").data("ejDialog"); 

        alert("Dialog ajax post succeeded"); 

    } 

    function onError(args) { 

        alert("Dialog ajax post failure"); 

    } 

    function click(args) {  // Triggered when you click the button 

        var obj = $("#dialog").data("ejDialog"); 

        obj.option("contentUrl", "Productpartial"); // Pass contentUrl into partialview page 

        obj.option("contentType", "ajax"); // Specify contentType 

        obj.open(); 

    } 

</script> 

 

ChildView.cshtml 

 

@Html.EJ().Button("but").Text("Button").ClientSideEvents(e => e.Click("butClick")) 

 

<script> 

    alert("Partial view page content"); 

    function butClick(args) {         // Triggered when you click the dialog content button 

        $("#dialog").ejDialog("close");   

        parentCall();   // Called parentView page javascript function 

    } 

</script> 

 

 

    @Html.EJ().ScriptManager()@*for non-unobtrusive mode, it must be given in partial view*@ 

 

Please find the below video for your reference. 

Video: http://www.syncfusion.com/downloads/support/forum/139473/ze/dialog_ajax1749941104  

 

Please also find the below Sample for your reference.  

Sample: http://www.syncfusion.com/downloads/support/forum/139473/ze/MvcApplication66-1879014300  

API link: https://help.syncfusion.com/api/js/ejdialog#events:ajaxsuccess  

https://help.syncfusion.com/api/js/ejdialog#members:contenturl  

 

If the above does not meet your requirement, kindly share us the more details. We will be happy to help you. 

Regards, 

M. Balaji 

[Bernard Jurlina]

Thank you M. Balaji.

I will try with your solution.

Regards,

Bernard.

[Preethi Nesakkan Gnanadurai]

Hi Bernard, 

  

Please try and get back to us, if you need any assistance. 

  

Regards, 

Preethi