Country / Region React Select Boxes for your Forms

react-country-region-selector

About

This library provides a pair of React components to display connected country and region dropdowns (pick a country, it shows the relevant regions). If you’re not using React, check out the plain vanilla JS version instead. The list of countries and regions is maintained separately and found in the country-region-data repo.

Features

It’s pretty versatile.

There are two separate components (<CountryDropdown />, <RegionDropdown>) that you can embed in your DOM wherever you need. That sounded like a vulgar euphemism, but it wasn’t, honest.
The source data used by the library is also exposed, should you need it.
It let’s you customize the list of countries that appears via a whitelist, blacklist.
A lot of options are provided, for things like styling, event callbacks and so on.
To keep file sizes down you have the option of creating a custom build of the library containing only a list of those countries you want to show up. See command line options for more info.

Gotchas

Page charset: some country names contain UTF-8 chars, so your page will need an appropriate charset to handle them. If you see some invalid characters appearing in the dropdown, make sure you have UTF-8 specified in your page <head>, like so: <meta charset="UTF-8">
Return values: on an onChange event event.target.value is returned as the first value and the full event as the second.

Demo

Check out the github pages section for some examples + example JSX code.

Installation

Using npm or yarn:

npm i react-country-region-selector
yarn add react-country-region-selector

Usage

It’s very easy to use, but note that you will need to track the country and region value somewhere - either in your component state or in a store somewhere. Here’s a simple example that uses state:

import React, { Component } from 'react';

// note that you can also export the source data via CountryRegionData. It's in a deliberately concise format to 
// keep file size down
import { CountryDropdown, RegionDropdown, CountryRegionData } from 'react-country-region-selector';

class Example extends Component {
  constructor (props) {
    super(props);
    this.state = { country: '', region: '' };
  }

  selectCountry (val) {
    this.setState({ country: val });
  }

  selectRegion (val) {
    this.setState({ region: val });
  }

  render () {
    const { country, region } = this.state;
    return (
      <div>
        <CountryDropdown
          value={country}
          onChange={(val) => this.selectCountry(val)} />
        <RegionDropdown
          country={country}
          value={region}
          onChange={(val) => this.selectRegion(val)} />
      </div>
    );
  }
}

Generally you don’t need CountryRegionData, but should you need it, the raw data is accessible like in the above example

Options

These are the attributes that can be passed to the two components. Note: any other attributes that aren’t specified here will be added directly to the <select> DOM element.

<CountryDropdown />

Parameter	Required?	Default	Type	Description
value	Yes	`""`	`string`	The currently selected country. This should either be the shortcode, or the full country name depending on what you’re using for your value attribute (see the `valueType` option). By default it’s the full country name.
onChange	Yes	`-`	`function`	Callback that gets called when the user selects a country. Use this to store the value in whatever store you’re using (or just the parent component state).
onBlur	No	`-`	`function`	Callback that gets called when the user blurs off the country field.
name	No	`"rcrs-country"`	`string`	The name attribute of the generated select box.
id	No	`""`	`string`	The ID of the generated select box. Not added by default.
classes	No	`""`	`string`	Any additional space-separated classes you want to add.
showDefaultOption	No	`true`	`boolean`	Whether you want to show a default option.
priorityOptions	No	`array`	`[]`	Lets you target countries that should appear at the top of the dropdown. Should also be an array of country shortcodes.
defaultOptionLabel	No	`"Select Country"`	`string`	The default option label.
labelType	No	`"full"`	`string`	Either `"full"` or `"short"`. This governs whether you see country names or country short codes in the dropdown.
valueType	No	`"full"`	`string`	Either `"full"` or `"short"`. This controls the actual `value` attribute of each `<option>` in the dropdown. Please note, if you set this to `"short"` you will need to let the corresponding `<RegionDropdown />` component know as well, by passing a `countryValueType="short"` attribute.
whitelist	No	`[]`	`array`	This setting lets you target specific countries to appear in the dropdown. Only those specified here will appear. This should be an array of country shortcodes. See the country-region-data repo for the data and the shortcodes.
blacklist	No	`[]`	`array`	Lets you target countries that should not appear in the dropdown. Should also be an array of country shortcodes.
disabled	No	`false`	`boolean`	Disables the country field.

<RegionDropdown />

Parameter	Required?	Default	Type	Description
country	Yes	`""`	`string`	The currently selected country.
value	Yes	`""`	`string`	The currently selected region.
onChange	Yes	-	`function`	Callback that gets called when the user selects a region. Use this to store the value in whatever store you’re using (or just the parent component state).
onBlur	No	-	`function`	Callback that gets called when the user blurs off the region field.
name	No	`"rcrs-region"`	`string`	The name attribute of the generated select box.
id	No	`""`	`string`	The ID of the generated select box. Not added by default.
classes	No	`""`	`string`	Any additional space-separated classes you want to add.
blankOptionLabel	No	`-`	`string`	The label that appears in the region dropdown when the user hasn’t selected a country yet.
showDefaultOption	No	`true`	`boolean`	Whether you want to show a default option. This is what the user sees in the region dropdown after selecting a country. It defaults to the `defaultOptionLabel` setting (see next).
defaultOptionLabel	No	`Select Region`	`string`	The default region option.
onChange	No	`-`	`function`	Called when the user selects a region. Use this to store the region value.
countryValueType	No	`full`	`string`	If you’ve changed the country dropdown `valueType` to `short` you will need to set this value to `short` as well, so the component knows what’s being passed in the `country` property.
labelType	No	`"full"`	`string`	Either `"full"` or `"short"`. This governs whether you see region names or region short codes in the dropdown.
valueType	No	`"full"`	`string`	Either `"full"` or `"short"`. This controls the actual `value` attribute of each `<option>` in the dropdown.
disableWhenEmpty	No	`false`	`boolean`	Disables the region field when the user hasn’t selected a country.
disabled	No	`false`	`boolean`	Disables the region field. If set to true, it overrides `disableWhenEmpty`
customOptions	No	`[]`	`Array<string>`	Appends a list of string to the every region dropdown, regardless of the country selected.

Command-line

Check out the scripts section of the package.json file to see them all, but these are the highlights:

npm start - regenerate everything, plus a watcher for local development.
npm build - build the dist files again. No watcher.
rollup -c --config-countries=UK,US - generate a custom build of the script /dist folder containing only those countries you specify here. This seriously reduces file size, so if you can do it, do it.

Download Details:

Author: country-regions

Live Demo: http://country-regions.github.io/react-country-region-selector/

GitHub: https://github.com/country-regions/react-country-region-selector

#reactjs #javascript

What is GEEK

Buddha Community

Country / Region React Select Boxes for your Forms

Sean Robertson

1574307124

How to add CRUD Operations to Angular using ASP.NET Web API and MongoDB

MongoDB is a NoSQL, free, open source, high-performance, and cross-platform document-oriented database. MongoDB was developed by the 10gen company that is now called MongoDB Inc. MongoDB is written in C++ and stores data in a flexible, JSON-like format with a dynamic schema.

Prerequisites

We should have the basic knowledge of Angular, MongoDB, and Web API.
The Visual Studio Code IDE should be installed.
Robo 3T or Studio 3T should be installed.

Create a Database and Collection in MongoDB

MongoDB Environment Setup

Check how to set up the MongoDB environment and Robo 3T, from here.

Step 1

