Adi Dotnet

29 December 2021

How to check a class exists on page or on html element

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <div class="div1">
      div 1
    </div>
    <div>div 2</div>
    <button>Check div1 Class exist or not</button>
    <script type="text/javascript">
      $("button").click(function () {
        var div1Class = $("div").hasClass("div1");
        alert(div1Class);
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to Get Selected Radio Button Value in jQuery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <input type="radio" name="StuName" class="clsStu" value="adi" /> Adi
    <input type="radio" name="StuName" class="clsStu" value="pavan" /> Pavan
    <input type="radio" name="StuName" class="clsStu" value="madhan" /> Madhan
    <input type="radio" name="StuName" class="clsStu" value="nani" /> Nani
    <input type="radio" name="StuName" class="clsStu" value="balu" /> Balu
    <button>Get Value</button>
    <script type="text/javascript">
      $("button").click(function () {
        var val = $(".clsStu:checked").val();
        alert(val);
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

Iterate Array of Objects using Jquery each function

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(document).ready(function () {
        var obj= [
          { FName: "Adi" , LName:"JC"},
          { FName: "Pavan" , LName:"JC"},
          { FName: "Madhan" , LName:"JC"},
          { FName: "Yagnesh" , LName:"JC"}
        ]
   $.each(obj, function (index, value) {
          console.log(value.FName+" "+value.LName);
   });
      });
    </script>
  </head>
  <body></body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

Iterate array elements using Jquery each function

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(document).ready(function () {
        var arrNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        $.each(arrNumber, function (index, value) {
          console.log(index + " : " + value);
        });
      });
    </script>
  </head>
  <body></body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

28 December 2021

Allow numeric values with decimal in Jquery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <table>
      <tr>
        <td><strong>Decimal :</strong></td>
        <td>
          <input type="text" name="numeric" class="allow_decimal" />
          <div>Allow numeric values with decimal</div>
        </td>
      </tr>
    </table>
    <script>
      $(document).ready(function () {
        $(".allow_decimal").on("input", function (evt) {
          var self = $(this);
          self.val(self.val().replace(/[^0-9\.]/g, ""));
          if (
            (evt.which != 46 || self.val().indexOf(".") != -1) &&
            (evt.which < 48 || evt.which > 57)
          ) {
            evt.preventDefault();
          }
        });
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

Allow only numbers in Textbox in Jquery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
  </head>
  <body>
    <table>
      <tr>
        <td><strong>Int value:</strong></td>
        <td>
          <input type="text" name="numeric" class="allow_numeric" />
          <div>It will Allow only numeric values</div>
        </td>
      </tr>
    </table>
    <script>
      $(document).ready(function () {
        $(".allow_numeric").on("input", function (evt) {
          var self = $(this);
          self.val(self.val().replace(/\D/g, ""));
          if (evt.which < 48 || evt.which > 57) {
            evt.preventDefault();
          }
        });
      });
    </script>
  </body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to Remove Value from Array using Jquery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(document).ready(function () {
        var arrNumber = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12]; 
        var removeValue = 2; 
        arrNumber = $.grep(arrNumber, function (n) {
          return n != removeValue;
        });
        alert(arrNumber);
      });
    </script>
  </head>
  <body></body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to Check if Value Exists In Array or Not using Jquery

<!DOCTYPE html>
<html>
  <head>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      $(document).ready(function () {
        var arrStu = ["adi", "pavan", "madhan", "yagnesh"];
        if ($.inArray("adi", arrStu) >= 0) {
         alert("Value exists");
        } else {
            alert("Value Not exists");
        }
      });
    </script>
  </head>
  <body></body>
</html>

Github Link: https://github.com/adi501/JQuery-Examples

How to view an HTML file in the browser with Visual Studio Code

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.

Step5: After install then go to HTML file and right click on code and we will get "Open in Default Browser" option. then select that. it will show your html file output in browser.

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>

</head>

<body>

<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>

</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>

$('#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)

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>

</head>

<body>

<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>

$('#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>

</head>

<body>

<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>

$('.DropDownListcss').change(function () {

alert("DropDownList change() event.");

alert($(".DropDownListcss option:selected").text());

alert($(".DropDownListcss option:selected").val());

});

</script>

</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>

</head>

<body>

<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>

$('#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

Pages

29 December 2021

How to check a class exists on page or on html element

How to Get Selected Radio Button Value in jQuery

Iterate Array of Objects using Jquery each function

Iterate array elements using Jquery each function

28 December 2021

Allow numeric values with decimal in Jquery

Allow only numbers in Textbox in Jquery

How to Remove Value from Array using Jquery

How to Check if Value Exists In Array or Not using Jquery

How to view an HTML file in the browser with Visual Studio Code

17 December 2021

JSON format data responce from webmethod to jquery AJAX and display in asp.net controls

10 December 2021

Call a SQL function in Entity Framework Core

.net core WebAPI methods testing with xUnit

6 December 2021

How to call web method in asp.net using jquery

5 December 2021

DropDownList change event using jQuery class selector in ASP.net

DropDownList change event using jQuery in ASP.net

Popular Posts

Labels