articles

Home / DeveloperSection / Articles / Use of database in Sencha ExtJs and insert record from user form using ajax

Use of database in Sencha ExtJs and insert record from user form using ajax

Hemant Patel9954 12-Jan-2017

In this article we can defined how to connect database and insert record from user interface(User Form)

1.    Source code of User form design with several textfield as your requirement.

2.    In view we can also defined listener in button for send control to MVC controller.

3.    In button we can create of object of ajax class.


 Use of database in Sencha ExtJs and insert record from user form using ajax

View in extjs
Ext.onReady(function () {
    Ext.create('Ext.form.Panel', {//use class for form panel
        width: 500,
        height: 300,
        padding: 10,
        id: 'UsrFrm',
        layout: {   //define layout types
            type: 'vbox',
            pack: 'center',
            align: 'center'
        },
        title: "User Form",
        layout: 'form',
        renderTo: document.body,//associate with body tag
        bodyPadding: 5,
        items: [{
            xtype: 'textfield',
            name: 'uName',
            fieldLabel: 'Name',
            allowBlank: false
        }, {
            xtype: 'textfield',
            name: 'fName',
            fieldLabel: 'Father Name'
        }, {
            xtype: 'datefield',
            name: 'dob',
            fieldLabel: 'D O B'
        }, {
            xtype: 'textareafield',
            name: 'addrss',
            fieldLabel: 'Address',
            maxValue: 250
        }, {
            xtype: 'numberfield',
            name: 'cntct',
            fieldLabel: 'Contact No.',
            maxValue: 9999999999,
        }, {
            xtype: 'button',
            text: 'SUBMIT',
            width: '100%',
            id: 'sbmtBtn',
            listeners: {            //Implement listener
                click: function () {
                    var form = Ext.getCmp('UsrFrm');
                    var values = form.getValues();//get values from form id
                    console.log(values);
 
                    Ext.Ajax.request({
                        url: './user/submit',//Defined path of function defined in MVC
                        method: 'POST',        controller
                        params: {
                            uName:values.uName,//Bind values with database table field
                            fName:values.fName,
                            uDob: values.dob,
                            uAddrss:values.addrss,
                            contact:values.cntct
                        },
                                                success: function () {
                            alert('success');
                        },
                        failure: function () {
                            alert('fail');
                        }
 
                    });
                }
            }
        }],
    });
});

 

MVC controller code for connecting database and insert record from user form.

In MVC controller we can use namespace of sqlClient that’s use in database connectivity

for sql server database.

After that we defined method for insert record into database.

using System.Web;
using System.Web.Mvc;
using System.Data.SqlClient;//Use nameSpace of sql server database connection   
 
namespace ExtJsField.Controllers
{
    publicclassuserController : Controller
    {
//
        // GET: /user/
 
        publicActionResult Index()
        {
            return View();
        }
[HttpPost]   //defined Method for insert record into database table UserRecord
        publicvoid submit(string uName, string fName, string uDob, string uAddrss, int contact)
        {
            String cs = "Password=mindstick@123;Persist Security Info=True;User ID=sa;Initial Catalog=Harsh;Data Source=MSCLIENT-001\\MSSQLSERVER2014";// Connection String
            SqlConnection cn = newSqlConnection(cs);
            cn.Open();//Open Connection
            String qr = "Insert into UserRecord(Name,Father_Name,Dob,Address,Contact) values ('" + uName + "','" + fName + "','" + uDob + "','" + uAddrss + "','" + contact + "')";//Query for insert record
            SqlCommand cmd = newSqlCommand(qr, cn);
            cmd.ExecuteNonQuery();
            cn.Close();//Connection Close
 
        }
    }
}

 

 Html page for import javascript and link for display user form
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
     <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <scriptsrc="app/View/UserForm.js"></script>  //Import UserForm view script
 
</head>
<body>
 
</body>
</html>
Database table that’s use for store user records

Create database and insert a table UserRecord for store user details.

Use of database in Sencha ExtJs and insert record from user form using ajax



Updated 07-Sep-2019
Exploring the online world is my passion. have experience of #content writing #SEO #Digital Marketing #On-Page #Lead Generation #Content Analyst #Marketing Analyst... I could never stop at one point, continuously wanted to acquire more and more skills. My work for any organization will be full of passion and hard work.

Leave Comment

Comments

Liked By