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 2721 17-Jun-2016
How to create a Registration Form in MVC using Extjs.
.net web development 
Updated on 03-Jul-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

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
answer 518501706110907






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









Liked By