Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how to create a registration form in mvc using extjs
Ask Question

How to create a Registration Form in MVC using Extjs

Anonymous User 3158 17 Jun 2016
How to create a Registration Form in MVC using Extjs.
.net web development
Updated 03 Jul 2023
Anonymous User
Anonymous User

Other

I am a content writter !

Message

2 Answers

Aryan Kumar
Aryan Kumar 03 Jul 2023
Report Abuse

Sure, here are the steps on how to create a registration form in MVC using ExtJS:

  1. Create a new MVC project and add the ExtJS library to your project.
  2. Create a controller for your registration form.
  3. Create a view for your registration form.
  4. In your controller, create a model for your registration form.
  5. In your view, create a form using the ExtJS FormPanel component.
  6. Add fields to your form using the ExtJS TextField and PasswordField components.
  7. Add a button to your form to submit the form data.
  8. In your controller, handle the submit event of your form and save the form data to your database.

Here is an example of the code:

C#

public class RegistrationController : Controller
{
    public RegistrationController()
    {
    }

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

    [HttpPost]
    [Route("registration")]
    public ActionResult Index(RegistrationModel model)
    {
        if (ModelState.IsValid)
        {
            // Save the form data to the database
        }

        return View();
    }
}

public class RegistrationModel
{
    public string Username { get; set; }
    public string Password { get; set; }
}

JavaScript

Ext.define("app.view.RegistrationForm", {
    extend: "Ext.form.Panel",
    alias: "widget.registrationform",
    title: "Registration Form",
    renderTo: "registration-form",
    width: 400,
    height: 200,
    items: [
        {
            xtype: "textfield",
            fieldLabel: "Username",
            name: "username"
        },
        {
            xtype: "passwordfield",
            fieldLabel: "Password",
            name: "password"
        },
        {
            xtype: "button",
            text: "Submit",
            handler: function() {
                // Submit the form data
            }
        }
    ]
});

This code will create a registration form with two fields, a username field and a password field. The form will also have a submit button that will submit the form data to the controller.

You can then add this form to your view using the Ext.create() method. For example:

JavaScript

var registrationForm = Ext.create("app.view.RegistrationForm");

// Add the form to the view
this.getView().add(registrationForm);

Once you have added the form to your view, you can then submit the form data by clicking on the submit button. The controller will then save the form data to your database.

Ashish Awasthi
Ashish Awasthi 17 Jun 2016
Report Abuse
Ashish Awasthi






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









MindStick Training