HOW TO CREATE A REGISTRATION FORM IN MVC USING EXTJS

john rob

Total Post:108

Points:756
Posted by  john rob
 953  View(s)
Ratings:
Rate this:
How to create a Registration Form in MVC using Extjs.
  1. Ashish Awasthi

    Post:4

    Points:28
    Re: How to create a Registration Form in MVC using Extjs








    Create a Control name as Registration after create control and right click on index click addView

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;


    namespace MvcApplication1.Controllers
    {
        
        public class HomeController : Controller
        {
          

        
            public ActionResult Index()
            {
                return View();
            }
          

            }
        
         
        }


    In a view folder automatically create a registration folder inside registration folder Index.cshtml  :

    @{
        ViewBag.Title = "Index";
       
    }
    <h2> <b style="background-color:aqua; color:white; font-family:Tahoma; text-align:center; font-size:medium;"> Registration Form </b> </h2>
    <hr/>

    <!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 type="text/javascript">

           /// <reference path="../ext-6.0.2/build/ext-all.js" />
           Ext.onReady(function () {

               var simple = new Ext.FormPanel({
                   renderTo: Ext.getBody(),
                   frame: true,
                   title: 'Registration Form',
                   url: '/Home/Details',
                   width: 500,
                   autoHeight: true,
                   waitMsgTarget: true,
                   items: [{
                       labelAlign: 'left',
                       labelWidth: 200,
                       items: [
                       new Ext.form.FieldSet({
                           title: 'Registration Details',
                           autoHeight: true,
                           defaultType: 'textfield',
                           items: [{
                               fieldLabel: 'Name',
                               name: 'name',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Username',
                               name: 'username',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Password',
                               name: 'password',
                               inputType: 'password',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Company',
                               name: 'companyname',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Email',
                               name: 'email',
                               vtype: 'email',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Address',
                               name: 'address',
                               width: 290,
                               allowBlank: false
                           }, {
                               fieldLabel: 'Phone Number',
                               name: 'phonenumber',
                               width: 290,
                               inputType:'phone',
                               allowBlank: false
                           },

                           //new Ext.form.ComboBox({
                           //    fieldLabel: 'Security Qusetion',
                           //    name: 'security',
                           //    store: new Ext.data.ArrayStore({
                           //        fields: ['number', 'question'],
                           //        data: [
                           //        ['1', 'What is your name'],
                           //        ['2', 'What is your registration code'],
                           //        ['3', 'Who is your favourite actor']]
                           //    }),
                           //    valueField: 'number',
                           //    displayField: 'question',
                           //    typeAhead: true,
                           //    mode: 'local',
                           //    triggerAction: 'all',
                           //    emptyText: 'Select a question...',
                           //    selectOnFocus: true,
                           //    width: 290,
                           //    allowBlank: false
                           //}),
                           //{
                           //    fieldLabel: 'Answer',
                           //    name: 'answer',
                           //    width: 290,
                           //    inputType : 'answer',
                           //    allowBlank: false
                           //},

                           new Ext.form.DateField({
                               fieldLabel: 'Date of Birth',
                               name: 'dob',
                               width: 290,
                               allowBlank: false
                           }), {
                               fieldLabel: 'Registration Code',
                               name: 'registrationcode',
                               width: 290,
                               allowBlank: false
                           }
                           ]
                       })
                       ]
                   },
                   {
                   //    layout: 'form',
                   //    height: 65,
                   //    bodyStyle: {
                   //        margin: '0px 0px 0px 0px'
                   //    },
                   //    xtype: 'fieldset',
                   //    items: [{
                   //        xtype: 'checkbox',
                   //        boxLabel: 'I certify that I have read and agree to <a href="#">Terms of Service</a>.',
                   //        name: 'terms',
                   //        allowBlank: false
                   //    }]
                   }], buttons:
                       [{
                       text: 'Register',
                       formBind: true,
                       // Function that fires when user clicks the button 
                       handler: function ()
                       {
                           simple.getForm().submit
                               ({
                               method: 'POST',
                               waitTitle: 'Connecting',
                               waitMsg: 'Sending data...',
                               success: function ()
                               {
                                   Ext.Msg.alert('Status', 'Registration Successful!', function (btn, text)
                                   {
                                       if (btn == 'ok') {
                                           var redirect = 'Login/Index';
                                           window.location = redirect;
                                       }
                                   });
                               },


                              // login.getForm().submit
                       // ({
                   //         method: 'POST',
                   //         waitTitle: 'Connecting',
                   //         waitMsg: 'Sending data...',
                   //         success: function () {
                   //             Ext.Msg.alert('Status', 'Login Successful!', function (btn, text) {
                   //                 if (btn == 'ok') {
                   //                     var redirect = 'Home/dashboard';
                   //                     window.location = redirect;
                   //                 }
                   //             });
                   //         },

                   //         failure: function (form, action) {
                   //             Ext.Msg.alert('Status', 'Login failed!');
                   //         },

                   //     });

                   //    }


                   //},

                               failure: function (form, action) {
                                   if (action.failureType == 'server') {
                                       obj = Ext.util.JSON.decode(action.response.responseText);
                                       Ext.Msg.alert('Registration Failed!', obj.errors.reason);
                                   } else {
                                       Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText);
                                   }
                                   simple.getForm().reset();
                               }
                           });
                       }

                   }, {
                       text: 'Reset',
                       handler: function () {
                           Ext.Msg.alert('Status', 'Are you sure you want to erase the data?', function (btn, text) {
                               if (btn == 'ok') {
                                   simple.getForm().reset();
                               }
                           });
                       }
                   }]
               });




           });


    </script>
    </head>
    <body>

    </body>
    </html>

    After design the from inside the RegistrationControl  create a class name as User inside the User class create a Nine auto implement properties create a ActionResult name as Details write the code : 

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using System.Data;
    using System.Data.SqlClient;
    using System.Configuration;
    using System.Web.Security;

    namespace MvcApplication1.Controllers
    {
        
        public class HomeController : Controller
        {
            SqlCommand cmd=null;
            SqlConnection cn=null;
            string strSqlCommand = string.Empty;
          

            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }

        
          
            [HttpPost]
            public ActionResult Details( User obj)          
            {
                string connectionString = ConfigurationManager.ConnectionStrings["sconStr"].ConnectionString;
            cn = new SqlConnection(connectionString);
            string encrypt = FormsAuthentication.HashPasswordForStoringInConfigFile(obj.password,"SHA1"); // encrypted format 
            strSqlCommand = "Insert into registration(Name,username,password,company,Email,Address,phoneno,Dob,registrationcode)Values"+
                "('" + obj.Name + "', '" + obj.username + "','" + encrypt + "', '" + obj.companyname + "','" + obj.Email + "','" + obj.Address + "', " +
                "'" + obj.phonenumber + "','" + obj.Dob + "','" + obj.registrationcode + "')";
            if (cn.State != ConnectionState.Open)
                cn.Open();
            cmd = new SqlCommand(strSqlCommand, cn);       
           cmd.ExecuteNonQuery();
           return Json(new { 
               success = true, 
               Msg = "Recrod Save Successfullu!!" 
           }, 
           JsonRequestBehavior.AllowGet);
                  

            }

          

            public ActionResult Create()
            {
                return View();
            }
        }



            public class User // Class 
            {
                public string Name // Properties
                {

                    get;
                    set;
                }

                public string username
                {

                    get;
                    set;
                }

                public string password
                {

                    get;
                    set;
                }

                public string companyname
                {

                    get;
                    set;
                }
                public string Email
                {

                    get;
                    set;
                }
                  public string Address
                {

                    get;
                    set;
                }
                  public string phonenumber
                {

                    get;
                    set;
                }

                //  public string security
                //{

                //    get;
                //    set;
                //}

                //public string Answer
                //{

                //    get;
                //    set;
                //}

                public string Dob
                {

                    get;
                    set;
                }

                public string registrationcode
                {

                    get;
                    set;
                }
            }
        }









Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!