Now, open Robo 3T and connect to the local server.
Connecting to localhost

Step 2

Create a database with the name “employee” using Robo 3T (Check Link).

Create a Web API Project

Step 1

Open Visual Studio and create a new project.
Creating a project

Change the name to CrudWithMongoDB.

Changing project name

Choose the WEB API template.

Step 2

Now, add the MongoDB Driver for C# using NuGet Package Manager.

Go to Tools>>NuGet Package Manager >> Manage NuGet package for Solution.

Managing NuGet package

Step 3

Right-click the Models folder and add two classes, Employee and Status. Now, paste the following codes in these classes.

Add the required namespaces in the Employee class.

using MongoDB.Bson;  
using MongoDB.Bson.Serialization.Attributes;

Employee class

 public class Employee  
       {  
           [BsonRepresentation(BsonType.ObjectId)]  
           public String Id { get; set; }  
           public string Name { get; set; }  
           public string  { get; set; }  
           public string Address { get; set; }  
           public string City { get; set; }  
           public string Country { get; set; }  
       }

Status class

  public class Status  
       {  
           public string Result { set; get; }  
           public string Message { set; get; }  
       }

Step 4

Now, add a connection string in the web.config file and add the following line in the App Settings section of that file.

<add key="connectionString" value="mongodb://localhost"/>

Step 5

Right-click on the Controllers folder and add a new controller. Name it “Emp controller.”

Add the following namespaces in the Emp controller.

using MongoDB.Driver;  
using MongoDB.Bson;  
using CrudWithMongoDB.Models;

Now, add a method to insert data into the database for inserting employee details.

    [Route("InsertEmployee")]  
           [HttpPost]  
           public object Addemployee(Employee objVM)  
           {  
               try  
               {   ///Insert Emoloyeee  
                   #region InsertDetails  
                   if (objVM.Id == null)  
                   {  
                       string constr = ConfigurationManager.AppSettings["connectionString"];  
                       var Client = new MongoClient(constr);  
                       var DB = Client.GetDatabase("Employee");  
                       var collection = DB.GetCollection<Employee>("EmployeeDetails");  
                       collection.InsertOne(objVM);  
                       return new Status  
                       { Result = "Success", Message = "Employee Details Insert Successfully" };  
                   }  
                   #endregion  
                   ///Update Emoloyeee  
                   #region updateDetails  
                   else  
                   {  
                       string constr = ConfigurationManager.AppSettings["connectionString"];  
                       var Client = new MongoClient(constr);  
                       var Db = Client.GetDatabase("Employee");  
                       var collection = Db.GetCollection<Employee>("EmployeeDetails");  

                       var update = collection.FindOneAndUpdateAsync(Builders<Employee>.Filter.Eq("Id", objVM.Id), Builders<Employee>.Update.Set("Name", objVM.Name).Set("Department", objVM.Department).Set("Address", objVM.Address).Set("City", objVM.City).Set("Country", objVM.Country));  

                       return new Status  
                       { Result = "Success", Message = "Employee Details Update Successfully" };  
                   }  
                   #endregion  
               }  

               catch (Exception ex)  
               {  
                   return new Status  
                   { Result = "Error", Message = ex.Message.ToString() };  
               }  

           }

Add a new method to delete employee details.

#region DeleteEmployee  
     [Route("Delete")]  
     [HttpGet]  
     public object Delete(string id)  
     {  
         try  
         {  
             string constr = ConfigurationManager.AppSettings["connectionString"];  
             var Client = new MongoClient(constr);  
             var DB = Client.GetDatabase("Employee");  
             var collection = DB.GetCollection<Employee>("EmployeeDetails");  
             var DeleteRecored = collection.DeleteOneAsync(  
                            Builders<Employee>.Filter.Eq("Id", id));  
             return new Status  
             { Result = "Success", Message = "Employee Details Delete  Successfully" };  

         }  
         catch (Exception ex)  
         {  
             return new Status  
             { Result = "Error", Message = ex.Message.ToString() };  
         }  

     }  
     #endregion

Add a method to get Employee details.

  #region Getemployeedetails  
           [Route("GetAllEmployee")]  
           [HttpGet]  
           public object GetAllEmployee()  
           {  
               string constr = ConfigurationManager.AppSettings["connectionString"];  
               var Client = new MongoClient(constr);  
               var db = Client.GetDatabase("Employee");  
               var collection = db.GetCollection<Employee>("EmployeeDetails").Find(new BsonDocument()).ToList();  
               return Json(collection);  

           }  
           #endregion

Add a method to get Employee details by Id.

#region EmpdetaisById  
     [Route("GetEmployeeById")]  
     [HttpGet]  
     public object GetEmployeeById(string id)  
     {  
         string constr = ConfigurationManager.AppSettings["connectionString"];  
         var Client = new MongoClient(constr);  
         var DB = Client.GetDatabase("Employee");  
         var collection = DB.GetCollection<Employee>("EmployeeDetails");  
         var plant = collection.Find(Builders<Employee>.Filter.Where(s => s.Id == id)).FirstOrDefault();  
         return Json(plant);  

     }  
     #endregion

Here is the complete Emp controller code.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Net.Http;  
using System.Web.Http;  
using MongoDB.Driver;  
using MongoDB.Bson;  
using CrudWithMongoDB.Models;  
using System.Configuration;  

namespace CrudWithMongoDB.Controllers  
{  
    [RoutePrefix("Api/Employee")]  
    public class EmpController : ApiController  
    {  
        [Route("InsertEmployee")]  
        [HttpPost]  
        public object Addemployee(Employee objVM)  
        {  
            try  
            {   ///Insert Emoloyeee  
                #region InsertDetails  
                if (objVM.Id == null)  
                {  
                    string constr = ConfigurationManager.AppSettings["connectionString"];  
                    var Client = new MongoClient(constr);  
                    var DB = Client.GetDatabase("Employee");  
                    var collection = DB.GetCollection<Employee>("EmployeeDetails");  
                    collection.InsertOne(objVM);  
                    return new Status  
                    { Result = "Success", Message = "Employee Details Insert Successfully" };  
                }  
                #endregion  
                ///Update Emoloyeee  
                #region updateDetails  
                else  
                {  
                    string constr = ConfigurationManager.AppSettings["connectionString"];  
                    var Client = new MongoClient(constr);  
                    var Db = Client.GetDatabase("Employee");  
                    var collection = Db.GetCollection<Employee>("EmployeeDetails");  

                    var update = collection.FindOneAndUpdateAsync(Builders<Employee>.Filter.Eq("Id", objVM.Id), Builders<Employee>.Update.Set("Name", objVM.Name).Set("Department", objVM.Department).Set("Address", objVM.Address).Set("City", objVM.City).Set("Country", objVM.Country));  

                    return new Status  
                    { Result = "Success", Message = "Employee Details Update Successfully" };  
                }  
                #endregion  
            }  

            catch (Exception ex)  
            {  
                return new Status  
                { Result = "Error", Message = ex.Message.ToString() };  
            }  

        }  

