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
{
    public class userController : Controller
    {
//
        // GET: /user/
 
        public ActionResult Index()
        {
            return View();
        }
[HttpPost]   //defined Method for insert record into database table UserRecord
        public void 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 = new SqlConnection(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 = new SqlCommand(qr, cn);
            cmd.ExecuteNonQuery();
            cn.Close();//Connection Close
 
        }
    }
}

 

 Html page for import javascript and link for display user form
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <script src="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


  Modified On Nov-29-2017 11:21:55 AM

Leave Comment