Scribd
Upload
32 views

Codes

The document contains code for a customer management application. It includes JavaScript code to validate form fields on submission, make AJAX calls to add/update customer data, and populate dropdowns by retrieving state and beat data. The HTML includes form fields to capture customer details like name, mobile number, address etc.

Uploaded by

Harsh Pravin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
32 views

Codes

The document contains code for a customer management application. It includes JavaScript code to validate form fields on submission, make AJAX calls to add/update customer data, and populate dropdowns by retrieving state and beat data. The HTML includes form fields to capture customer details like name, mobile number, address etc.

Uploaded by

Harsh Pravin
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 11

@{

ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></
script>

@{
var View = (List<CustomerManagments.Models.Data>)ViewData["View"];
var GetState = (List<CustomerManagments.Models.Data>)ViewData["GetState"];
var GetDist = ViewData["GetDist"] as List<CustomerManagments.Models.Data>;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></
script>
<script type="text/javascript">

//$(document).ready(function () {
// // Function to show/hide the additional text boxes for Wholesaler option
// $("#txtCustomerType").change(function () {
// var customerType = $(this).val();
// var wholesalerFields = $("#wholesalerFields");

// if (customerType === "Wholesaler") {


// wholesalerFields.show();
// } else {
// wholesalerFields.hide();
// }
// });
//});

function AddData() {
// Perform validation
var name = $("#txtShopname").val();
var mobile = $("#txtMobile").val();
var customerType = $("#txtCustomerType").val();
var beatCode = $("#txtBeatCode").val();
var callFrequency = $("#txtCallFrequency").val();
var district = $("#txtDistrict").val();
var city = $("#txtCity").val();
var state = $("#txtState").val();

if (name === "") {


alert("Please enter a name.");
return;
}

if (mobile === "") {


alert("Please enter a mobile number.");
return;
}
if (!/^\d{10}$/.test(mobile)) {
alert("Please enter a correct mobile number.");
return;
}
if (/(\d)\1{6}/.test(mobile)) {
alert("Please enter a correct mobile number.");
return;
}
if (!/^[7896]\d{9}$/.test(mobile)) {
alert("Please enter a correct mobile number .");
return;
}
if (customerType === "") {
alert("Please enter a CustomerType.");
return;
}
if (beatCode === "") {
alert("Please enter a BeatCode.");
return;
}
if (callFrequency === "") {
alert("Please enter a CallFrequency.");
return;
}
if (!/^\d+$/.test(callFrequency)) {
alert("CallFrequency should contain only numbers.");
return;
}
if (district === "") {
alert("Please enter a District.");
return;
}
if (city === "") {
alert("Please enter a City.");
return;
}
if (state === "") {
alert("Please enter a State.");
return;
}

// If validation passes, make the AJAX call


$.ajax({
url: "/CM/AddData",
type: "POST",
data: $("#User").serialize(),
success: function (response) {
alert(response);
if (response === "CSM Approval") {
$("#status_" + response[0].TempCustomerId).text("Approved
with CSM");
} else {
$("#status_" + response[0].TempCustomerId).text("Pending
with CSM");
}
}
});
}

function GetAll(TempCustomerId) {
$.ajax({
url: "/CM/View",
type: "GET",
data: { TempCustomerId: TempCustomerId },
success: function (response) {
$("#TempCustomerId").val(response[0].TempCustomerId);
$("#txtShopname").val(response[0].ShopName);
$("#txtMobile").val(response[0].Mobile);
$("#txtCustomerType").val(response[0].CustomerType);
$("#txtBeatCode").val(response[0].BeatCode);
$("#txtCallFrequency").val(response[0].CallFrequency);
$("#txtDistrict").val(response[0].District);
$("#txtCity").val(response[0].City);
$("#txtState").val(response[0].State);
$
("#txtAverageBusinessLink").val(response[0].AverageBusinessLink);
$
("#txtWholesalerDistributors").val(response[0].WholesalerDistributors);
$
("#txtInteriorMarketName").val(response[0].txtInteriorMarketName);

$("#btnsave").hide();
$("#btnupdate").show();

$('html,body').animate({
scrollTop: $("#User").offset().top
}, 1000);
}
});
}
//function GetDistribtours(EmployeeID) {
// $.ajax({
// url: "/CM/GetDistribtours",
// type: "GET",
// data: { EmployeeID: EmployeeID },
// success: function (response) {
// $("#EmployeeID").val(response[0].EmployeeID);
// var customerType = $(this).val();
// var wholesalerFields = $("#wholesalerFields");
// var AverageBusinessLink = $("txtAverageBusinessLink");
// var InteriorMarketName = $("txtInteriorMarketName");
// var WholesalerDistributors = $("txtWholesalerDistributors");

// if (customerType === "Wholesaler") {


// wholesalerFields.show();
// } else {
// wholesalerFields.hide();
// }

// $('html,body').animate({
// scrollTop: $("#User").offset().top
// }, 1000);
// }
// });
//}

$(document).ready(function () {
$.ajax({
url: '@Url.Action("GetBeats", "CM")',
type: 'GET',
dataType: 'json',
data: { employeeID: 22 },
success: function (data) {
var dropdown = $('#txtBeatCode');
$.each(data, function (index, beat) {

dropdown.append($('<option></option>').val(beat.BeatName).text(beat.MergedValue));
});
}
});
});
$(document).ready(function () {
$.ajax({
url: '/CM/GetState', // Replace with the correct URL to fetch the
states
type: 'GET',
dataType: 'json',
success: function (data) {
var dropdown = $('#txtState');
$.each(data, function (index, state) {

dropdown.append($('<option></option>').val(state.StateName).text(state.StateName));
});
}
});
});
$(document).ready(function () {
$.ajax({
url: '/CM/GetDist',
type: 'GET',
dataType: 'json',
data: { employeeID: 22 },
success: function (data) {
var dropdown = $('#txtLinkDistributors');
$.each(data, function (index, beat) {

dropdown.append($('<option></option>').val(beat.CustomerType).text(beat.CustomerTyp
e));
});
}
});
});

function Getstatus(UserID) {
$.ajax({
url: "/CM/View",
type: "GET",
data: { UserID: UserID },
success: function (response) {
$("#TempCustomerId").val(response[0].TempCustomerId);
$("#txtShopname").val(response[0].ShopName);
$("#txtMobile").val(response[0].Mobile);
$("#txtCustomerType").val(response[0].CustomerType);
$("#txtBeatCode").val(response[0].BeatCode);
$("#txtCallFrequency").val(response[0].CallFrequency);
$("#txtDistrict").val(response[0].District);
$("#txtCity").val(response[0].City);
$("#txtState").val(response[0].State);
$("#txtAverageBusinessLink").val(response[0].AverageBusinessLink);
$
("#txtWholesalerDistributors").val(response[0].WholesalerDistributors);
$("#txtInteriorMarketName").val(response[0].txtInteriorMarketName);

$("#btnsave").hide();
$("#btnupdate").show();

$('html,body').animate({
scrollTop: $("#User").offset().top
}, 1000);
}
});
}

</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}

h1 {
text-align: center;
margin-top: 16px;
color: #000000;
}

form {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

input[type="text"],
select {
width: 100%;
padding: 10px;
background-color: #f2f2f2;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}

th,
td {
border: 1px solid #ccc;
padding: 8px;
}

th {
background-color: rgba(0, 0, 0, 0.1);
}

.viewbtn {
padding: 5px 10px;
background-color: #428bca;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div>
<div align="center">
<h1>CUSTOMER ADDITION</h1>
<form id="User">
<input type="text" id="EmployeeID" name="EmployeeID"
style="display:none" />
<input type="text" id="TempCustomerId" name="TempCustomerId"
style="display: none" />

ShopName:
<input type="text" id="txtShopname" name="txtShopname"
placeholder="Enter your Shopname" /><br><br>
<label for="txtShopname" class="col-sm-6" id="lblname"
name="lblname"></label><br /><br />

Mobile:
<input type="text" id="txtMobile" name="txtMobile"
placeholder="Enter your Mobile" /><br><br>
<label for="txtMobile" class="col-sm-6" id="lblMobile"
name="lblMobile"></label><br /><br />
CustomerType:
<select id="txtCustomerType" name="txtCustomerType">
<option value="" id="wholesalerFields">Select Customer
Type</option>
<option value="Wholesaler"
id="wholesalerFields">Wholesaler</option>
<option value="Retailer">Retailer</option>
</select><br>
<label for="txtCustomerType" class="col-sm-6"
id="lblCustomerType"></label><br /><br />

Link Distributors:

<select id="txtLinkDistributors" name="txtLinkDistributors">

<option value=""> </option>

@foreach (var item in GetDist)

<option value="@item.CustomerType">@item.CustomerType</option>

</select>
<label for="txtLinkDistributors" class="col-sm-6"
id="lblWholesalerDistributors" name="lblWholesalerDistributors"></label><br
/><br />

Average Business Link:


<input type="text" id="txtAverageBusinessLink"
name="txtAverageBusinessLink" placeholder="Enter Average Business Link" /><br /><br
/>
<label for="txtAverageBusinessLink" class="col-sm-6"
id="lblAverageBusinessLink" name="lblAverageBusinessLink"></label><br /><br />

Interior Market Name:


<input type="text" id="txtInteriorMarketName"
name="txtInteriorMarketName" placeholder="Enter Interior Market Name" /><br
/><br />
<label for="txtInteriorMarketName" class="col-sm-6"
id="lblInteriorMarketName" name="lblInteriorMarketName"></label><br /><br />

BeatCode:
<select id="txtBeatCode" name="txtBeatCode">
<option value="">Select BeatCode</option>

</select>
<label for="txtBeatCode" class="col-sm-6"
id="lblBeatCode"></label><br /><br />

Call Frequency:
<input type="text" id="txtCallFrequency" name="txtCallFrequency"
placeholder="Enter your CallFrequency" /><br><br>
<label for="txtCallFrequency" class="col-sm-6"
id="lblCallFrequency"></label><br /><br />
District:
<input type="text" id="txtDistrict" name="txtDistrict"
placeholder="Enter your District" /><br><br>
<label for="txtDistrict" class="col-sm-6"
id="lblDistrict"></label><br /><br />

City:
<input type="text" id="txtCity" name="txtCity" placeholder="Enter
your City" /><br><br>
<label for="txtCity" class="col-sm-6" id="lblCity"></label><br
/><br />

State:
<select id="txtState" name="txtState" placeholder="Enter your
State">
<option value="">State</option>
@foreach (var item in GetState)
{
<option value="@item.StateName">@item.StateName</option>
}

</select>
<label for="txtState" class="col-sm-6" id="lblState"></label><br
/><br />

<button type="button" onClick="AddData();"


id="btnsave">SUBMIT</button>
<button type="reset">CANCEL</button>

</form>
</div>
</div>
<table align="center" border="6">
<thead>
<tr>
<th>Date of Request</th>
<th>Customer Name</th>
<th>Mobile</th>
<th>Customer Type</th>
<th>BeatCode</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
@foreach (var item in View)
{
<tr>
<td>@item.CreatedOn</td>
<td>@item.ShopName</td>
<td>@item.Mobile</td>
<td>@item.CustomerType</td>
<td>@item.BeatCode</td>
<td>@item.Status</td>
@*<td>@item.StateName</td>*@
@*<td id="[email protected]">@item.Status<*@

@*<td>@item.CallFrequency</td>
<td>@item.District</td>
<td>@item.City</td>
<td>@item.State</td>*@
@*<td>@item.Status</td>*@

<td>
<button class="viewbtn"
onclick="GetAll('@item.TempCustomerId')">VIEW</button>
@*<button class="viewbtn"
onclick="GetAll('@item.TempCustomerId'); GetStatus('@item.UserID'); return
false;">VIEW</button>*@

</td>
</tr>
}
</tbody>
</table>
@*<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></
script>
<script type="text/javascript">

function AddData() {
// Perform validation
var name = $("#txtShopname").val();
var mobile = $("#txtMobile").val();
var customerType = $("#txtCustomerType").val();
var beatCode = $("#txtBeatCode").val();
var callFrequency = $("#txtCallFrequency").val();
var district = $("#txtDistrict").val();
var city = $("#txtCity").val();
var state = $("#txtState").val();

if (name === "") {


alert("Please enter a name.");
return;
}

if (mobile === "") {


alert("Please enter a mobile number.");
return;
}
if (customerType === "") {
alert("Please enter a CustomerType.");
return;
}
if (beatCode === "") {
alert("Please enter a BeatCode.");
return;
}
if (callFrequency === "") {
alert("Please enter a CallFrequency.");
return;
}
if (district === "") {
alert("Please enter a District.");
return;
}
if (city === "") {
alert("Please enter a City.");
return;
}
if (state === "") {
alert("Please enter a State.");
return;
}

// If validation passes, make the AJAX call


$.ajax({
url: "/CM/AddData",
type: "POST",
data: $("#User").serialize(),
success: function (response) {
alert(response);
}
});
}

function GetAll(TempCustomerId) {
$.ajax({
url: "/CM/View",
type: "GET",
data: { TempCustomerId: TempCustomerId },
success: function (response) {
$("#TempCustomerId").val(response[0].TempCustomerId);
$("#txtShopname").val(response[0].ShopName);
$("#txtMobile").val(response[0].Mobile);
$("#txtCustomerType").val(response[0].CustomerType);
$("#txtBeatCode").val(response[0].BeatCode);
$("#txtCallFrequency").val(response[0].CallFrequency);
$("#txtDistrict").val(response[0].District);
$("#txtCity").val(response[0].City);
$("#txtState").val(response[0].State);

$("#btnsave").hide();
$("#btnupdate").show();

$('html,body').animate({
scrollTop: $("#User").offset().top
}, 1000);
}
});
}
$(document).ready(function () {
$.ajax({
url: '@Url.Action("GetBeats", "CM")',
type: 'GET',
dataType: 'json',
data: { employeeID: 22 },
success: function (data) {
var dropdown = $('#txtBeatCode');
$.each(data, function (index, beat) {

dropdown.append($('<option></option>').val(beat.BeatName).text(beat.MergedValue));
});
}
});
});
function toggleWholesalerFields() {
var customerType =
document.getElementById("txtCustomerType").value;
var wholesalerFields = document.getElementById("wholesalerFields");

if (customerType === "Wholesaler") {


wholesalerFields.style.display = "block";
} else {
wholesalerFields.style.display = "none";
}
}

// Attach event listener to the customer type dropdown


document.getElementById("txtCustomerType").addEventListener("change",
toggleWholesalerFields);

</script>*@
</body>
</html>

You might also like