1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. How to save form data on button click

How to save form data on button click

Hi,

I have a form with various controls, which captures input from user. How do I capture and store all values to DB? I am using EF / Model. Here is  a sample code snippet.


  <form>

                        <div class="row material2">

                            <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 e-rtl">

                                 <b>Name</b>

                            </div>

                            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                                <ejs-textbox id="txtBuyerName" cssClass="e-outline required" floatLabelType="Auto"></ejs-textbox>

                            </div>

                        </div>

                          <div class="row material2">

                            <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 e-rtl">

                                 <b>: Address 1</b>

                            </div>

                            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                                <ejs-textbox id="txtAddress1" cssClass="e-outline" floatLabelType="Auto"></ejs-textbox>

                            </div>

<div class="row material2">

                              <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2"></div>

                            <div class="col-xs-2 col-sm-2 col-lg-2 col-md-2 ">

                                <ejs-button id="btnSave" onclick="SaveData" content="Save Data" isPrimary="true"></ejs-button>

                            </div>


                        </div>

                        </form>


13 Replies
AS Aravinthan Seetharaman Syncfusion Team September 13, 2021 02:36 PM UTC

Hi Sunil, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We can access the Textbox control values by binding the EF model binding to ejs-for.  Kindly refer to the following code snippet and sample. 
Index.cshtml 
 
<form method="post"> 
                    <ejs-textbox id="textboxfor" name="firstname" placeholder="First Name" floatLabelType="Auto" ejs-for="@Model.firstname"></ejs-textbox> 
                    <div id="errorMessage"> 
                        <span asp-validation-for="firstname"></span> 
                    </div> 
                    <div id="submitbutton"> 
                        <ejs-button id="submitButton" content="Post"></ejs-button> 
                    </div> 
                </form> 
 
 
HomeController.cs 
 
   public class TextBoxValue 
        { 
            [Required(ErrorMessage = "Value is required")] 
            public string firstname { get; set; } 
        } 
        TextBoxValue textbox = new TextBoxValue(); 
        public IActionResult Index() 
        { 
            textbox.firstname = "John"; 
            return View(textbox); 
        } 
        [HttpPost] 
 
        public IActionResult Index(TextBoxValue model) 
        { 
            textbox.firstname = model.firstname; 
            return View(textbox); 
        } 
 
 
 
For more details, please refer the below Online Demo link. 
 
 
Please let us know if you have any concern on this. 
 
Regards, 
Aravinthan S

SU Sunil September 16, 2021 02:30 AM UTC

Thank you Aravinthan! That works with a Controller, i am injecting a service and still having some issues binding the variables for that communication. I will let you know how it goes!


Thanks,

Sunil


AS Aravinthan Seetharaman Syncfusion Team September 16, 2021 05:41 AM UTC

Hi Sunil, 
 
Thanks for the update. 
 
We will wait to hear from you. 
 
Regards, 
Aravinthan S 


SU Sunil September 18, 2021 04:42 PM UTC

Hello, I was able to get through it successfully! One other question. 


I have 2 controls - one Dropdown and one textbox. i want to show/hide one of those based on a checkbox selection. HOw can i do that?


Thank you for your help in advance!

-Sunil


AS Aravinthan Seetharaman Syncfusion Team September 20, 2021 11:41 AM UTC

 
Thanks for the update. 
 
We have checked your requirement. We can able to achieve your requirement using checkbox’s change event. Please refer the below code snippet and sample. 
 
 
<ejs-checkbox id="ddb" label="Hide DropDownButton" change="ddbChange"></ejs-checkbox> 
<ejs-checkbox id="textbox" label="Hide TextBox" change="textChange"></ejs-checkbox> 
<div class="control-section"> 
    <div class="control_wrapper accordion-control-section"> 
        <ejs-textbox id="firstname" placeholder="First Name" width="100px"></ejs-textbox> 
    </div> 
    <br /> 
    <div class="control_wrapper accordion-control-section"> 
        <ejs-dropdownbutton id="element" content="Edit" items="ViewBag.items"></ejs-dropdownbutton> 
    </div> 
</div> 
<script> 
    function ddbChange(args) { 
        var dropdownObj = document.getElementById("element").ej2_instances[0]; 
        if (args.checked) { 
            dropdownObj.cssClass = "e-hide"; 
        } else { 
            dropdownObj.cssClass = ""; 
        } 
    } 
    function textChange(args) { 
        var textEle = document.getElementById("firstname"); 
        if (args.checked) { 
            textEle.parentElement.style.display = 'none'; 
        } else { 
            textEle.parentElement.style.display = 'block'; 
        } 
    } 
</script> 
<style> 
.e-hide{ 
    display:none; 
} 
</style> 
 
 
 
Could you please check the above details, and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S



