Step1: Open Visual studio code tool
Step2: Click on Open folder and select HTML files folder
Step3: Then open HTML file "TestFile.html" from folder
Step4: Then go to Extensions in VS Code and install "Open in Browser" extension ass below image.
28 December 2021
How to view an HTML file in the browser with Visual Studio Code
Step2: Click on Open folder and select HTML files folder
Step3: Then open HTML file "TestFile.html" from folder
17 December 2021
JSON format data responce from webmethod to jquery AJAX and display in asp.net controls
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
10 December 2021
Call a SQL function in Entity Framework Core
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; }
}
}
Step 5: Create class in "DatabaseContext.cs" under DBContext folder
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());
}
}
}
Step 6: Create Controller "Call_A_SQL_FunctionController.cs" and call the SQL Function ass below code.
using Dotnet_Core_MVC.DBContext;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using System.Linq;
namespace Dotnet_Core_MVC.Controllers
{
public class Call_A_SQL_FunctionController : Controller
{
private readonly DatabaseContext _databaseContext;
public Call_A_SQL_FunctionController(DatabaseContext databaseContext)
{
this._databaseContext = databaseContext;
}
public IActionResult Index()
{
ViewBag.functionOutput= _databaseContext.funFullName.FromSqlInterpolated($"select dbo.funFullName('adi','jc') as FullName").FirstOrDefault().FullName;
return View();
}
}
}
Step 7: Create View and add below code.
<h5>Function Output:</h5>@ViewBag.functionOutput
Step 8: Open "Startup.cs" class and update "ConfigureServices" method as below.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
var ConnectionString = Configuration.GetConnectionString("SQLDB");
//Entity Framework
services.AddDbContext<DatabaseContext>(options => options.UseSqlServer(ConnectionString));
}
Output:
Github Code: https://github.com/adi501/Dotnet_Core_MVC
.net core WebAPI methods testing with xUnit
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; }
}
}
Step 3: Create WebAPI Control with below code
using Microsoft.AspNetCore.Mvc;
using WebAPI.Models;
namespace WebAPI.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class StudentController : ControllerBase
{
[HttpPost]
public ActionResult<string> CreateStudent(Student obj)
{
// you code here
return "Data inserted successfully";
}
}
}
Step 4: Build the WebApi Project
Step 5: Create .net core xUnit Project.
Step 6: Create UnitTest class and add below code
using Microsoft.AspNetCore.Mvc;
using WebAPI.Controllers;
using WebAPI.Models;
using Xunit;
namespace XUnitProject
{
public class UnitTest1
{
[Theory]
[InlineData(1, "Student 1", "Email1", "Data inserted successfully")]
[InlineData(2, "Student 2", "Email2", "Data inserted successfully")]
[InlineData(3, "Student 3", "Email3", "Data inserted successfully")]
[InlineData(4, "Student 4", "Email4", "Data inserted successfully")]
public void Test1(int Id, string Name, string Email, string ExpectedResult)
{
Student objStudent = new Student();
objStudent.Id = Id;
objStudent.Name = Name;
objStudent.Email = Email;
StudentController objStudentController = new StudentController();
ActionResult<string> actionResult = objStudentController.CreateStudent(objStudent);
string result = actionResult.Value;
Assert.Equal(ExpectedResult, result);
}
}
}
Step 7: Right click on Test Method and select "Run Test(s)"
Output:
Github Code: https://github.com/adi501/xunit_on_dotnet_core_web_api
6 December 2021
How to call web method in asp.net using jquery
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>
C# Code:
using System;
using System.Web.Services;
namespace WebApplication1
{
public partial class How_to_call_web_method_in_asp_net_using_jquery : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetDropDownSelectedData(string selectedData)
{
//you can write you code here
return selectedData;
}
}
}
Github Line: https://github.com/adi501/Asp-net-Examples
5 December 2021
DropDownList change event using jQuery class selector in ASP.net
<%@ 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>
Github Line: https://github.com/adi501/Asp-net-Examples
DropDownList change event using jQuery in ASP.net
<%@ 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 Line: https://github.com/adi501/Asp-net-Examples
3 December 2021
Ternary operator example in react js
import React from "react";
function TernaryOperatorEXP2(props) {
const status=1
return (
<div>
<div>
<h1>Ternary operator example in react js</h1>
</div>
<button> {status === 1 ? "Active" : "DeActive"} </button>
</div>
);
}
export default TernaryOperatorEXP2;
Github link: https://github.com/adi501/react-js-example
substring function in react js
import React from 'react';
function SubstringEXP(props) {
var str = "Hello world, react js SubString example";
return (
<div>
<div><h1>SubString example</h1></div>
{str.substring(0,10)}
</div>
);
}
export default SubstringEXP;
Github link: https://github.com/adi501/react-js-example
Reactjs code snippets
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 |
Convert String to Number in react js
import React from 'react';
function ConvertStringToNumber(props) {
const num="2000";
return (
<div>
<div><h1>Convert String to Number</h1></div>
{Number(num)}
</div>
);
}
export default ConvertStringToNumber;
Github link: https://github.com/adi501/react-js-example
Subscribe to:
Posts (Atom)