MiTechDev.com

Mitechdev.com is a programming blog which focused on Web Programming and development

Thursday, 5 October 2017

How to make jqgrid responsive for all browsers

11:22:00 Posted by raviteja swayampu , No comments
In this tutorial we gonna learn how grid will be resized on resizing the window of the web browser.Setting of CSS width to 100% is the only one implementation, but it's not good in case of jqGrid which set width in px explicitly on many its internal structures.

jqGrid uses fixed width value on many internal structures (divs, tables and so on). So one can't just set CSS width : 100%. Nevertheless there are another way to do the same. One can register resize event handler on window object and to call setGridWidth explicitly. The method adjust all internals structures of jqGrid to new width. So it would be clean method.


If you use autowidth: true then jqGrid set the width of jqGrid to the width of it's parent only once.So,we have to changes the width of grid every time we resizes the browser window. Inside of $(window).resize handler we can get new (the current) width of the parent and reset the value of grid width. The corresponding code will be the following

$(window).on("resize", function () {
    var $grid = $("#tableelement"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
});

The event handler changes the width of the grid based on the browser window resizes.Here,I used $("#tableelement").closest(".ui-jqgrid") instead of $("#tableelement") because jqGrid build some dives over the main <table> element. $("#tableelement").closest(".ui-jqgrid") gives as the outer div which include all the elements of the grid see below picture.

How to make jqgrid responsive for all browsers



The script code for responsive jqgrid is as follows.

$(function () {
    debugger;
    $("#grid").jqGrid({
        url: "/Jqgrid/GetValues",
        datatype: 'json',
        mtype: 'Get',
        //table header name 
        colNames: ['Id', 'Name', 'Phone', 'Address', 'DOB'],
       //colModel takes the data from controller and binds to grid 
        colModel: [
            { key: true, hidden: true, name: 'Id', index: 'Id', editable: true },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'Phone', index: 'Phone', editable: true },
            { key: false, name: 'Address', index: 'Address', editable: true },
            { key: false, name: 'DOB', index: 'DOB', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }],
            
        pager: jQuery('#pager'),
        rowNum: 10,
        rowList: [10, 20, 30, 40],
        height: '100%',
        viewrecords: true,
        caption: 'Jq grid sample Application',
        emptyrecords: 'No records to display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false
        //pager-you have to choose here what icons should appear at the bottom
        //like edit,create,delete icons
    }).navGrid('#pager', { edit: true, add: true, del: true, search: false, refresh: true }
    });
});
//event handler to resize the width of grid
$(window).on("resize", function () {
    var $grid = $("#grid"),
        newWidth = $grid.closest(".ui-jqgrid").parent().width();
    $grid.jqGrid("setGridWidth", newWidth, true);
});


See the responsive grid for demo at jsfiddle responsive jqgrid.
Related articles on jqgrid as follows,

I hope this article may help you.For more related article follow mitechdev.com.

CRUD operations using angular js and asp.net mvc

02:19:00 Posted by raviteja swayampu , No comments
Hi everyone again in this tutorial i am going to explain CRUD(Create,Read,Update,Delete) operations using Angular js and asp.net mvc.In previous article crud operations using angular js and web api we performed create,read,update and delete operations using web api and angular js. In current article we will do the same with asp.net mvc. Please click on below link to for related articles on angular js Learning angular js with asp.net mvc.


Here in this tutorial the code is almost similar to previous article crud operations using angular js and web api. But,in current article instead of using web api calls we are using mvc controller.Remaining client and server communication is similar for both web api and mvc.
Related posts on crud operations are as follows,

CRUD operations using angular js and asp.net mvc

1.Create a asp.net mvc web application in visual studio 2015.
2.Add sql express data base to project in App_Data folder and create a table with below sql script.

