Home > DeveloperSection > Forums > How to create a Registration Form in MVC using Extjs
john rob

Total Post:108

Points:756
Posted on    June-17-2016 10:37 PM

 .NET Web Development 
Ratings:


 1 Reply(s)
 213  View(s)
Rate this:
How to create a Registration Form in MVC using Extjs.


Ashish Awasthi
Ashish Awasthi

Total Post:4

Points:28
Posted on    June-17-2016 11:09 PM








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;
            }
        }
    }










Don't want to miss updates? Please click the below button!

Follow MindStick