Dot Net By Vickypedia: June 2017

Wednesday 7 June 2017

Call Other Page Using Ajax API

Let's Example :- Call other page on current page

First Page :- CallAjaxPage.aspx

Second Page :- AjaxExample.aspx

I want to call AjaxExample page on particular div of CallAjaxPage

Code of CallAjaxPage

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CallAjaxPage.aspx.cs" Inherits="VIJAYRNDWebApp.CallAjaxPage" %>

<!DOCTYPE html>

function callAjaxpaGE() {

var url = "AjaxExample.aspx";

//Pass flag,divId,pageAddress

fnCallAjaxAPI(1, 'otherPageLoad', url);

}

</script>

</head>

<body>

</div>

</form>

</body>

</html>

Code of AjaxExample

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxExample.aspx.cs" Inherits="VIJAYRNDWebApp.AjaxExample" %>

<!DOCTYPE html>

</head>

<body>

<div>

<h3>Welcome on AJAX PAGE </h3>

</div>

</form>

</body>

</html>

USING AJAX API

-----------------------------------------------------------------------------------

//Function XHConn

function XHConn() {

var xmlhttp, bComplete = false;

try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }

catch (e) {

try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }

catch (e) {

try { xmlhttp = new XMLHttpRequest(); }

catch (e) { xmlhttp = false; }

}

if (!xmlhttp) return null;

this.connect = function (sURL, sMethod, sVars, fnDone) {

if (!xmlhttp) return false;

bComplete = false;

sMethod = sMethod.toUpperCase();

try {

if (sMethod == "GET") {

xmlhttp.open(sMethod, sURL + "?" + sVars, true);

sVars = "";

}

else {

xmlhttp.open(sMethod, sURL, true);

xmlhttp.setRequestHeader("Method", "POST " + sURL + " HTTP/1.1");

xmlhttp.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

}

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState == 4 && !bComplete) {

bComplete = true;

fnDone(xmlhttp);

}

};

xmlhttp.send(sVars);

}

catch (z) { return false; }

return true;

};

return this;

}

var GetCntlrResponse = function (oXML) {

var response = oXML.responseText;

document.getElementById(CurrDivName).innerHTML = response;

};

var doAJAXCall = function (PageURL, ReqType, PostStr, FunctionName) {

var myConn = new XHConn();

if (myConn) {

myConn.connect('' + PageURL + '', '' + ReqType + '', '' + PostStr + '', FunctionName);

}

else {

alert("XMLHTTP not available. Try a newer/better browser, this application will not work!");

}

//Call Function

function fnCallAjaxAPI(flg, divName, myUrl) {

CurrDivName = divName;

var PostStr = "";

doAJAXCall(myUrl, 'POST', '' + PostStr + '', GetCntlrResponse);

}

------------------------------------------------------------------------------------------------

Insert Update Delete in MVC

For Insert

See example by using this link.

http://dotnetbyvickypedia.blogspot.in/2017/06/registration-page-using-mvc.html

For Update & Delete

--------------------

Code of View Page of Grid View Details

@model IEnumerable<VijayMVCWebApp.Models.UserNewReg>

ViewBag.Title = "UserGridList";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>UserGridList</h2>

<tr>

<th>Gender</th>

<th>EmailId</th>

<th>Password</th>

<th>MobileNo</th>

<th>Action</th>

</tr>

@foreach (var customer in Model)

{

<tr>

<td class="Name"><span>@customer.Name</span><input type="text" value="@customer.Name" style="display:none" /></td>

<td class="Gender"><span>@customer.Gender</span><input type="text" value="@customer.Gender" style="display:none" /></td>

<td class="EmailId"><span>@customer.EmailId</span><input type="text" value="@customer.EmailId" style="display:none" /></td>

<td class="Password"><span>@customer.Password</span><input type="text" value="@customer.Password" style="display:none" /></td>

<td class="MobileNo"><span>@customer.MobileNo</span><input type="text" value="@customer.MobileNo" style="display:none" /></td>

<td>

<a class="Update" href="javascript:;" style="display:none">Update</a>

<a class="Cancel" href="javascript:;" style="display:none">Cancel</a>

<a class="Delete" href="javascript:;">Delete</a>

</td>

</tr>

}

</table>

//Edit event handler.

$("body").on("click", "#tblCustomers .Edit", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

$(this).find("input").show();

$(this).find("span").hide();

}

});

row.find(".Update").show();

row.find(".Cancel").show();

row.find(".Delete").hide();

$(this).hide();

});

//Update event handler.

$("body").on("click", "#tblCustomers .Update", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

var span = $(this).find("span");

var input = $(this).find("input");

span.html(input.val());

span.show();

input.hide();

}

});

row.find(".Edit").show();

row.find(".Delete").show();

row.find(".Cancel").hide();

$(this).hide();

var customer = {};

customer.Name = row.find(".Name").find("span").html();

customer.Gender = row.find(".Gender").find("span").html();

customer.EmailId = row.find(".EmailId").find("span").html();

customer.Password = row.find(".Password").find("span").html();

customer.MobileNo = row.find(".MobileNo").find("span").html();

$.ajax({

type: "POST",

url: "/Home/UpdateCustomer",

data: '{customer:' + JSON.stringify(customer) + '}',

contentType: "application/json; charset=utf-8",

dataType: "json"

});

//Cancel event handler.

$("body").on("click", "#tblCustomers .Cancel", function () {

var row = $(this).closest("tr");

$("td", row).each(function () {

if ($(this).find("input").length > 0) {

var span = $(this).find("span");

var input = $(this).find("input");

input.val(span.html());

span.show();

input.hide();

}

});

row.find(".Edit").show();

row.find(".Delete").show();

row.find(".Update").hide();

$(this).hide();

});

//Delete event handler.

$("body").on("click", "#tblCustomers .Delete", function () {

if (confirm("Do you want to delete this row?")) {

var row = $(this).closest("tr");

var emailID = row.find(".EmailId").find("span").html();

$.ajax({

type: "POST",

url: "/Home/DeleteCustomer",

data: '{emailid: ' + emailID + '}',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

row.remove();

}

});

}

});

</script>

=================================================

Add Function in Home Controller

FOR UPDATE & DELETE

//UPDATE

-----------------------------------------------------------------------------------

[HttpPost]

public ActionResult UpdateCustomer(UserNewReg customer)

{

using (DotNetDBEntities entities = new DotNetDBEntities())

{

UserNewReg updatedCustomer = (from c in entities.UserNewRegs

where c.EmailId == customer.EmailId

select c).FirstOrDefault();

updatedCustomer.Name = customer.Name;

updatedCustomer.MobileNo = customer.MobileNo;

updatedCustomer.EmailId = customer.EmailId;

updatedCustomer.Password = customer.Password;

entities.SaveChanges();

}

return new EmptyResult();

}

--------------------------------------------------------------------------------------

DELETE

[HttpPost]

public ActionResult DeleteCustomer(string emailid)

{

using (DotNetDBEntities entities = new DotNetDBEntities())

{

UserNewReg customer = (from c in entities.UserNewRegs

where c.EmailId == emailid

select c).FirstOrDefault();

entities.UserNewRegs.Remove(customer);

entities.SaveChanges();

}

return new EmptyResult();

}

--------------------------------------------------------------------------------------

SEE OUTPUT

Monday 5 June 2017

Registration Page Using MVC

Registration Form & Bind Grid view Using MVC

Step 1st :- Use SQL Server

-- Create Table

CREATE TABLE UserNewReg

(

Name varchar(50),

Gender varchar(50),

EmailId varchar(50) primary key ,

Password varchar(50),

MobileNo varchar(50)

);

Step 2nd :- Use Visual Basic 2013

--- Create Emplty MVC Project (VijayMVCWebApp)

1--- First Create Model Class

2----Second Add Validation (UserNewReg.cs)

public partial class UserNewReg

{

[Required(ErrorMessage = "Enter Name.")]

public string Name { get; set; }

[Required(ErrorMessage = "Enter Gender.")]

public string Gender { get; set; }

[Required(ErrorMessage = "Enter Email-id.")]

[EmailAddress(ErrorMessage = "Invalid email address.")]

public string EmailId { get; set; }

[Required(ErrorMessage = "Enter Password.")]

public string Password { get; set; }

[Required(ErrorMessage = "Enter MobileNumber.")]

public string MobileNo { get; set; }

}

3---- Add Controller ("HomeContoller")

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using VijayMVCWebApp.Models;

namespace VijayMVCWebApp.Controllers

{

public class HomeController : Controller

{

// GET: Home

public ActionResult Index()

{

return View();

}

//Create Object of DataBase

DotNetDBEntities db = new DotNetDBEntities();

//For New Registration

public ActionResult NewUserAdd()

{

return View();

}

//Save New USer

[HttpPost]

public ActionResult NewUserAdd(UserNewReg emp)

{

db.UserNewRegs.Add(emp);

db.SaveChanges();

return View();

}

//Show User GridView

public ActionResult UserGridList()

{

return View(from user in db.UserNewRegs.Take(10)

select user );

//return View();

}

Note :- Create View as exaple As below Image

eg.:-Code of View(Bind Gridview) UserGridList.cshtml

@model IEnumerable<VijayMVCWebApp.Models.UserNewReg>

ViewBag.Title = "UserGridList";

Layout = "~/Views/Shared/_Layout.cshtml";

}

<h2>UserGridList</h2>

<tr>

<th>Gender</th>

<th>EmailId</th>

<th>Password</th>

<th>MobileNo</th>

</tr>

@foreach (var user in Model)

{

<tr>

<td>@user .Gender</td>

<td>@user .EmailId</td>

<td>@user .Password</td>

<td>@user .MobileNo</td>

</tr>

}

</table>

-----------------------------------------------------------------

OUTPUT

-----------------------------------------------------------------

1:- Registration form with validation

2:-User Bind Gridview

Dot Net By Vickypedia

Wednesday 7 June 2017

Call Other Page Using Ajax API

Call Other Page Using Ajax API

Code of CallAjaxPage

Code of AjaxExample

Insert Update Delete in MVC

Insert Update Delete in MVC

For Insert

For Update & Delete

Code of View Page of Grid View Details

Add Function in Home Controller

Monday 5 June 2017

Registration Page Using MVC

Registration Form & Bind Grid view Using MVC

--- Create Emplty MVC Project (VijayMVCWebApp)

1--- First Create Model Class

2----Second Add Validation (UserNewReg.cs)

3---- Add Controller ("HomeContoller")

eg.:-Code of View(Bind Gridview) UserGridList.cshtml

Factorial of a Number

Recently Viewed