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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Form in Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

129358 Mar 14,2017 12:42 PM UTC Mar 16,2017 09:43 AM UTC ASP.NET MVC 3
loading
Tags: Dialog
Marcelo Fernandes
Asked On March 14, 2017 12:42 PM UTC

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 [Syncfusion]
Replied On March 15, 2017 12:22 PM UTC

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: 
 
 
Regards, 
 
Rekha 


Marcelo Fernandes
Replied On March 16, 2017 02:52 AM UTC

Great,

Thanks for this.

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

Thanks.

Rekha J [Syncfusion]
Replied On March 16, 2017 09:43 AM UTC

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: 
 
 
For your reference, we have created a simple sample and the sample is available in: 
 
 
Regards, 
 
Rekha. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;