Form in Dialog

[Marcelo Fernandes]

Hi friends,

Is possible put a form in a dilog control, send it to controller and receive a response in same dialog about the operation (save, update or delete) ?

Thank´s

Marcelo Fernandes

[Rekha J]

Hi Marcelo, 

 

Thanks for contacting Syncfusion support. 

 

To achieve your requirement, you have to use “ContentTemplate” property of Dialog to render form within the dialog. You can render the form elements with model values from controller. You can perform update or delete action by passing the updated values to controller and update the model values in there. 

 

Please refer to the below code snippet to achieve this. 

 

//HomeController.cs 

        User model = new User(); 

        public ActionResult Index() 

        {          

            model.Name = "Michael"; 

            model.Address = "Chennai"; 

            model.ContactNo = "8976564321"; 

            return View(model); 

        } 

        [HttpPost] 

        public ActionResult Index(string Name, string Address,string ContactNo) 

        { 

            model.Name = Name; 

            model.Address = Address; 

            model.ContactNo = ContactNo; 

            return View(model); 

        }    

//Index.cshtml 

@{Html.EJ().Dialog("lognForm").Title("Login Form").ShowOnInit(false).IsResponsive(true).Containment(".control").ContentTemplate(@<div> 

   @using (Html.BeginForm("Index","Home")) {  

    <div class="editor-label"> 

        @Html.LabelFor(model => model.Name) 

    </div> 

    <div class="editor-field"> 

        @Html.EditorFor(model => model.Name) 

        @Html.ValidationMessageFor(model => model.Name) 

    </div> 

       <p> 

        @Html.EJ().Button("Save").Text("Save").Type(ButtonType.Submit) 

        &nbsp; 

        @Html.EJ().Button("Cancel").Text("Cancel").Type(ButtonType.Submit) 

    </p> 

   } 

    </div>).EnableResize(false).Width(500).ClientSideEvents(evt => evt.Close("onDialogClose")).IsResponsive(true).Render();}    

 

For your reference, we have created a simple sample and the sample is available in: 

 

http://www.syncfusion.com/downloads/support/forum/129358/ze/Dialog_CRUD1852851461.zip 

 

Regards, 

 

Rekha 

[Marcelo Fernandes]

Great,

Thanks for this.

More one question,  i could use ajax to send the content of form to the controller ?

Thanks.

[Rekha J]

Hi Marcelo, 

 

Thanks for the update. 

 

To achieve your requirement, you have to pass the model values as JSON data to the AJAX success function. In AJAX success function, you need to bind the updated values to elements by using element ID. By using AJAX, you can get the updated model values in view, but the changed values will not be reflected in the view. So you need to set the updated values to corresponding elements manually on success event. 

 

Please refer to the below code snippet to achieve this. 

 

//Index.cshtml 

function onclick1(args) { 

     //getting the textbox values from the dialog 

        var name = $('#Name').val(); 

        var address = $('#Address').val(); 

        var contactno = $('#ContactNo').val();       

        var jsonObject = { 

            "Name": name, 

            "Address": address, 

            "ContactNo":contactno 

            

        }; 

        $.ajax({ 

            url: '@Url.Action("Index")', 

            type: 'POST',            

            data: JSON.stringify(jsonObject), 

            contentType: "application/json; charset=utf-8", 

            dataType: "json",                     

            success: function (result) { 

                document.getElementById("name").innerHTML = result.Name; 

                document.getElementById("address").innerHTML = result.Address; 

                document.getElementById("contactno").innerHTML = result.ContactNo;              

 

            } 

        }); 

    } 

//HomeController.cs 

        [HttpPost] 

        public JsonResult Index(User model) 

        {            

            return Json(model); 

        }       

 

Please refer to the below links for  updating model values using AJAX post: 

 

http://stackoverflow.com/questions/25665863/issue-with-updating-model-on-ajax-post 

http://stackoverflow.com/questions/7763481/updating-view-with-model-changes-via-ajax-post-mvc3 

 

For your reference, we have created a simple sample and the sample is available in: 

 

http://www.syncfusion.com/downloads/support/forum/129358/ze/Dialog_CRUD_using_Ajax1296058345.zip 

 

Regards, 

 

Rekha.