        #region Getemployeedetails  
        [Route("GetAllEmployee")]  
        [HttpGet]  
        public object GetAllEmployee()  
        {  
            string constr = ConfigurationManager.AppSettings["connectionString"];  
            var Client = new MongoClient(constr);  
            var db = Client.GetDatabase("Employee");  
            var collection = db.GetCollection<Employee>("EmployeeDetails").Find(new BsonDocument()).ToList();  
            return Json(collection);  

        }  
        #endregion  
        #region EmpdetaisById  
        [Route("GetEmployeeById")]  
        [HttpGet]  
        public object GetEmployeeById(string id)  
        {  
            string constr = ConfigurationManager.AppSettings["connectionString"];  
            var Client = new MongoClient(constr);  
            var DB = Client.GetDatabase("Employee");  
            var collection = DB.GetCollection<Employee>("EmployeeDetails");  
            var plant = collection.Find(Builders<Employee>.Filter.Where(s => s.Id == id)).FirstOrDefault();  
            return Json(plant);  

        }  
        #endregion  
        #region DeleteEmployee  
        [Route("Delete")]  
        [HttpGet]  
        public object Delete(string id)  
        {  
            try  
            {  
                string constr = ConfigurationManager.AppSettings["connectionString"];  
                var Client = new MongoClient(constr);  
                var DB = Client.GetDatabase("Employee");  
                var collection = DB.GetCollection<Employee>("EmployeeDetails");  
                var DeleteRecored = collection.DeleteOneAsync(  
                               Builders<Employee>.Filter.Eq("Id", id));  
                return new Status  
                { Result = "Success", Message = "Employee Details Delete  Successfully" };  

            }  
            catch (Exception ex)  
            {  
                return new Status  
                { Result = "Error", Message = ex.Message.ToString() };  
            }  

        }  
        #endregion  
    }  
}

Step 6

Now, let’s enable CORS. Go to Tools, open NuGet Package Manager, search for Cors, and install the Microsoft.Asp.Net.WebApi.Cors package.

Installing Microsoft.Asp.Net.Web.Cors package

Open Webapiconfig.cs and add the following lines.

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");    
config.EnableCors(cors);

Create an Project

Step 1

Create an Angular 7 project with the name “CrudwithMongoDB” by using the following command.

 ng new CrudwithMongoDB

Step 2

Open Visual Studio Code, open the newly created project, and add bootstrap to this project.

npm install bootstrap --save

Step 3

Now, create two components for displaying the employee list page and adding a new employee page. To create the components, open terminal and use the following commands.

ng g c employee
ng g c addemployee

Step 4

Create a class named “employee” by using the following command.

ng g class employee

Add the required properties in the class.

export class Employee {  
    Id: string;  
    Name: string;  
    Department: string;  
    Address: string;  
    City: string;  
    Country: string;  
}

Step 5

Create a service to call the Web API.

ng g s emprecord

Step 6

Open the emprecord service and import the required packages and classes. Add the following lines of code in the emprecord.service.ts file.

    import { Injectable } from '@angular/core';  
    import { Observable } from "rxjs";  
    import {HttpHeaders, HttpClient } from "@angular/common/http";  
    import { Employee } from "../app/employee";  
    @Injectable({  
      providedIn: 'root'  
    })  
    export class EmprecordService {  
       Url="http://localhost:14026/Api/Employee/";  
      constructor(private http:HttpClient) { }  
       InsertEmployee(employee:Employee)  
       {  
         debugger;  
        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };  
         return this.http.post<Employee[]>(this.Url+'/InsertEmployee/', employee,httpOptions)  
       }  
       GetEmployeeRecord():Observable<Employee[]>  
       {  
         debugger;  
        return this.http.get<Employee[]>(this.Url+"/GetAllEmployee")  
       }  
       DeleteEmployee(id:string):Observable<number>  
       {  
         debugger;  
        return this.http.get<number>(this.Url + '/Delete/?id='+id);  
       }  
       GetEmployeeById(id:string)  
       {  
        return this.http.get<Employee>(this.Url + '/GetEmployeeById/?id=' + id);  
       }  
       UpdatEmplouee(employee:Employee)  
       {  
        debugger;  
        const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) };  
         return this.http.post<Employee[]>(this.Url+'/UpdateEmployee/', employee,httpOptions)  
       }  

    }

Step 7 - Add Paging and Searching

To add paging and searching, install the following library in the project. For pagination:

npm install --save ngx-pagination

For searching:

npm i ng2-search-filter --save

Export and import both these directives in the app.module.ts file.

import {NgxPaginationModule} from 'ngx-pagination';  
import { Ng2SearchPipeModule } from 'ng2-search-filter';

Step 8

Now, open addemployee.component.html and add the following HTML.


    <div class="container" style="padding-top:40px;">    
      <div class="row">    
        <div class="col-md-10 mx-auto">    
          <div class="card mx-4">   
            <div class="card-head p-4">  
                <div class="col-sm-12 btn btn-success">  
                    Employee's Information  
                  </div>  
            </div>   
            <div class="card-body p-4">    
         <form [formGroup]="Addemployee" (ngSubmit)="onFormSubmit(Addemployee.value)">  
        <div class="col-sm-12">  
          <div class="card-body">  
            <!-- <div class="row"> -->  
            <div class="form-group ">  

              <label class="col-sm-2 control-label" for="Name">Name</label>  
              <div class="col-sm-10">  
                <input type="text" class="form-control" placeholder="Enter name" formControlName="Name">  
              </div>  
            </div>  
            <div class="form-group ">  
              <label class="col-sm-2 control-label" for="Department">Department</label>  
              <div class="col-sm-10">  
                <input type="text" class="form-control" placeholder="Enter Department" formControlName="Department">  
              </div>  
            </div>  
            <div class="form-group ">  
              <label class="col-sm-2 control-label" for="Address">Address</label>  
              <div class="col-sm-10">  
                <input type="text" class="form-control" placeholder="Enter Address" formControlName="Address">  
              </div>  
            </div>  
            <div class="form-group ">  
              <label class="col-sm-2 control-label" for="City">City</label>  
              <div class="col-sm-10">  
                <input type="text" class="form-control" placeholder="Enter City" formControlName="City">  
              </div>  
            </div>  
            <div class="form-group ">  
              <label class="col-sm-2 control-label" for="Country">Country</label>  
              <div class="col-sm-10">  
                <input type="text" class="form-control" placeholder="Enter Country" formControlName="Country">  
              </div>  
            </div>  

          </div>  
        </div>  
        <div class="col-6 text-right">    
            <button class="btn btn-primary px-10" type="submit">Add </button>  
          </div>  
      </form>  
          </div>    
        </div>    
      </div>    
      </div>   
    </div>

Step 9