CREATE TABLE [dbo].[Employee] (
    [EmpNo]       INT           IDENTITY (1, 1) NOT NULL,
    [EmpName]     NVARCHAR (50) NOT NULL,
    [Salary]      INT           NOT NULL,
    [DeptName]    NVARCHAR (50) NOT NULL,
    [Designation] NVARCHAR (50) NOT NULL,
    PRIMARY KEY CLUSTERED ([EmpNo] ASC)
);

3.Add ADO.NET Entity DataModel to models folder.
4.Add Controller to Controllers folder and name it as HomeController.
5.Replace controller code with below code.

using System.Data;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using WebAPICRUDwithBootstrap.Models;

namespace WebAPICRUDwithBootstrap.Controllers
{
    public class HomeController : Controller
    {
        private DatabaseEntities1 db = new DatabaseEntities1();
        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetEmployees()
        {
            return Json(db.Employees.ToList(), JsonRequestBehavior.AllowGet);
        }
        // GET: Employees/Details/5
        public ActionResult Details(int? id)
        {
            if (id == null)
            {
                return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
            }
            Employee employee = db.Employees.Find(id);
            if (employee == null)
            {
                return HttpNotFound();
            }
            return Json(employee,JsonRequestBehavior.AllowGet);
        }

        // POST: Employees/Create
        [HttpPost]
        public ActionResult Create(Employee employee)
        {
            if (ModelState.IsValid)
            {
                db.Employees.Add(employee);
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(employee);
        }

        // POST: Employees/Edit/5
        public ActionResult Edit(Employee Employee)
        {
            if (ModelState.IsValid)
            {
                db.Entry(Employee).State = EntityState.Modified;
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(Employee);
        }

        // POST: Employees/Delete/5
        public ActionResult Delete(int id)
        {
            Employee employee = db.Employees.Find(id);
            db.Employees.Remove(employee);
            db.SaveChanges();
            return Json(employee,JsonRequestBehavior.AllowGet);
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                db.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}



6.Now add three script files Controller.js,module.js and Service.js files in scripts folder.
Module.js: Creates an angular module(a module contains controller to perform some actions).

//It acts as a auto bootstraper for angular application.
//We bind this module to view using ng-app directive.
var myapp;
(function () {
    myapp = angular.module('myangularapp', []);
})();

7.Controller.js: It is responsible for all logical operations in angular for example two way data binding.

//Angular controller 
myapp.controller('crudcontroller', function ($scope, crudservice) {
    
    //Loads all Employee records when page loads
    loadEmployees();
    function loadEmployees() {
        var EmployeeRecords = crudservice.getAllEmployees();
        EmployeeRecords.then(function (d) {     //success
            $scope.Employees = d.data;
        },
        function(){
            swal("Oops..","Error occured while loading","error"); //fail
        });
    }

    //save form data
    $scope.save = function () {
        var Employee = {
            EmpNo:$scope.EmpNo,
            EmpName: $scope.EmpName,
            Salary: $scope.Salary,
            DeptName: $scope.DeptName,
            Designation: $scope.Designation
        };
        var saverecords = crudservice.save(Employee);
        saverecords.then(function (d) {
            $scope.EmpNo = d.data.EmpNo;
            loadEmployees();
            swal("Reord inserted successfully");
        },
        function(){
            swal("Oops..","Error occured while saving",'error');
        });
    }

    //get single record by ID

    $scope.get = function (Employee) {
        var singlerecord = crudservice.get(Employee.EmpNo);
        singlerecord.then(function (d) {
            var record = d.data;
            $scope.UpdateEmpNo = record.EmpNo;
            $scope.UpdateEmpName = record.EmpName;
            $scope.UpdateSalary = record.Salary;
            $scope.UpdateDeptName = record.DeptName;
            $scope.UpdateDesignation = record.Designation;
        },
        function(){
            swal("Oops...","Error occured while getting record","error");
        });
    }

    //update Employee data
    $scope.update = function () {
        var Employee = {
            EmpNo: $scope.UpdateEmpNo,
            EmpName: $scope.UpdateEmpName,
            Salary: $scope.UpdateSalary,
            DeptName: $scope.UpdateDeptName,
            Designation:$scope.UpdateDesignation
        };
        var updaterecords = crudservice.update($scope.UpdateEmpNo, Employee);
        updaterecords.then(function (d) {
            loadEmployees();
            swal("Record updated successfully");
        },
        function () {
            swal("Opps...","Error occured while updating","error");
        });
    }

    //delete Employee record
    $scope.delete = function (UpdateEmpNo) {
        var deleterecord = crudservice.delete($scope.UpdateEmpNo);
        deleterecord.then(function (d) {
            var Employee = {
                EmpNo: '',
                EmpName: '',
                Salary: '',
                DeptName: '',
                Designation: ''
            };
            loadEmployees();
            swal("Record deleted succussfully");
        });
    }
});



8.Service.js: It is responsible for communication between controller and server(uses $http service).

//Service to get data from service..
myapp.service('crudservice', function ($http) {
    
    this.getAllEmployees = function () {
        return $http.get("http://localhost:56193/Home/GetEmployees");
    }

    //save
    this.save = function (Employee) {
        var request = $http({
            method: 'post',
            url: 'http://localhost:56193/Home/Create',
            data:Employee
        });
        return request;
    }

    //get single record by Id
    this.get = function (EmpNo) {
        return $http({
            method: 'get',
            url: 'http://localhost:56193/Home/Details?id=' + EmpNo,
            data: JSON.stringify(EmpNo)
        });
    };

    //update Employee records
    this.update = function (UpdateEmpNo, Employee) {
        var updaterequest = $http({
            method: 'post',
            url: "http://localhost:56193/Home/Edit",
            data:Employee
        });
        return updaterequest;
    }

    //delete record
    this.delete = function (UpdateEmpNo) {
        var deleterecord= $http({
            method: 'delete',
            url: "http://localhost:56193/Home/Delete?id=" + UpdateEmpNo
        });
        return deleterecord;
    }
});

9.The final output of the application is look like below.

CRUD operations using angular js and asp.net mvc



10.I hope this article may help you.Download source code for this application from here Download.

Wednesday, 4 October 2017

How to connect mysql database using C#

02:45:00 Posted by raviteja swayampu , No comments
This article shows you how to connect mysql database to asp.net mvc web application using MySql Connector/.Net.In order to connect with mysql database using C# application Mysql provides a series of predefined classes in mysql connector/.Net to perform various operations on mysql database.All the communication between a C# application and the MySQL server is routed through a MySqlConnection Object. So, before your application can communicate with the server, it must instantiate, configure, and open a MySqlConnection object.

Download mysql connector for dot net from mysql official site with free of cost.Click below link to download. Download mysql connector installor.

Before we start using mysql connector we need to add the mysql connector references to our project.
1.Right click on references --> add reference --> browse for 'MySql.Data' and add.

How to connect mysql database using C#

2.Now add MySql Library namespace in C# project like below.
using MySql.Data.MySqlClient;


Specifying Connection string in Mysql

1.mysql connection string in C# application:
string myConnectionString = "server=localhost;database=testDB;uid=root;pwd=pass123;";
2.For multiple servers:
myConnectionString = Server=server1, server2;database=testDB;uid=root;pwd=abc123;";
Note:The above connection string will needed when connect to a server in a replicated server configuration without concern on which server to use.
3.To specify TCP port in connection string:
myConnectionString="Server=myServerAddress;Port=1234;Database=testDB;Uid=root;Pwd=abc123;

The following program creates a object to MySqlConnection class and opens connection.

using System;
using System.Windows.Forms;
using MySql.Data.MySqlClient;
namespace WindowsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private void button1_Click(object sender, EventArgs e)
        {
            string conString = null;
            MySqlConnection connection;
            conString = "server=localhost;database=testDatabase;uid=root;pwd=passwd123;";
            connection = new MySqlConnection(conString);
            try
            {
                connection.Open();
                MessageBox.Show ("Connection Opened ! ");
                connection.Close();
            }
            catch (Exception ex)
            {
                MessageBox.Show("Can not open connection ! ");
            }
        }
    }
}

Thursday, 21 September 2017

How to use static keyword in C# with examples

21:30:00 Posted by Sridhar Thota , No comments
In this article, I am going to explain the static keyword concept with examples. It covers static variable, static method, static constructor and static class. I have explained how to access static variables and static methods with in a static class.

Static Variable:

1.Static keyword can be used with variables, methods, constructor and class.
2.Static variable will be created only once and it can be shared by all objects.
3.If we declare static variable as public, then we can access that variable with classname.static_variable.
4.Static variable is created when class is loaded in to memory .
class sample 
{
public string s="hello";
public static string st="am static";
}
button click
{
sample obj=new sample();
obj.s;  //non static variable so can be accessed with object of class.
obj.st; // this is error. since static variable cannot be accessed with object of class.
sample.s; //this is error. since non static variable cannot be called with classname.variablename.
sample.st;// static variable can be accessed with classname.staticvariablename.
}

Static Method:

1.Static methods are called with classname.method name directly with out creating object.
2.When we have all static methods in a class, then we can declare that class as static class.
3.Some static methods are as follows
Ex: Console.ReadLine(); // consoleclass.methodname
      Console.Write();
      MessageBox.Show();

class static sample2
{
public static void display()
{
MessageBox.Show("Am from static method");
}
button click
{
sample2 obj=new sample2(); // error . As we cannot create object for static class.
obj.display(); // this is error. cannot be accessed with object.
sample2.display(); //works fine as called with classname.methodname
}

Static Constructor:

1.Static constructor is executed only once when the class is loading in to the memory.
2.Static constructor can access only static variables.
class sample3
{
public string s="static constructor example";
public sample3() // normal constructor
{
MesssageBox.Show("Am from normal constructor");
}
static sample3() // static constructor
{
MessageBox.Show("Am from static constructor");
}
}
button click
{
sample3 obj=new sample3();
sample3 obj1=new sample3();
}

Static Class:

1. Static class cannot be instantiated, i.e., we cannot create object for static class.
2. If we have all static methods in our class then we can declare the class as static class.
class static sample4
{
public static string s="hello";
public static string st="am static variable";
public static void display()
{
MessageBox.Show("Am from static method");
MessageBox.Show("Am static class");
}
static sample4() // static constructor
{
MessageBox.Show("Am from static constructor");
}
button click
{
sample4.s;
sample4.st;
sample4.display();
}
I hope this article helped you to understand the static keyword concept in c sharp language.Suggestions and feedback are welcome.

how to validate credit card number in jquery

10:15:00 Posted by raviteja swayampu , No comments
Hi every one welcome again today i came with very useful article How to validate credit card number in jquery. For that here i am not using neither  plugins nor references.I am doing it using pure jquery script code.Here to check whether card is a valid card or not i am using Luhn algorithm or Luhn formula.

What is Luhn Algorithm:

The Luhn algorithm or Luhn formula, also known as the "modulus 10" or "mod 10" algorithm, is a simple checksum formula used to validate a variety of identification numbers, such as credit card numbers, IMEI numbers, National Provider Identifier numbers in the United States, Canadian Social Insurance Numbers, Israel ID Numbers and Greek Social Security Numbers (ΑΜΚΑ). It was created by IBM scientist Hans Peter Luhn.For more information about Luhn formula visit Luhn algorithm.

Now lets check how to implement luhn test in our web application.In current application i am validating credit card in two steps
1.Checking the format of card using Regular expressions.
2.Validating card number using luhn formula.

How to check format of credit card:

For step1 i used regular expressions to check whether the credit card number is in correct format or not.For example Visa card only starts with digit '4' and contains 16 numeric digits and Master Card starts with digit '5' etc.Below are some valid credit card numbers for testing purpose.

valid credit card numbers for testing

Now come to the current application.I checked the credit card with below regular expression.
/*Regular expressions to validate credit card is in valid format
    */
    var VisaReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    var AmericanExpressReg = /^3[47][0-9]{13}$/;
    var MasterCardReg = /^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/;



1.Check the format of card with below script using regular expression.
/*Regular expressions to validate credit card is in valid format
    */
    var VisaReg = /^4[0-9]{12}(?:[0-9]{3})?$/;
    var AmericanExpressReg = /^3[47][0-9]{13}$/;
    var MasterCardReg = /^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/;

