1. Home
  2. Forum
  3. ASP.NET MVC
  4. Partial View Ajax form post

Partial View Ajax form post

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.

3 Replies
BM Balaji M Syncfusion Team August 27, 2018 12:16 PM UTC

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. 
 
Please also find the below Sample for your reference.  

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

Regards, 
M. Balaji 


BJ Bernard Jurlina August 29, 2018 09:52 PM UTC

Thank you M. Balaji.

I will try with your solution.

Regards,
Bernard.

PN Preethi Nesakkan Gnanadurai Syncfusion Team August 30, 2018 05:56 AM UTC

Hi Bernard, 
  
Please try and get back to us, if you need any assistance. 
  
Regards, 
Preethi 


Loader.
Up arrow icon