Open the addemployee.componet.ts file and add the following lines.

	import { Component, OnInit } from '@angular/core';  
    import { HttpClient } from "@angular/common/http";  
    import { FormGroup, FormControl } from '@angular/forms';  
    import { EmprecordService } from "../../emprecord.service";  
    import { Employee } from "../../employee";  
    import { Observable } from "rxjs";  
    import { identifierModuleUrl } from '@angular/compiler';  
    import { Router } from '@angular/router';  
    @Component({  
      selector: 'app-addemployee',  
      templateUrl: './addemployee.component.html',  
      styleUrls: ['./addemployee.component.css']  
    })  
    export class AddemployeeComponent implements OnInit {  
      massage: string;  
      dataSaved = false;  
      Addemployee:FormGroup;  
      EmployeeIdUpdate = "0";  
      constructor(private router: Router,private emprecordService:EmprecordService) { }  

      InsertEmployee(employee:Employee)  
      {  
    debugger;  
        if (this.EmployeeIdUpdate != "0") employee.Id=this.EmployeeIdUpdate;  
          this.emprecordService.InsertEmployee(employee).subscribe(  
            ()=>  
            {  
              if (this.EmployeeIdUpdate == "0") {  
                this.massage = 'Saved Successfully';  

              }  
              else  
              {  
                this.massage = 'Update Successfully';  
              }  
              this.dataSaved = true;  
              this.router.navigate(['/employee']);  
            })  
      }  
      onFormSubmit() {  
        const Emp = this.Addemployee.value;  
        this.InsertEmployee(Emp);  
      }  

      EmployeeEdit(id: string) {  
        debugger;  
        this.emprecordService.GetEmployeeById(id).subscribe(emp => {  
          this.massage = null;  
          this.dataSaved = false;  
          debugger;  
          this.EmployeeIdUpdate=id;  
          this.Addemployee.controls['Name'].setValue(emp.Name);  
          this.Addemployee.controls['Department'].setValue(emp.Department);  
          this.Addemployee.controls['City'].setValue(emp.City);  
          this.Addemployee.controls['Country'].setValue(emp.Country);  
          this.Addemployee.controls['Address'].setValue(emp.Address);  
        });  
        debugger;  
      }  
      clearform() {  
        debugger;  
        this.Addemployee.controls['Name'].setValue("");  
        this.Addemployee.controls['Department'].setValue("");  
        this.Addemployee.controls['Address'].setValue("");  
        this.Addemployee.controls['City'].setValue("");  
        this.Addemployee.controls['Country'].setValue("");  

      }  
      ngOnInit() {  
        this.Addemployee = new FormGroup({  

          Name: new FormControl(),  
          Department:new FormControl(),  
          Address:new FormControl(),  
          City:new FormControl(),  
          Country:new FormControl(),  
      });  
      let Id = localStorage.getItem("id");  
    if(Id!=null)  
    {  
      this.EmployeeEdit(Id) ;  
     }}  
    }

Step 10

Open employee.componet.html and add this HTML.


    <div class="container" style="margin-bottom:20px;padding-top:20px;">  
      <div class="row">  
        <div class="col-sm-12 btn btn-success">  
          Employee's Information  
        </div>  
      </div>  
      <div class="col-sm-12" style="margin-bottom:20px;padding-top:20px;">  
        <div class="row">  
          <div class="col-sm-6">  
            <button type="button" class="btn btn-primary" data-toggle="modal" routerLink="/addemployee">  
              Add New Employee  
            </button>  
          </div>  
          <div class="col-sm-6">  
            <input class="form-control" type="text" name="search" [(ngModel)]="filter" placeholder="Search">  
          </div>  
        </div>  
      </div>  
    </div>  
    <div class="container" style="padding-top:20px;">  
      <table class="table table-striped">  
        <thead class="thead-dark">  
          <th>Name</th>  
          <th>Department</th>  
          <th>Address</th>  
          <th>City</th>  
          <th>Country</th>  
          <th>Action</th>  
        </thead>  
        <tbody>  
          <tr *ngFor="let e of emp | async|filter:filter| paginate: { itemsPerPage: 5, currentPage: p } ; let i=index">  
            <td>{{e.Name}}</td>  
            <td>{{e.Department}}</td>  
            <td>{{e.Address}}</td>  
            <td>{{e.City}}</td>  
            <td>{{e.Country}}</td>  
            <td>  
              <div class="btn-group">  
                <button type="button" class="btn btn-primary mr-1" (click)="EmployeeEdit(e.Id)">Edit</button>  
                <button type="button" class="btn btn-danger mr-1" (click)="Deleteemployee(e.Id)">Delete</button>  
              </div>  
            </td>  
          </tr>  
        </tbody>  
      </table>  
      <ul class="pagination">  
        <pagination-controls (pageChange)="p = $event"></pagination-controls>  
      </ul>  
    </div>

Step 11

Open employee.componet.ts file and add the following lines.

	import { Component, OnInit } from '@angular/core';  
    import { Employee } from "../employee";  
    import { EmprecordService } from "../emprecord.service";  
    import { Observable } from "rxjs";  
    import { Router } from '@angular/router';  
    @Component({  
      selector: 'app-employee',  
      templateUrl: './employee.component.html',  
      styleUrls: ['./employee.component.css']  
    })  
    export class EmployeeComponent implements OnInit {  
      private emp: Observable<Employee[]>;  
      massage:String;  
      dataSaved=false;  
      constructor(private router: Router,private emprecordService:EmprecordService) { }  
       Loademployee()  
       {  
          debugger;  
          this.emp = this.emprecordService.GetEmployeeRecord();  
          console.log(this.emp);  

          debugger;  

       }  
       EmployeeEdit(id: string) {  
        debugger;  
       localStorage.removeItem("id");  
       localStorage.setItem("id",id.toString());  
        this.router.navigate(['/addemployee'], { queryParams: { Id: id } });  
        debugger;  
      }  
       Deleteemployee(id: string) {  
        if (confirm("Are You Sure To Delete this Informations")) {  

          this.emprecordService.DeleteEmployee(id).subscribe(  
            () => {  
              this.dataSaved = true;  
              this.massage = "Deleted Successfully";  
            }  
          );  
        }  
      }  
      ngOnInit() {  
        localStorage.clear();
        this.Loademployee();  

      }  

    }

Step 12

Now, open app-routing.module.ts file and add the following lines to create routing.

	import { NgModule } from '@angular/core';  
    import { Routes, RouterModule } from '@angular/router';  
    import { EmployeeComponent } from "./employee/employee.component";  
    import { AddemployeeComponent } from "./employee/addemployee/addemployee.component";  

    const routes: Routes = [  
     {path:"employee",component:EmployeeComponent},  
     {path:"addemployee",component:AddemployeeComponent},  
    ];  

    @NgModule({  
      imports: [RouterModule.forRoot(routes)],  
      exports: [RouterModule]  
    })  
    export class AppRoutingModule { }

Step 13

Now, open app.module.ts file and add the following lines.

import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { FormsModule } from '@angular/forms';  
import { AppRoutingModule } from './app-routing.module';  
import { AppComponent } from './app.component';  
import { HttpClientModule,HttpClient} from '@angular/common/http';   
import { EmployeeComponent } from './employee/employee.component';  
import { ReactiveFormsModule } from "@angular/forms";  
import { EmprecordService } from "../app/emprecord.service";  
import { AddemployeeComponent } from './employee/addemployee/addemployee.component';   
import {NgxPaginationModule} from 'ngx-pagination';   
import { Ng2SearchPipeModule } from 'ng2-search-filter';  

