How to validate a field while updating table in jquery

Question

 

//class Library studentmodel 

//class name ModelStudentMarks

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace StudentMarks.Models

{

public class ModelStudentMarks

{

public int ID { get; set; }

public string Name { get; set; }

public string RollNumber { get; set; }

public string MobileNumber { get; set; }

public string Address { get; set; }

public Decimal Marks { get; set; }

public List<ModelStudentMarks> GetstudentList { get; set; }

}

}

//

StudentMarksDL.DataLayer

class name-DbHandler 

using StudentMarks.Models;

using System;

using System.Collections.Generic;

using System.Data.SqlClient;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace StudentMarksDL.DataLayer

{

public class StudentMarksDl

{

DbHandler db = new DbHandler();

public void Insert_update_del(ModelStudentMarks stdMarks)

{

try

{

SqlParameter[] spcol = null;

spcol = new SqlParameter[]

{

new SqlParameter("@id",stdMarks.ID),

new SqlParameter("name",stdMarks.Name),

new SqlParameter("@mobilenumber",stdMarks.MobileNumber),

new SqlParameter("@rollnumber",stdMarks.RollNumber),

new SqlParameter("@address",stdMarks.Address),

new SqlParameter("@marks",stdMarks.Marks)

};

if (spcol == null) return;

db.Insert_update("sp_InsertUpdateMarks", spcol);

}

catch(Exception ex)

{ throw ex; }

}

public void Delete(int id)

{

try

{

SqlParameter[] spcol = null;

spcol = new SqlParameter[]

{

new SqlParameter("@id",id),

};

if (spcol == null) return;

db.Delete("sp_DeleteStdMarks", spcol);

}

catch (Exception ex)

{ throw ex; }

}

public List<ModelStudentMarks> StudentMarksList(ModelStudentMarks stdMarks)

{

try

{

List<ModelStudentMarks> objlist = new List<ModelStudentMarks>();

SqlParameter[] spcol = null;

if (stdMarks != null)

{

spcol = new SqlParameter[]

{

new SqlParameter("@id",stdMarks.ID),

};

}

else

{ spcol = null; }

objlist = db.StudentMarksList("sp_GetStdMarksList", spcol);

return objlist;

}

catch(Exception ex)

{

throw ex;

}

}

}

}

//class name-DbHandler

 

 //StudentMarksBL.BuisnessLayer

classname-StudentMarksBl

 

using StudentMarks.Models;

using StudentMarksDL.DataLayer;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Threading.Tasks;

namespace StudentMarksBL.BuisnessLayer

{

public class StudentMarksBl

{

StudentMarksDl objstdmarksbl = new StudentMarksDl();

public void Insert_update_del(ModelStudentMarks stdMarks)

{

try

{

objstdmarksbl.Insert_update_del(stdMarks);

}

catch(Exception ex)

{

throw ex;

}

}

public void Delete(int id)

{

try

{

objstdmarksbl.Delete(id);

}

catch (Exception ex)

{

throw ex;

}

}

public List<ModelStudentMarks> StudentMarksList(ModelStudentMarks stdMarks)

{

try

{

List<ModelStudentMarks> objlist = new List<ModelStudentMarks>();

objlist = objstdmarksbl.StudentMarksList(stdMarks);

return objlist;

}

catch(Exception ex)

{

throw ex;

}

}

}

}

StudentMarks

controller-StudentController

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using StudentMarks.Models;

using StudentMarksBL.BuisnessLayer;

namespace StudentMarks.Controllers

{

public class StudentController : Controller

{

StudentMarksBl objstdbl = new StudentMarksBl();

// GET: Student

public ActionResult Index()

{

ModelStudentMarks objlist = new ModelStudentMarks();

objlist.GetstudentList = objstdbl.StudentMarksList(null);

return View( objlist);

}

[HttpPost]

public ActionResult UpdateCustomer(ModelStudentMarks ModelStudentMarks)

{

try

{

objstdbl.Insert_update_del(ModelStudentMarks);

}

catch(Exception ex)

{ throw ex; }

return new EmptyResult();

}

[HttpPost]

public JsonResult InsertCustomer(ModelStudentMarks ModelStudentMarks)

{

try

{

objstdbl.Insert_update_del(ModelStudentMarks);

}

catch (Exception ex)

{ throw ex; }

return Json(ModelStudentMarks);

}

[HttpPost]

public ActionResult DeleteMarks(int customerId)

{

try

{

objstdbl.Delete(customerId);

}

catch (Exception ex)

{ throw ex; }

return new EmptyResult();

}

}

}

 

view- Index

@model StudentMarks.Models.ModelStudentMarks

@{

Layout = null;

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>Index</title>

</head>

<body>

<table id="tblStudent" class="table" cellpadding="0" cellspacing="0">

<tr><th style="width:60px;display:none">ID</th>

<th style="width:60px">Name</th>

<th style="width:80px">Address</th>

<th style="width:80px">RollNumber</th>

<th style="width:80px">MobileNumber</th>

<th style="width:80px">Marks</th>

<th style="width:80px">Action</th>

<th></th>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td>

<td>&nbsp;</td><td>&nbsp;</td>

</tr>

@foreach (var items in Model.GetstudentList)

{

<tr>

<td class="ID" style="display:none">

<span>@items.ID</span>

</td>

<td class="Name">

<span>@items.Name</span>

<input type="text" value="@items.Name" style="display:none" />

</td>

<td class="Address">

<span>@items.Address</span>

<input type="text" value="@items.Address" style="display:none" />

</td>

<td class="RollNumber">

<span>@items.RollNumber</span>

<input type="text" value="@items.RollNumber" style="display:none" />

</td>

<td class="MobileNumber">

<span>@items.MobileNumber</span>

<input type="text" value="@items.MobileNumber" style="display:none" />

</td>

<td class="Marks">

<span>@items.Marks</span>

<input type="text" id="txtmark" value="@items.Marks" style="display:none" />

</td>

<td>

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

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

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td style="width: 150px">

Name<br />

<input type="text" id="txtName" style="width:140px" />

</td>

<td style="width: 150px">

Address:<br />

<input type="text" id="txtAddress" style="width:140px" />

</td>

<td style="width: 150px">

MobileNumber:<br />

<input type="text" id="txtMobileNumber" style="width:140px" />

</td>

<td style="width: 150px">

RollNumber:<br />

<input type="text" id="txtRollNumber" style="width:140px" />

</td>

<td style="width: 150px">

Marks:<br />

<input type="text" id="txtMarks" style="width:140px" />

</td>

<td style="width: 200px">

<br />

<input type="button" id="btnAdd" value="Add" />

</td>

</tr>

</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

<script type="text/javascript">

$(document).ready(function () {

//called when key is pressed in textbox

$("#txtMarks").keypress(function (e) {

debugger;

//if the letter is not digit then display error and don't type anything

if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

//display error message

alert("Field Value Should be numeric");

return false;

}

});

$("#txtMark").keypress(function (e) {

debugger;

//if the letter is not digit then display error and don't type anything

if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {

//display error message

alert("Field Value Should be numeric");

return false;

}

});

});

function Validate() {

debugger;

var txtName = $("#txtName");

var txtAddress = $("#txtAddress");

var txtMobilenumber = $("#txtMobileNumber");

var txtRollNumber = $("#txtRollNumber");

var txtMarks = $("#txtMarks");

if (txtName.val() == "") {

alert("Enter name please")

return false;

}

if (txtAddress.val() == "") {

alert("Enter address please")

return false

}

if (txtMobilenumber.val() == "") {

alert("Enter MobileNumber please")

return false

}

if (txtRollNumber.val() == "") {

alert("Enter RollNumber please")

return false

}

if (txtMarks.val() == "") {

alert("Enter Marks please")

return false

}

var filter = /^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/;

var phoneNumber = txtMobilenumber.val();

if (filter.test(phoneNumber)) {

if (phoneNumber.length == 10) {

var validate = true;

} else {

alert('Please put 10 digit Mobile Number'); return false;

//var validate = false;

}

}

else {

alert('Not a valid Mobile Number'); return false;

//var validate = false;

}

//var number = $('#txtmark').val();

//if (isNaN(number)) {

// alert("only number");

// return false;

//}

}

$(function () {

//Remove the dummy row if data present.

if ($("#tblStudent tr").length > 2) {

$("#tblStudent tr:eq(1)").remove();

}

});

function AppendRow(row, Id, name, address,mobilenumber,rollnumber,marks) {

//Bind CustomerId.

$(".Id", row).find("span").html(Id);

//Bind Name.

$(".Name", row).find("span").html(name);

$(".Name", row).find("input").val(name);

//Bind Country.

$(".Address", row).find("span").html(address);

$(".Address", row).find("input").val(address);

$(".MobileNumber", row).find("span").html(mobilenumber);

$(".MobileNumber", row).find("input").val(mobilenumber);

$(".RollNumber", row).find("span").html(rollnumber);

$(".RollNumber", row).find("input").val(rollnumber);

$(".Marks", row).find("span").html(marks);

$(".Marks", row).find("input").val(marks);

$("#tblStudent").append(row);

};

//Add event handler.

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

debugger;

var txtName = $("#txtName");

var txtAddress = $("#txtAddress");

var txtMobilenumber = $("#txtMobileNumber");

var txtRollNumber = $("#txtRollNumber");

var txtMarks = $("#txtMarks");

return Validate();

$.ajax({

type: "POST",

url: "/Student/InsertCustomer",

data: '{Name: "' + txtName.val() + '", Address: "' + txtAddress.val() + '" ,MobileNumber: "' + txtMobilenumber.val() + '",RollNumber: "' + txtRollNumber.val() + '",Marks: "' + txtMarks.val() + '"}',

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

dataType: "json",

success: function (r) {

debugger

var row = $("#tblStudent tr:last-child").clone(true);

AppendRow(row, r.Id, r.Name, r.Address, r.MobileNumber, r.RollNumber, r.Marks);

txtName.val(""); txtAddress.val(""); txtMobilenumber.val(""); txtRollNumber.val(""); txtMarks.val("");

//txtCountry.val("");

}

});

});

//Edit event handler.

$("body").on("click", "#tblStudent .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", "#tblStudent .Update", function () {

debugger;

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();

return Validate();

var ModelStudentMarks = {};

ModelStudentMarks.Id = row.find(".ID").find("span").html();

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

ModelStudentMarks.RollNumber = row.find(".RollNumber").find("span").html();

ModelStudentMarks.MobileNumber = row.find(".MobileNumber").find("span").html();

ModelStudentMarks.Address = row.find(".Address").find("span").html();

ModelStudentMarks.Marks = row.find(".Marks").find("span").html();

$.ajax({

type: "POST",

url: "/Student/UpdateCustomer",

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

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

dataType: "json"

});

});

//Cancel event handler.

$("body").on("click", "#tblStudent .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", "#tblStudent .Delete", function () {

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

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

var customerId = row.find("span").html();

$.ajax({

type: "POST",

url: "/Student/DeleteMarks",

data: '{customerId: ' + customerId + '}',

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

dataType: "json",

success: function (response) {

row.remove();

}

});

}

});

</script>

</body>

</html>