    var cardnumber = $("#cardNumber").val();
    var cardtype = $("#ddlCardType").val();
    var expirydate = $("#cardExpiry").val();
    var cardholdername = $("#cardHolderName").val();

    if (cardnumber == null || cardnumber == "") {
        $("#spncardNumber").text("Please Enter Card Number");
        $("#spncardNumber").show();
        result = false;
    }
    else if (cardnumber != null && cardnumber != "") {
        if (cardtype == "VISA") {
            if (!VisaReg.test(cardnumber)) {
                $("#spncardNumber").text("Enter Valid Visa Card Number");
                $("#spncardNumber").show();
                result = false;
            }
        }
        else if (cardtype == "AMERICAN EXPRESS") {
            if (!AmericanExpressReg.test(cardnumber)) {
                $("#spncardNumber").text("Enter Valid AE Card Number");
                $("#spncardNumber").show();
                result = false;
            }
        }
        else {
            if (!MasterCardReg.test(cardnumber)) {
                $("#spncardNumber").text("Enter Valid Master Card Number");
                $("#spncardNumber").show();
                result = false;
            }
        }       
    }
2.If you enter an invalid number with starting digit as other than 4 for VISA card(Visa card start with digit 4) and see the validation message in form like below.

Validate format of credit card

3.But these regular expressions checks card format only.They can not validate the card numbers. Luhn formula will take care of it.

How to Validate Credit Card using Luhn Algorithm:

1.Below is java script code to perform luhn formula.
/*checks whether card is valid or not using luhn algoritham
current credit cards in market are following this algoritham*/
function isCardNumberValid(cardNumber, allowSpaces) {
    if (allowSpaces) {
        cardNumber = cardNumber.replace(/ /g, '');
    }
    if (!cardNumber.match(/^\d+$/)) {
        return false;
    }
    var checksum = 0;
    for (var i = 0; i < cardNumber.length; i++) {
        var n = (cardNumber.charAt(cardNumber.length - i - 1) - '0') << (i & 1);
        checksum += n > 9 ? n - 9 : n;
    }
    return (checksum % 10) == 0 && checksum > 0;
}
2.This function accepts two parameters one is card number and another one boolean values(true or false,currently this code is work for card number with spaces).
3.Now check a random number with 16 digits.Luhn algorithm says..

Validate credit card using luhn algorithm

4.In the same ways below is csharp code to check the luhn algorithm.
Luhn alogitham server validation code.

    public static class LuhnUtility
    {
        public static bool IsCardNumberValid(string cardNumber, bool allowSpaces = false)
        {
            if (allowSpaces)
            {
                cardNumber = cardNumber.Replace(" ", "");
            }

            if (cardNumber.Any(c => !Char.IsDigit(c)))
            {
                return false;
            }

            int checksum = cardNumber
               .Select((c, i) => (c - '0') << ((cardNumber.Length - i - 1) & 1))
               .Sum(n => n > 9 ? n - 9 : n);

            return (checksum % 10) == 0 && checksum > 0;
        }
    }


Download the source code for this application from Github.
Download

Conclusion:

I hope this article may help you.Suggestions and feedbacks are always welcome.