SU Sunil September 23, 2021 03:12 AM UTC

Thank you Aravinth! It worked like a charm!

I tried to use this pattern for another requirement, but seems to run into another issue. I have one dropdown (country), and based on a certain value selected (say USA), I need to hide/show another two controls.


Here is the code snippet I have.


<div >

                                <ejs-dropdownlist id="ddlCountry" cssClass="e-outline e-small" floatLabelType="Auto"

                                                change="countryChange" datasource="@Model.countries" ejs-for="buyer.Country" allowFiltering="true" filterType="Contains" filterBarPlaceholder="Search Country...">

                                    <e-dropdownlist-fields text="DisplayText" value="Value"></e-dropdownlist-fields>

                                </ejs-dropdownlist>

                            </div>

<div>

                                 <b>: State</b>

                            </div>

                            <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4">

                             <ejs-textbox id="txtState" cssClass="e-outline e-small" floatLabelType="Auto"></ejs-textbox>

                            <ejs-dropdownlist id="ddlState" cssClass="e-outline e-small" floatLabelType="Auto" dataSource="@Model.usaStates" ejs-for="buyer.State" >

                                <e-dropdownlist-fields text="DisplayText" value="Id"></e-dropdownlist-fields>

                            </ejs-dropdownlist>

                            </div>


I need to hide the textbox or state dropdown when a certain value is selected.


function countryChange(args) {

    // disable the state DropDownList & show state Text box when country is USA

                 var txtState = document.getElementById('txtState');

                 var ddlState = document.getElementById('ddlState').ej2_instances[0];

                 var ddlCountry = document.getElementById('ddlCountry').ej2_instances[0];


                 var country = ddlCountry.value; 

                if(country == "USA")

                {

                 ddlState.cssClass = "e-hide";

                 txtState.cssClass = "";

                 }


<style>

.e-hide{

    display:none;

}

</style>


PO Prince Oliver Syncfusion Team September 23, 2021 09:46 AM UTC

Hi Sunil, 

Thank you for your update. 

You can show and hide other elements based on the selected value by setting the display style to none in the change event. Kindly refer to the following code. 

    <div class="hide"> 
        <ejs-textbox id="txtState" cssClass="e-outline e-small" floatLabelType="Auto"></ejs-textbox> 
    </div> 
    <div class="hide"> 
        <ejs-dropdownlist id="ddlState" cssClass="e-outline e-small" floatLabelType="Auto" dataSource="@Model.usaStates" ejs-for="buyer.State" > 
 
        <e-dropdownlist-fields text="DisplayText" value="Id"></e-dropdownlist-fields> 
 
        </ejs-dropdownlist> 
    </div> 
 
 
<script> 
    function countryChange(args) { 
 
. . . . . . . . . .  
        if(country == "USA") 
        { 
            ddlState.element.closest(".hide").style.display = "none"; 
            txtState.element.closest(".hide").style.display = ""; 
        } 
        else {                      
            ddlState.element.closest(".hide").style.display = ""; 
            txtState.element.closest(".hide").style.display = "none"; 
        } 
    } 
</script> 



Please let us know if you need any further assistance. 

Regards, 
Prince 


SU Sunil December 10, 2021 03:52 AM UTC

thank you for your help, Prince!


BC Berly Christopher Syncfusion Team December 10, 2021 06:43 AM UTC

Hi Sunil, 
  
We are glad to know that the issue is resolved in your end. Please let us know if you need further assistance on this. 
  
Regards, 
Berly B.C 


CH Charles September 12, 2022 10:31 PM UTC

Hi,

How can l accomplish saving form data input into database with angular?



UD UdhayaKumar Duraisamy Syncfusion Team September 13, 2022 11:55 AM UTC

Hi Charles,


We suggest you refer the below public blogs for the requested requirement,


  1. https://stackoverflow.com/questions/50715327/angular-2-add-dynamic-field-in-form-and-save-data-to-database
  2. https://therichpost.com/save-angular-6-form-data-in-mysql-database/
  3. https://stackoverflow.com/questions/63617688/form-submit-in-angular-and-storing-data-to-mysql-db-by-post


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Udhaya Kumar D



CH Charles September 14, 2022 11:42 AM UTC

Hi Udhaya,


I already know how to save angular form inputs data into sql server database using angular service. I was only trying to explore more possible options.


Regards 

Charles


UD UdhayaKumar Duraisamy Syncfusion Team September 15, 2022 12:05 PM UTC

Hi Charles,


We are curious to know, what complexity are you facing on your end. So, please share the below details to validate the requirement further and provide you with a prompt solution.


  1. Simple Sample which explains your use case scenario.
  2. Exact requirement details.


Regards,

Udhaya Kumar D



Loader.
Up arrow icon