@NgModule({  
  declarations: [  
    AppComponent,  
    EmployeeComponent,  
    AddemployeeComponent,  
  ],  
  imports: [  
    BrowserModule,FormsModule,  
    AppRoutingModule,HttpClientModule,ReactiveFormsModule,Ng2SearchPipeModule,NgxPaginationModule  
  ],  
  providers: [EmprecordService],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Step 14

Now, let us run the project and redirect the URL to the Addemployee page.

Employee Information form

Step 15

Enter the details and click on the Add button.

Adding employees

Summary

In this article, we discussed how to perform CRUD operations using MongoDB, Angular 8, and Asp.net Web API.

#Angular #MongoDB #dotnet #webdev #api

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

Performance: It delivers optimal performance.
Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
UI design: React Native enables you to design simple and responsive UI for your mobile app.
3rd party plugins: This framework supports 3rd party plugins.
Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
Near-native user experience: React Native provides several native components, and these are platform agnostic.
The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

藤本結衣

1633367280

単純な挿入MYSQLデータベースを使用したASP.NETでの更新と削除の選択

この記事では、ASP.NET WebアプリケーションからMySQLデータベースにデータの選択、更新、および削除を挿入する方法について説明します。

それでは、次の手順に進みましょう。

ASP.NETWebページ
グリッドビューデータコントロールとMySQLデータベース

次に、MySQLAdminページを開き、[Create A New Table]-> [View]-> [Table Structure for Table`student`]を選択します。

CREATE TABLE IF NOT EXISTS `student` (  
 `SID` int(100) NOT NULL AUTO_INCREMENT,  
 `Name` varchar(100) NOT NULL,  
 `Address` varchar(500) NOT NULL,  
 `Email` varchar(100) NOT NULL,  
 `Mobile` varchar(25) NOT NULL,  
 PRIMARY KEY (`SID`)  
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=31 ;

Visual Studio 2012のインスタンスを開き、新しいASP.NETWebアプリケーションを作成します。次の図に示すように、プロジェクトに「MYSQLCRUDApplication」という名前を付け

ます。コードビハインドファイル（Student.aspx.cs）に、次のようにコードを記述します

Student.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"  
CodeBehind="Student.aspx.cs" Inherits="MYSQLCRUDApplication.Student" %>  
  
<asp:Content ID="Content1" ContentPlaceHolderID="titleContent" runat="server">  
    Simple Insert Select Update and Delete in ASP.NET using MySQL Database   
</asp:Content>  
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">  
</asp:Content>  
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">  
    <table>  
        <tr>  
            <td class="td">Name:</td>  
            <td>  
                <asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>  
            <td>  
                <asp:Label ID="lblSID" runat="server" Visible="false"></asp:Label> </td>  
        </tr>  
        <tr>  
            <td class="td">Address:</td>  
            <td>  
                <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox></td>  
            <td> </td>  
        </tr>  
        <tr>  
            <td class="td">Mobile:</td>  
            <td>  
                <asp:TextBox ID="txtMobile" runat="server"></asp:TextBox></td>  
            <td> </td>  
        </tr>  
        <tr>  
            <td class="td">Email ID:</td>  
            <td>  
                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></td>  
            <td> </td>  
        </tr>  
        <tr>  
            <td></td>  
            <td>  
                <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />  
                <asp:Button ID="btnUpdate" runat="server" Text="Update" Visible="false"  
OnClick="btnUpdate_Click" />  
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" /></td>  
            <td></td>  
        </tr>  
    </table>  
  
    <div style="padding: 10px; margin: 0px; width: 100%;">  
        <p>  
            Total Student:<asp:Label ID="lbltotalcount" runat="server" Font-Bold="true"></asp:Label>  
        </p>  
        <asp:GridView ID="GridViewStudent" runat="server" DataKeyNames="SID"   
            OnSelectedIndexChanged="GridViewStudent_SelectedIndexChanged"  
OnRowDeleting="GridViewStudent_RowDeleting">  
            <Columns>  
                <asp:CommandField HeaderText="Update" ShowSelectButton="True" />  
                <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" />  
            </Columns>  
        </asp:GridView>  
    </div>  
</asp:Content>

Web.configファイルで、次のように接続文字列を作成します。

Web.config

<connectionStrings>  
    <add name="ConnectionString"  
connectionString="Server=localhost;userid=root;password=;Database=Testdb"  
providerName="MySql.Data.MySqlClient"/>  
 </connectionStrings>

ここで、コードビハインドファイル「Student.aspx.cs」で次のコードを使用します。

Student.aspx.cs

using System;  
using System.Collections.Generic;  
using System.Configuration;  
using System.Data;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
using MySql.Data.MySqlClient;  
  
  
namespace MYSQLCRUDApplication  
{  
    public partial class Student : System.Web.UI.Page  
    {  
        #region MySqlConnection Connection and Page Lode  
        MySqlConnection conn = new  
MySqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);          
        protected void Page_Load(object sender, EventArgs e)  
        {  
            Try  
            {  
                if (!Page.IsPostBack)  
                {  
                    BindGridView();  
                      
                }  
            }  
            catch (Exception ex)  
            {  
                ShowMessage(ex.Message);  
            }  
        }  
        #endregion  
        #region show message  
        /// <summary>  
        /// This function is used for show message.  
        /// </summary>  
        /// <param name="msg"></param>  
        void ShowMessage(string msg)  
        {  
            ClientScript.RegisterStartupScript(Page.GetType(), "validation", "<script  
language='javascript'>alert('" + msg + "');</script>");  
        }  
        /// <summary>  
        /// This Function is used TextBox Empty.  
        /// </summary>  
        void clear()  
        {  
            txtName.Text = string.Empty; txtAddress.Text = string.Empty; txtMobile.Text = string.Empty;  
txtEmail.Text = string.Empty;  
            txtName.Focus();  
        }  
        #endregion  
        #region bind data to GridViewStudent  
        private void BindGridView()  
        {   
            Try  
            {  
                if (conn.State == ConnectionState.Closed)  
                {  
                    conn.Open();  
                }  
                MySqlCommand cmd = new MySqlCommand("Select * from Student ORDER BY SID DESC;",  
conn);  
                MySqlDataAdapter adp = new MySqlDataAdapter(cmd);  
                DataSet ds = new DataSet();  
                adp.Fill(ds);  
                GridViewStudent.DataSource = ds;  
                GridViewStudent.DataBind();  
                lbltotalcount.Text = GridViewStudent.Rows.Count.ToString();  
            }  
            catch (MySqlException ex)  
            {  
                ShowMessage(ex.Message);  
            }  
            Finally  
            {  
                if (conn.State == ConnectionState.Open)  
                {  
                   conn.Close();  
                }  
            }  
        }  
        #endregion  
        #region Insert Data  
        /// <summary>  
        /// this code used to Student Data insert in MYSQL Database  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        protected void btnSubmit_Click(object sender, EventArgs e)  
        {  
            Try  
            {  
                conn.Open();  
                MySqlCommand cmd = new MySqlCommand("Insert into student (Name,Address,Mobile,Email )  
values (@Name,@Address,@Mobile,@Email)", conn);  
                cmd.Parameters.AddWithValue("@Name",txtName.Text);  
                cmd.Parameters.AddWithValue("@Address", txtAddress.Text);  
                cmd.Parameters.AddWithValue("@Mobile",txtMobile.Text);  
                cmd.Parameters.AddWithValue("@Email",txtEmail.Text);  
                cmd.ExecuteNonQuery();                 
                cmd.Dispose();   
                ShowMessage("Registered successfully......!");               
                clear();  
                BindGridView();  
            }  
            catch (MySqlException ex)  
            {  
                ShowMessage(ex.Message);  
            }  
            Finally  
            {  
                conn.Close();  
            }  
        }  
          
        #endregion   
        #region SelectedIndexChanged  
        /// <summary>  
        /// this code used to GridViewRow SelectedIndexChanged value show textbox  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        protected void GridViewStudent_SelectedIndexChanged(object sender, EventArgs e)  
        {  
            GridViewRow row = GridViewStudent.SelectedRow;  
            lblSID.Text = row.Cells[2].Text;  
            txtName.Text = row.Cells[3].Text;  
            txtAddress.Text = row.Cells[4].Text;  
            txtEmail.Text = row.Cells[5].Text;  
            txtMobile.Text = row.Cells[6].Text;  
            btnSubmit.Visible = false;  
            btnUpdate.Visible = true;  
        }  
        #endregion  
        #region Delete Student Data  
        /// <summary>  
        /// This code used to GridViewStudent_RowDeleting Student Data Delete  
        /// </summary>  
        /// <param name="sender"></param>  
        /// <param name="e"></param>  
        protected void GridViewStudent_RowDeleting(object sender, GridViewDeleteEventArgs e)  
        {  
            Try  
            {  
                conn.Open();  
                int SID = Convert.ToInt32(GridViewStudent.DataKeys[e.RowIndex].Value);  
                MySqlCommand cmd = new MySqlCommand("Delete From student where SID='" + SID + "'",  
conn);  
                cmd.ExecuteNonQuery();  
                cmd.Dispose();  
                ShowMessage("Student Data Delete Successfully......!");  
                GridViewStudent.EditIndex = -1;  
                BindGridView();  
            }  
            catch (MySqlException ex)  
            {  
                ShowMessage(ex.Message);  
            }  
            Finally  
            {  
                conn.Close();  
            }  
        }  
        #endregion  
        #region student data update  
        /// <summary>  
        /// This code used to student data update  
        /// </summary>  
        /// <param name="sender"></param>  
       /// <param name="e"></param>  
        protected void btnUpdate_Click(object sender, EventArgs e)  
        {  
            Try  
            {  
                conn.Open();  
                string SID = lblSID.Text;                
                MySqlCommand cmd = new MySqlCommand("update student Set  
Name=@Name,Address=@Address,Mobile=@Mobile,Email=@Email where SID=@SID", conn);  
                cmd.Parameters.AddWithValue("@Name", txtName.Text);  
                cmd.Parameters.AddWithValue("@Address", txtAddress.Text);  
                cmd.Parameters.AddWithValue("@Mobile", txtMobile.Text);  
                cmd.Parameters.AddWithValue("@Email", txtEmail.Text);  
                cmd.Parameters.AddWithValue("SID",SID);  
                cmd.ExecuteNonQuery();  
                cmd.Dispose();  
                ShowMessage("Student Data update Successfully......!");  
                GridViewStudent.EditIndex = -1;  
                BindGridView(); btnUpdate.Visible = false;  
            }  
            catch (MySqlException ex)  
            {  
                ShowMessage(ex.Message);  
            }  
            Finally  
            {  
                conn.Close();  
            }  
        }  
        #endregion  
        #region textbox clear  
        protected void btnCancel_Click(object sender, EventArgs e)  
        {  
            clear();  
        }  
        #endregion  
    }  
}

ページを実行すると、次のようになります。

次に、学生データの挿入とグリッドビューのデータの表示を入力します。メッセージボックス「正常に登録されました」。

次に、Studentを選択し、データTextBoxを表示して、メッセージボックス「StudentDataupdatesuccessfully」に表示されているデータを更新します。

ここで、メッセージボックス「StudentDataDeleteSuccessfully」に表示されているStudentデータを削除します。

この記事がお役に立てば幸いです。他にご不明な点がございましたら、以下にコメントをお寄せください。

リンク: https://www.c-sharpcorner.com/

#aspdotnet #sql

藤本結衣

1633175520

C＃のTreeViewコントロール

TreeViewの紹介

これは、TreeViewコントロールの操作の基本のいくつかを取り上げた短い記事です。この記事では、TreeNodeをTreeViewコントロールに動的に追加し、ノードを検索して、TreeNodeのタグ、テキスト、または名前のプロパティに対して検索語に一致する単一のノードまたはノードのコレクションを見つけて強調表示し、手動またはプログラムでノードを選択する方法について説明します。

図1：TextプロパティによるTreeViewコントロールの検索。

図2：NameプロパティによるTreeViewコントロールの検索。

図3：NameプロパティによるTreeViewコントロールの検索。

図4：特定のプロパティを持つノードの作成。

TreeViewアプリケーション

アプリケーションソリューションには、単一のWindowsアプリケーションプロジェクトが含まれています。このプロジェクトをサポートするために提供されるすべてのコードは、2つのフォームクラスに含まれています。1つは、TreeViewと、ノード情報を表示し（図1、2、および3）、ユーザー指定の検索用語に基づいて特定のノードまたはノードのグループの検索を実行するために使用されるいくつかのコントロールを含むメインフォームです。もう1つのフォームクラス（図4）は、新しいノードを作成するために使用されます。アプリケーション内では、TreeViewからノードを選択し、コンテキストメニューから[ノードの追加]オプションを選択すると、このフォームが表示されます。

このアプリケーションのTreeView関連コンポーネントのいずれかで行われるカスタムまたは派手なことは何もありません。これは、Windowsフォームアプリケーションのコンテキスト内でTreeViewを操作する方法のデモンストレーションにすぎません。

コード：フォーム1-メインフォーム

メインフォームクラスは、いくつかのコントロールが追加された標準のウィンドウフォームです。フォームには分割コンテナコントロールが含まれています。コントロールの左側にはTreeViewコントロールがあり、スプリッターの右側には4つのグループボックスがあります。最初のグループボックスには、選択したノードに関する情報を表示するために使用されるラベルとテキストボックスのセットが含まれ、残りのグループボックスには、ノードのテキスト、名前に基づいてTreeViewのノードコレクションのさまざまな検索を実行するために使用されるラベル、テキストボックス、およびボタンが含まれます。、またはタグ値。

クラスに含まれる機能は、いくつかの領域に分割されています。クラスは、デフォルトのインポート、名前空間宣言、およびクラス宣言で始まります。

 システムを使用する;  
 System.Collections.Genericを使用する;  
 System.ComponentModelを使用します。  
 System.Dataを使用します。  
 System.Drawingを使用する;  
 System.Textを使用します。  
 System.Windows.Formsを使用する;  
名前空間 EasyTreeView {  
    パブリック 部分 クラス Form1：フォーム{  
        public  Form1（）{  
            InitializeComponent（）;  
            //ベースツリービューノードを追加することから始めます  
            TreeNode mainNode =  new  TreeNode（）;  
            mainNode.Name =  "mainNode" ;  
            mainNode.Text =  "Main" ;  
            this .treeView1.Nodes.Add（mainNode）;  
        }  
    }  
}

フォームクラスコンストラクターは、TreeViewコントロールにメインノードを作成します。実行時に、ユーザーはこのノード（またはこのノードから発生する任意の子ノード）を選択して、TreeViewにノードを追加できます。フォームクラスにはコンテキストメニューも含まれています。このコンテキストメニューには2つのオプションがあります。1つは新しいノードを追加するためのもので、もう1つは既存のノードを削除するためのものです。新しいノードが要求されると、アプリケーションは[新しいノード]ダイアログのインスタンスを開きます。このダイアログでは、ユーザーに新しいノードの名前、テキスト、およびタグの値を設定するように強制します。タグ値は任意のオブジェクトにすることができますが、この例では、タグは追加の文字列値を保持するように制限されています。ダイアログから値が収集されると、新しいノードに情報が入力され、TreeViewの選択されたノードに追加されます。

ノードが削除されると、選択されたノードとそのすべての子がTreeViewから削除されます。ここで注意すべきことの1つは、タグを介してオブジェクトをノードに関連付ける場合です。選択したノードを削除する前に、そのオブジェクトを破棄するハンドラーを作成する必要があります。

#regionノードの追加と削除  
/// <概要>  
    ///ダイアログボックスを使用してTreeviewノードを追加します  
    ///ユーザーに名前とテキストのプロパティを設定するように強制する  
    ///ノードの  
    /// </ summary>  
///  
<param name = "送信者" >  
</ param>  
///  
<param name = "e" >  
</ param>  
private void  cmnuAddNode_Click（object  sender、EventArgs e）   
{{  
    NewNode n =  new  NewNode（）;  
    n.ShowDialog（）;  
    TreeNode nod =  new  TreeNode（）;  
    nod.Name = n.NewNodeName.ToString（）;  
    nod.Text = n.NewNodeText.ToString（）;  
    nod.Tag = n.NewNodeTag.ToString（）;  
    n.Close（）;  
    treeView1.SelectedNode.Nodes.Add（nod）;  
    treeView1.SelectedNode.ExpandAll（）;  
}  
/// <概要>  
    ///選択したノードとその子を削除します  
    /// </ summary>  
///  
<param name = "送信者" >  
</ param>  
///  
<param name = "e" >  
</ param>  
private void  cmnuRemoveNode_Click（object  sender、EventArgs e）   
{{  
    treeView1.SelectedNode.Remove（）;  
}  
#endregion

コードの次の領域は、TreeViewイベントを処理するために使用されます。このセクションで処理されるイベントは2つだけです。TreeViewのAfterSelectイベントとTreeViewのclickイベント。After Selectイベントハンドラーは、選択したノードからの情報（名前、テキスト、タグ、および親テキストのプロパティ）を表示するために使用されるテキストボックスにデータを入力するために使用されます。後で説明する検索機能は、一致する各ノードの背景色を黄色に設定することにより、検索に応答して見つかったすべてのノードを強調表示します。TreeViewのクリックイベントハンドラーは、そのような強調表示をすべて削除するために使用されます。

#regionTreeviewイベントハンドラー  
/// <概要>  
///選択したノードに関する情報を表示します  
/// </ summary>  
/// <param name = "sender"> </ param>  
/// <param name = "e"> </ param>  
private void  treeView1_AfterSelect（object  sender、TreeViewEventArgs e）   
{{  
    試す  
    {{  
        txtName.Text =  "" ;  
        txtParentName.Text =  "" ;  
        txtText.Text =  "" ;  
        txtTag.Text =  "" ;  
        txtName.Text = treeView1.SelectedNode.Name.ToString（）;  
        txtText.Text = treeView1.SelectedNode.Text.ToString（）;  
        txtTag.Text = treeView1.SelectedNode.Tag.ToString（）;  
        txtParentName.Text = treeView1.SelectedNode.Parent.Text.ToString（）;  
    }  
    キャッチ {}  
}  
/// <概要>  
///検索関数でマークされたノードをクリアします  
/// </ summary>  
/// <param name = "sender"> </ param>  
/// <param name = "e"> </ param>  
private void  treeView1_Click（object  sender、EventArgs e）   
{{  
    ClearBackColor（）;  
}  
#endregion

クラス内の次の領域は、nameプロパティでノードを検索するために使用されます。名前でノードを検索する方法は、TreeViewで直接サポートされている唯一の検索機能です。名前以外の名前でノードを検索する場合は、独自のメソッドを作成する必要があります。このクリックイベントハンドラーは、一致する名前でノードの配列にデータを入力します。findメソッドは2つの引数を受け入れます。最初の引数は検索語で、2番目の引数は子ノードも検索に含めるかどうかを決定するために使用されるブール値です。この場合、検索語はフォームのテキストボックスから収集され、子ノードを検索するオプションは、2番目の引数をtrueに設定することで有効になります。

ノードのコレクションが作成されると、一致する各ノードの背景色が黄色に設定され、TreeViewでノードが強調表示されます。一致するノードの背景色を設定する前に、Clear Back Colorメソッドを呼び出すことにより、TreeView内の他のすべてのノードが白い背景に戻されます。

#region名前で検索  
/// <概要>  
///ツリービューの組み込みの検索関数を使用します  
///ノードを検索する  
/// </ summary>  
/// <param name = "sender"> </ param>  
/// <param name = "e"> </ param>  
private void  btnFindNode_Click（object  sender、EventArgs e）   
{{  
    ClearBackColor（）;  
    試す  
    {{  
        TreeNode [] tn = treeView1.Nodes [0] .Nodes.Find（txtNodeSearch.Text、  true ）;  
        for  （int  i = 0; i <tn.Length; i ++）  
        {{  
            treeView1.SelectedNode = tn [i];  
            treeView1.SelectedNode.BackColor = Color.Yellow;  
        }  
    }  
    キャッチ {}  
}  
#endregion

コードの次の領域は、以前の検索で強調表示されたノードから背景色を削除するために使用されます。このプロセスは、2つの別々の方法に依存しています。最初のメソッドは、フォームのTreeViewコントロール内のすべてのノードを含むツリーノードコレクションのインスタンスを作成します。コレクション内の各ノードは、2番目のメソッド（Clear Recursive）に渡されます。この2番目のメソッドには、現在のノードが渡されます。Clear Recursiveメソッドは、渡されたノードノードコレクション内に含まれるすべてのノードをループし、それらの各ノードの背景色を白に設定します。次に、各ノードは同じClear Recursiveメソッドに再帰的に戻され、処理するノードがなくなるまで、各ノードのノードコレクションが処理されます。このようにして、ツリー全体の各ノードと子ノードが処理されます。

このプロセスは、各ノードの背景色を白に設定するためだけに使用されますが、ツリー全体を処理する必要がある場合は常に同じアプローチを使用できます。実際、残りの検索方法はまさにそれを行います。

#regionBackColorを削除します  
//ツリービューノードを再帰的に移動します  
//そして背景色を白にリセットします  
private void  ClearBackColor（）   
{{  
    TreeNodeCollectionノード= treeView1.Nodes;  
    foreachの （ツリーノードN における ノード）  
    {{  
        ClearRecursive（n）;  
    }  
}  
// ClearBackColor関数によって呼び出されます  
private void  ClearRecursive（TreeNode treeNode）   
{{  
    foreachの （ツリーノードTN で treeNode.Nodes）  
    {{  
        tn.BackColor = Color.White;  
        ClearRecursive（tn）;  
    }  
}  
#endregion

コードの次の領域は、検索式に一致するテキストプロパティを持つ1つまたは複数のノードを見つけるために使用されます。フォームには、テキスト検索用語を設定し、ボタンクリックイベントハンドラーからメソッドを呼び出すために使用されるグループボックスが含まれています。ボタンをクリックすると、最初にClear Back Colorメソッドを呼び出して、強調表示されているすべてのノードがクリアされます。ノードがすべて白い背景に復元された後、ハンドラーはFind ByTextメソッドを呼び出します。この方法は、背景色をクリアするために説明した方法とほとんど同じように機能します。このメソッドは、ツリービューノードのコレクションをアセンブルしてから、各ノードを再帰メソッドに渡します。find recursiveメソッドは、検索式に一致するテキストプロパティを持つノードを検索し、一致するものが見つかると、背景色を黄色に設定します。

#regionテキストで検索  
/// <概要>  
///テキストによるノードの検索には特別な機能が必要です  
///この関数はツリービューを再帰的にスキャンし、  
///一致するアイテムをマークします。  
/// </ summary>  
/// <param name = "sender"> </ param>  
/// <param name = "e"> </ param>  
private void  btnNodeTextSearch_Click（object  sender、EventArgs e）   
{{  
    ClearBackColor（）;  
    FindByText（）;  
}  
private void  FindByText（）   
{{  
    TreeNodeCollectionノード= treeView1.Nodes;  
    foreachの （ツリーノードN における ノード）  
    {{  
        FindRecursive（n）;  
    }  
}  
private void  FindRecursive（TreeNode treeNode）   
{{  
    foreachの （ツリーノードTN で treeNode.Nodes）  
    {{  
        //テキストのプロパティが一致する場合は、アイテムに色を付けます  
        if  （tn.Text ==  this .txtNodeTextSearch.Text）  
            tn.BackColor = Color.Yellow;  
        FindRecursive（tn）;  
    }  
}  
#endregion

次の領域は、タグ値（この場合は文字列）によってノードを検索するために使用されるメソッドを含むために使用されます。一致するノードを黄色で強調表示します。これらのメソッドは、一致がテキスト値ではなくタグ値によって決定されることを除いて、最後のメソッドとほとんど同じように機能します。

#regionタグで検索  
/// <概要>  
///タグでノードを検索するには特別な機能が必要です  
///この関数はツリービューを再帰的にスキャンし、  
///一致するアイテムをマークします。タグはオブジェクトにすることができます。これで  
///文字列を含めるためだけに使用される場合  
/// </ summary>  
/// <param name = "sender"> </ param>  
/// <param name = "e"> </ param>  
private void  btnNodeTagSearch_Click（object  sender、EventArgs e）   
{{  
    ClearBackColor（）;  
    FindByTag（）;  
}  
private void  FindByTag（）   
{{  
    TreeNodeCollectionノード= treeView1.Nodes;  
    foreachの （ツリーノードN における ノード）  
    {{  
        FindRecursiveTag（n）;  
    }  
}  
private void  FindRecursiveTag（TreeNode treeNode）   
{{  
    foreachの （ツリーノードTN で treeNode.Nodes）  
    {{  
    //テキストのプロパティが一致する場合は、アイテムに色を付けます  
        if  （tn.Tag.ToString（）==  this .txtTagSearch.Text）  
            tn.BackColor = Color.Yellow;  
        FindRecursiveTag（tn）;  
    }  
}  
#endregion

これで、ノードを追加および削除したり、名前、テキスト、またはタグの値に基づいて特定のノードを検索したりするために必要なすべてのコードがまとめられます。

コード：フォーム2-新しいノードフォーム

New Nodeフォームで提供されるコードは、新しく作成されたノードの名前、テキスト、およびタグのプロパティを設定するために使用されるユーザー指定の値をキャプチャするためにのみ使用されます。フォームはダイアログとして表示され、ユーザーがアプリケーションのメインフォームから新しいノードの追加を要求したことに応答して表示されます。インポート、名前空間宣言、およびクラス宣言はすべて、フォームクラスのデフォルト構成にあります。

 システムを使用する;  
 System.Collections.Genericを使用する;  
 System.ComponentModelを使用します。  
 System.Dataを使用します。  
 System.Drawingを使用する;  
 System.Textを使用します。  
 System.Windows.Formsを使用する;  
名前空間 EasyTreeView  
{{  
    パブリック 部分 クラス NewNode：フォーム  
    {{

クラス宣言に続いて、3つのローカルメンバー変数が定義されます。それぞれが、ユーザー指定の名前、テキスト、およびタグのプロパティを格納するために使用されます。

#regionローカル変数  
プライベート文字列 mNewNodeName;   
プライベート文字列 mNewNodeText;   
プライベート文字列 mNewNodeTag;   
#endregion

フォームコンストラクターはデフォルト構成です。

/// <概要>  
///デフォルトのコンストラクタ  
/// </ summary>  
public  NewNode（）  
{{  
     InitializeComponent（）;  
}

コードの次の領域は、新しいノード名、テキスト、およびタグ値を保持するために使用される3つのパブリックプロパティを定義するために使用されます。ユーザーがこのフォームにこれらの値を設定すると、メインフォームはこれらのプロパティを収集し、新しいノードの名前、テキスト、およびタグのプロパティに割り当てます。

#regionクラスのプロパティ  
パブリック文字列 NewNodeName {   
    取得 {  
         mNewNodeNameを返します。  
    }  
    セット {  
        mNewNodeName =値;  
    }  
}  
パブリック文字列 NewNodeText {   
    取得 {  
         mNewNodeTextを返します。  
    }  
    セット {  
        mNewNodeText =値;  
    }  
}  
パブリック文字列 NewNodeTag {   
    取得 {  
         mNewNodeTagを返します。  
    }  
    セット {  
        mNewNodeTag =値;  
    }  
}  
#endregion

このボタンクリックイベントハンドラーは、ユーザーに3つの値すべてを設定するように強制することを目的としています。それぞれが設定されると、関連するプロパティに正しい値が渡され、フォームが閉じられます。

private void  btnSubmit_Click（object  sender、EventArgs e）{   
    if  （txtNewNodeName.Text！=  string .Empty）{  
        NewNodeName = txtNewNodeName.Text;  
    }   
    else  {  
        MessageBox.Show（"ノードに名前を付けます。" ）;  
        戻る;  
    }  
    if  （txtNewNodeText.Text！=  string .Empty）{  
        NewNodeText = txtNewNodeText.Text;  
    }   
    else  {  
        MessageBox.Show（"新しいノードのテキストを提供する" ）;  
        戻る;  
    }  
    if  （txtTag.Text！=  string .Empty）{  
        NewNodeTag = txtTag.Text;  
    }   
    else  {  
        MessageBox.Show（"新しいノードのテキストを提供する" ）;  
        戻る;  
    }  
    this .Close（）;  
}

これですべてです。このコードが実行されると、ユーザーはメインノードを右クリックして、適切と思われる数のノードと子ノードを追加できます。ユーザーは、有効な検索式を任意の検索オプションに入力して、一致するノードを強調表示するか、ツリーからノードを選択して、選択したノードから関連する名前、テキスト、タグ、および親の値を読み取ることができます。

概要

当然、TreeViewコントロールを使用する方法は無数にあり、この簡単なデモンストレーションでは、利用可能なさまざまなオプションの調査を開始していません。デモンストレーションの唯一の目的は、ノードを追加および削除する方法、選択したノードから情報を取得する方法、およびノードの名前、テキスト、およびタグ値に基づいて特定のノードを検索する方法の説明を提供することでした。

リンク：https://www.c-sharpcorner.com/

#csharp

Mathew Rini

1615544450

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
React.js and React Native have similar syntax and workflows, but their implementation is quite different.
React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

United States- $120,000
Canada - $110,000
United Kingdom - $71,820
The Netherlands $49,095
Spain - $35,423.00
France - $44,284
Ukraine - $28,990
India - $9,843
Sweden - $55,173
Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

Conduct thorough candidate research, including portfolios and areas of expertise.
Before you sit down with your interviewing panel, do some homework.
Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer