Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Github Link: https://github.com/adi501/JQuery-Examples
Step1: Open Visual studio code tool
Step4: Then go to Extensions in VS Code and install "Open in Browser" extension ass below image.
Step 1: Create asp.net Project
Step 2: Create "jsonFile.json" file and add below code
{
"status": "success",
"status_code": 200,
"product_name": "oneplus nord",
"product_details": {
"amount": 20000,
"manufacturing_year": 2020,
"manufacturing_month": "Jun",
"color": "Blue"
}
}
Step 3: create "WebForm1.aspx" page and add below code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JSON_Responce_from_Webmethod_To_Jquery_AJAX.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery/jquery-3.6.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnGetDetails" runat="server" Text="Get Details" />
<table>
<tr>
<td>Product Name:</td>
<td>
<asp:DropDownList ID="ddlProductName" runat="server">
<asp:ListItem Text="Select" Value="Select"></asp:ListItem>
<asp:ListItem Text="oneplus nord" Value="oneplus nord"></asp:ListItem>
<asp:ListItem Text="Vivo" Value="Vivo"></asp:ListItem>
<asp:ListItem Text="Moto" Value="Moto"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>Amount:</td>
<td>
<input id="txtAmount" runat="server" type="text" />
</td>
</tr>
<tr>
<td>Manufacturing Year:</td>
<td>
<asp:TextBox ID="txtManufacturing_year" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Manufacturing Month:</td>
<td>
<asp:TextBox ID="txtManufacturing_month" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>Color:</td>
<td>
<asp:TextBox ID="txtColor" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<script type="text/javascript">
$('#btnGetDetails').click(function (e) {
e.preventDefault();
//alert($("#DropDownList1 option:selected").text());
//var postData = {
// 'selectedData': $("#DropDownList1 option:selected").text()
//};
$.ajax({
type: "POST",
url: "/WebForm1.aspx/getProductDetails",
// data: JSON.stringify(postData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
$("#ddlProductName").val(r.d.product_name);
$('#txtAmount').val(r.d.product_details.amount);
$('#txtManufacturing_year').val(r.d.product_details.manufacturing_year);
$('#txtManufacturing_month').val(r.d.product_details.manufacturing_month);
$('#txtColor').val(r.d.product_details.color);
console.log(r.d.product_details);
}
});
});
</script>
</div>
</form>
</body>
</html>
Step 4: go to "WebForm1.aspx.cs" and update code.
using Newtonsoft.Json;
using System;
using System.IO;
using System.Web.Hosting;
using System.Web.Services;
namespace JSON_Responce_from_Webmethod_To_Jquery_AJAX
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// JsonResponce();
}
[WebMethod]
public static ProductRoot getProductDetails()
{
string jsonString = File.ReadAllText(HostingEnvironment.MapPath("~/jsonFile.json"));
var content = jsonString;
var jsonResult = JsonConvert.DeserializeObject(content).ToString();
var result = JsonConvert.DeserializeObject<ProductRoot>(jsonResult);
return result;
}
}
public class ProductDetails
{
public int amount;
public int manufacturing_year;
public string manufacturing_month;
public string color;
}
public class ProductRoot
{
public string status;
public int status_code;
public string product_name;
public ProductDetails product_details;
}
}
Step 5: Now go and run the application it will display like below.
Step 6: Then click on "Get Details" button. it will hi the web method then it will read .json file and it will send response to jQuery. there we are assigning data to page controls. as below image.
Github Link: https://github.com/adi501/JSON-Response-from-Webmethod-To-Jquery-AJAX
Step 1: Create .net core MVC project with Entity framework
Step 2: Create Function in SQL Server
create function funFullName(@firstName varchar(10),@lastName varchar(10))
RETURNS varchar(25)
AS
BEGIN
RETURN @firstName+' '+@lastName
END
Step 3: Add Connection in "appsettings.json" file
"ConnectionStrings": {
"SQLDB": "Server=.;Database=Dotnet_Core_MVC;Trusted_Connection=True;"
},
Step 4: Create Model class in "FuntionOutput.cs" under DBContext/Models folder
namespace Dotnet_Core_MVC.DBContext.Models
{
public class FuntionOutput
{
public string FullName { get; set; }
}
}
using Dotnet_Core_MVC.DBContext.Models;
using Microsoft.EntityFrameworkCore;
namespace Dotnet_Core_MVC.DBContext
{
public class DatabaseContext : DbContext
{
public DatabaseContext(DbContextOptions<DatabaseContext> options) : base(options)
{
}
//Funtion Call
public virtual DbSet<FuntionOutput> funFullName { get; set; }
protected override void OnModelCreating(ModelBuilder modelBuilder)
{
modelBuilder.Entity<FuntionOutput>(e => e.HasNoKey());
}
}
}
In this Article we can see .net core WebAPI methods testing with xUnit
Step 1: Create .net core WebAPI project
Step 2: Create Model with below code
using System;
namespace WebAPI.Models
{
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
}
}
ASP.Net Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="How_to_call_web_method_in_asp_net_using_jquery.aspx.cs" Inherits="WebApplication1.How_to_call_web_method_in_asp_net_using_jquery" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery/jquery-3.6.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" CssClass="DropDownList1" runat="server">
<asp:ListItem Text="Select" Value="0"></asp:ListItem>
<asp:ListItem Text="asp.net" Value="1"></asp:ListItem>
<asp:ListItem Text="c#" Value="2"></asp:ListItem>
<asp:ListItem Text="ado.net" Value="3"></asp:ListItem>
<asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
$('#DropDownList1').change(function () {
alert($("#DropDownList1 option:selected").text());
var postData = {
'selectedData': $("#DropDownList1 option:selected").text()
};
$.ajax({
type: "POST",
url: "/How_to_call_web_method_in_asp_net_using_jquery.aspx/GetDropDownSelectedData",
data: JSON.stringify(postData),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r.d);
}
});
});
</script>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList_change_event_using_jQuery_class_selector_in_ASP_net.aspx.cs" Inherits="WebApplication1.DropDownList_change_event_using_jQuery_class_selector_in_ASP_net" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery/jquery-3.6.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:DropDownList ID="DropDownList1" CssClass="DropDownListcss" runat="server">
<asp:ListItem Text="Select" Value="0"></asp:ListItem>
<asp:ListItem Text="asp.net" Value="1"></asp:ListItem>
<asp:ListItem Text="c#" Value="2"></asp:ListItem>
<asp:ListItem Text="ado.net" Value="3"></asp:ListItem>
<asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
$('.DropDownListcss').change(function () {
alert("DropDownList change() event.");
alert($(".DropDownListcss option:selected").text());
alert($(".DropDownListcss option:selected").val());
});
</script>
</div>
</div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DropDownList_Change_Event_Using_JQuery_in_ASP_net.aspx.cs" Inherits="WebApplication1.DropDownList_Change_Event_Using_JQuery_in_ASP_net" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Jquery/jquery-3.6.0.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" CssClass="DropDownList1" runat="server">
<asp:ListItem Text="Select" Value="0"></asp:ListItem>
<asp:ListItem Text="asp.net" Value="1"></asp:ListItem>
<asp:ListItem Text="c#" Value="2"></asp:ListItem>
<asp:ListItem Text="ado.net" Value="3"></asp:ListItem>
<asp:ListItem Text="SQL Server" Value="4"></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
$('#DropDownList1').change(function () {
alert("DropDownList change() event.");
alert($("#DropDownList1 option:selected").text());
alert($("#DropDownList1 option:selected").val());
});
</script>
</div>
</form>
</body>
</html>
Github link: https://github.com/adi501/react-js-example
Github link: https://github.com/adi501/react-js-example
Reactjs code snippets
How to install: https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets
Below is a list of all available snippets and
the triggers of each one. The ⇥ means the TAB key.
|
Trigger |
Content |
|
rcc→ |
class component skeleton |
|
rrc→ |
class component skeleton with
react-redux connect |
|
rrdc→ |
class component skeleton with
react-redux connect and dispatch |
|
rccp→ |
class component skeleton with prop
types after the class |
|
rcjc→ |
class component skeleton without
import and default export lines |
|
rcfc→ |
class component skeleton that
contains all the lifecycle methods |
|
rwwd→ |
class component without import
statements |
|
rpc→ |
class pure component skeleton with
prop types after the class |
|
rsc→ |
stateless component skeleton |
|
rscp→ |
stateless component with prop
types skeleton |
|
rscm→ |
memoize stateless component
skeleton |
|
rscpm→ |
memoize stateless component with
prop types skeleton |
|
rsf→ |
stateless named function skeleton |
|
rsfp→ |
stateless named function with prop
types skeleton |
|
rsi→ |
stateless component with prop
types and implicit return |
|
fcc→ |
class component with flow types
skeleton |
|
fsf→ |
stateless named function skeleton
with flow types skeleton |
|
fsc→ |
stateless component with flow
types skeleton |
|
rpt→ |
empty propTypes declaration |
|
rdp→ |
empty defaultProps declaration |
|
con→ |
class default constructor with
props |
|
conc→ |
class default constructor with
props and context |
|
est→ |
empty state object |
|
cwm→ |
componentWillMount method |
|
cdm→ |
componentDidMount method |
|
cwr→ |
componentWillReceiveProps method |
|
scu→ |
shouldComponentUpdate method |
|
cwup→ |
componentWillUpdate method |
|
cdup→ |
componentDidUpdate method |
|
cwun→ |
componentWillUnmount method |
|
gsbu→ |
getSnapshotBeforeUpdate method |
|
gdsfp→ |
static getDerivedStateFromProps
method |
|
cdc→ |
componentDidCatch method |
|
ren→ |
render method |
|
sst→ |
this.setState with object as
parameter |
|
ssf→ |
this.setState with function as
parameter |
|
props→ |
this.props |
|
state→ |
this.state |
|
bnd→ |
binds the this of method inside
the constructor |
|
disp→ |
MapDispatchToProps
redux function |
