Jquery Select and Change selector and event .How to Post data using jquery to mvc and web api action methods

Jquery :Change event in Jquery Method:

Demo

    $("#drpCountry").change(function () {
            var id = $("#DrpCountry").val();
           alert(id);
        });
HTML

  <select id="drpCountry">

        <option value="">SELECT</option>

        <option value="USA">America</option>

        <option value="RSA">Russia</option>

        <option value="JPN">Japan</option>

    </select>

Jquery :selected Selector

In the below demo jQuery :selected selector to find the selected option value in the dropdown list.

  if ($('#drpCountry:selected').val() == "") {
        alert("Please select the Country Name);
    }

HTML

  <select id="drpCountry">

        <option value="">SELECT</option>

        <option value="USA">America</option>

        <option value="RSA">Russia</option>

        <option value="JPN">Japan</option>

    </select>

How to Post value to  mvc Action method using jquery .
or
How to Post values to Web API action method  using jquery .

Example

function DeleteUsers(userId) {

    $.ajax({
        type: 'POST',
        url: urlString + 'User/DeleteUser/',
        data: { UID: userId },
        success: function (data) {
         alert("Data SuccessFully Deleted");

        },
        error: function (xhr, ajaxOptions, thrownError) {
            //ON Error
            alert(xhr.status);

        }

    });
}

Step up Angular 2 Environment in your visual studio Application.

Step up Angular 2 Environment in your visual studio solutions.

Due to the huge demand of the angular 2 in the IT industry .Due to hectic pressure and more results in shorter time is every company demands. Angular 2 in it self is little bit complex as compared to its previous version .

 Angular 2 Installing Requirements.

1         1.       Visual studio 2015 update 3. 

           2.       Install Node package manager(NPM).

           3.       Install TypeScript. 

           4.       Create new solution in Visual studio 2015 update 3. Open node package manager command prompt .And run "npm install" command.  

        5.       And after successful completion of the above command .This will create four files in your application.

·         Package.json

·         system.js.config.js

·         tsconfig.json

·         typings.json.

tsconfig.json  : tsconfig.json file is used by typescript compiler for typescript configuration  settings. It is recommended to create at the root of your application.

Add below line in your json file.

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": false,

    "suppressImplicitAnyIndexErrors": true,

    "noStrictGenericChecks": true,

     "lib": [ "es2015", "dom", "scripthost" ],

    "typeRoots": [

      "node_modules/@types"

    ],

    "types": []

  },

  "exclude": [

    "wwwroot",

    "typings"

  ]

}

typings.json : This file is used to run the javascript ,jasmine and node pacakges.

For this Please install core-js ,jasmine and node packages under node_modules. 

6.       Create Startup.ts in your root of your application.

Below is the sample code of the startup.ts file.In this file we have mentioned starting module which gets run when our application launched first time.

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { EmployeeAppModule } from './Modules/EmpApp.module';

import { environment } from './Client/Modules/app-config.module';

import { enableProdMode } from '@angular/core';

const platform = platformBrowserDynamic();

enableProdMode();

platform.bootstrapModule(EmployeeAppModule);

    7.       systemjs.config.js: In this file we add all third-party library/packages references.

In this file we store the location of all angular 2 packages and third-party packages.

How to Pass Data from Controller to View in MVC.

How to Pass Data from Controller to View in MVC.

·         ViewData.

·         ViewBag.

·         TempData.

ViewData.

It is a Dictionary object. While retrieving data, the data needs to be Type Cast . ViewData is available only for single Requests. Value gets lost in redirection.

Example 1

1.       Set/Initialize the values you want to pass to view inside the controller action method.

public ActionResult Employee() {

  ViewData["EmpName"] = "Rohit!";

  return View();

 }

2.       Read set value in html.

3.  <html>

4.  <body>

5.   <div>

6.    @ViewData["EmpName"]

7.    </div>

8.   </body>

9.  </html>

Example 2

public ActionResult EmployeeList() {

List<EmployeeModel> empList= new List<EmployeeModel>();

  ViewData["EmpList"] = empList;

  return View();

 }

1.       Read set value in html.

2.  <html>

3.  <body>

4.   <div>

5.    

6.  <ul>

7.  @foreach (var emp in ViewData["EmpList"] as List<EmployeeModel> )

8.  {

9.      <li>

10.        @emp.Name

11.    </li>

12.}

13.</ul>

14.  </div>

15. </body>

16.</html>