Client Application
Let create a open Visualstudio 2017 to create Client App.
Client Application
Open Visual Studio 2017 Community.
For responsive
Create a folder name Mobile and an Index.html.
For responsive
Mobile/Index.html.
<!DOCTYPE html> <html> <head> <link rel="apple-touch-icon" sizes="57x57" href="../favio1/apple-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="../favio1/apple-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="../favio1/apple-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="144x144" href="../favio1/apple-icon-144x144.png" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> <meta charset="utf-8"> <title>Home | Used Car</title> <link href="../Content/bootstrap.min.css" rel="stylesheet"> <link href="../Content/font-awesome.min.css" rel="stylesheet"> <link href="../Content/main.css" rel="stylesheet"> <link href="../Content/responsive.css" rel="stylesheet"> <link href="../Content/jqx.base.css" rel="stylesheet" type="text/css" /> <link href="../Content/sticky-navigation.css" rel="stylesheet" /> <style> .half-page-image { width: 45%; display: inline-block; vertical-align: top; } </style> <script src="../Scripts/jquery.js"></script> <script src="../Scripts/bootstrap.min.js"></script> <script src="../Scripts/jqxcore.js"></script> <script src="../Scripts/jqxdata.js"></script> <script src="../Scripts/jqxbuttons.js"></script> <script src="../Scripts/jqxscrollbar.js"></script> <script src="../Scripts/jqxlistbox.js"></script> <script src="../Scripts/jqxcombobox.js"></script> <script src="../Scripts/MyAngular/GeneraScripts.js"></script> <script src="../Scripts/MyAngular/jquery.twbsPagination.js"></script> <script type="text/javascript"> var vbodyType; var vautoMake; var vautoModel; var vautoYear; var vautoColor; var userState; var userCity; var stateId; var recordId; var ipAddress; var location; var totalPage = 0; var pageSize = 12; var specialPageSize = 10; var pageNumber = 1; var numberOfPage; recordId = GetQueryString("recordId"); userState = GetQueryString("userState"); userCity = GetQueryString("userCity"); pageNumber = GetQueryString("page"); bodyType = GetQueryString("bodyType"); autoMake = GetQueryString("autoMake"); autoModel = GetQueryString("autoModel"); autoYear = GetQueryString("autoYear"); autoColor = GetQueryString("autoColor"); if (pageNumber == "") { pageNumber = "1"; } $(document).ready(function () { /* This logic is for the user location to record their location in the database */ if (userState == "") { $.get("http://ipinfo.io", function (response) { // $("#ip").html("IP: " + response.ip); $("#details").html(JSON.stringify(response, null, 4)); userState = response.region; userStateId = getStateId(userState).toString(); userCity = response.city; Header(userState, response.city); bodyType = "Sedans"; autoMake = "Accura"; autoModel = "3.2 CL TYPE-S"; autoYear = "1970"; GetState("TEXAS", response.ip); GetCity("45", response.ip); GetBodyType(); GetAutoMake(); GetYears(autoYear); GetColor(autoColor); //AutoUsedBanner(userStateId, userCity, response.ip); AutoUsedPageList("45", "Arlington", pageSize, pageNumber); //AutoRecordCount("45", "Arlington", response.ip); AudiList(userStateId, userCity, response.ip); BMWList(userStateId, userCity, response.ip); MercedesList(userStateId, userCity, response.ip); PorscheList(userStateId, userCity, response.ip); JaguarList(userStateId, userCity, response.ip); TeslaList(userStateId, userCity, response.ip); }, "jsonp") } else { userStateId = getStateId(userState).toString(); ipAddress = GetQueryString("ipAddress"); bodyType = GetQueryString("bodyType"); userState = GetQueryString("userState"); userCity = GetQueryString("userCity"); autoYear = GetQueryString("autoYear"); autoColor = GetQueryString("autoColor"); // Headertop(); Header(userState, userCity); GetState(userState, ipAddress); GetCity(userStateId, ipAddress); GetBodyType(); GetAutoMake(); GetYears(autoYear); GetColor(autoColor); // AutoUsedBannerList(userStateId, userCity, ipAddress); AutoUsedPageList(userStateId, userCity, pageSize, pageNumber); //AutoRecordCount(userStateId, userCity, ipAddress); AudiList(userStateId, userCity, ipAddress); BMWList(userStateId, userCity, ipAddress); MercedesList(userStateId, userCity, ipAddress); PorscheList(userStateId, userCity, ipAddress); JaguarList(userStateId, userCity, ipAddress); TeslaList(userStateId, userCity, ipAddress); } }) var deviceType = "mobile"; var module = "moto"; var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); function AddVisitor(ipAddress) { var VisitorData = { "sellerAccount": sellerAccount, "deviceType": deviceType, "categoryType": module, "itemId": itemId, "autoMake": motoMake, "autoModel": motoModel, "picture": imgDisplay, "ipAddress": ipAddress, "visitDay": dd, "visitMonth": mm, "visitYear": yyyy, "userLocation": userCity + ', ' + userState }; $.ajax({ type: "POST", url: "../api/KarCheap/InsertVisitor", data: JSON.stringify(VisitorData), contentType: 'application/json; charset=utf-8', dataType: "json", success: function (r) { //alert('Good 2'); } }); return false; }; function GetAutoMake() { var autoMakeUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetAutoMake"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'autoMake1' } ], url: autoMakeUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoMakeList").jqxComboBox({ source: dataAdapter, placeHolder: autoMake, selectedIndex: 0, displayMember: "autoMake1", valueMember: "autoMake1", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoMakeList").on('select', function (event) { if (event.args) { var item = event.args.item; autoMakeId = item.value; autoMake = item.value; getModelList(autoMakeId); } }); }; function getModelList(autoMakeId) { var autoModelUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetAutoModels/" + autoMakeId; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'autoMakeId' }, { name: 'autoModel1' } ], url: autoModelUrl }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoModelList").jqxComboBox({ placeHolder: autoModel, source: dataAdapter, selectedIndex: 0, displayMember: "autoModel1", valueMember: "autoModel1", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoModelList").on('select', function (event) { if (event.args) { var item = event.args.item; autoModelId = item.value; autoModel = item.value; } }); } function Header(userState, userCity) { var html = "" html += "<div class='header_top'><!--header_top-->" html += "<div class='container'>" html += "<div class='row'>" html += "<div class='col-sm-6'>" html += "<div class='contactinfo'>" html += "<ul class='nav nav-pills'>" html += "<li><a href='#'><font color='white'><i class='fa fa-phone'></i>(214)-507-0401</font></a></li>" html += "<li><a href='#'><font color='white'><i class='a fa-envelope'></i></font></a></li>" html += "</ul>" html += "</div>" html += "</div>" html += "</div>" html += "</div>" html += "</div><!--/header_top-->" html += "<div class='header-middle'><!--header-middle-->" html += "<div class='container'>" html += "<div class='row'>" html += "<div class='col-sm-6'>" html += "<div class='logo pull-left'>" html += "<h3><span><font color='#e0bf04'>Kar</font></span>Cheap</h3><font size='4px'>Used Cars for sale in " + userCity + ", " + userState + "</font>" html += "</div>" html += "<div class='btn-group btn-group-xs' align='center'>" html += "<a href='Index.html'><button type='button' class='btn btn-lg btn-default btn-sm' id='usedcar' style='width:115px'>Used Cars</button></a> " html += "<a href='mobileMotoIndex.html'><button type='button' class='btn btn-lg btn-default btn-sm' id='moto' style='width:115px'>Motorbikes</button></a> " html += "</div>" html += "</div>" html += "</div>" html += "</div>" html += "</div><!--/header-middle-->" $("#headerMenu").html(html); } function AutoUsedBanner(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedBanner/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = "<div class='carousel-inner'>" for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; if (record == 0) { html += "<div class='item active'>" } else { html += "<div class='item'>" } html += "<div class='col-sm-6'>" html += "<h4><span><font color=#8C8C88;'>" + heading + "</font></span></h4>" html += "<h3><span>$" + price.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</span></h3>" html += "<h5><span>" + detail + "</span></h5>" // html += "<button type='button' class='btn btn-default get'>Detail</button></div><div class='col-sm-6'>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:300px;height:200px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "</div>" html += "</div>" } html += "</div>"; $("#banner").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function AutoUsedPageList(userStateId, userCity, pagSize, pagNumber) { var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedPaging/" + userStateId + "/" + userCity + "/" + pagSize + "/" + pagNumber; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; html += "<div class='half-page-image'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:160px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);'/>" if (recordId == record.ID) { html += "<img src='images/checkbox.png' class='new' style='width:20px'/>" } if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" html += "<div class='half-page-image'>" html += "<h11><font color='black'>" + heading + "</font></h11>" html += "</br><h11><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</font></h11>" html += "</br><h11><font color='black'>" + detail + "</font></h11>" html += "</br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" html += "</div>" html += "</div>" html += "</div>" } $("#newVehicles").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function AutoRecordCount(userStateId, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoRecordCount/" + userStateId + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; totalRecord = length; numberOfPage = Math.round(parseInt(totalRecord) / parseInt(pageSize)); $("#numberOfPage").val(numberOfPage); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; if (numberOfPage == 0) { numberOfPage = 1; } $(function () { var obj = $('#pagination').twbsPagination({ totalPages: 5, //$("#numberOfPage").val(), visiblePages: 10, onPageClick: function (event, page) { pageNumber = page; AutoUsedPageList(userStateId, userCity, pageSize, pageNumber); } }); }); function specialPagingControl(totalRecord) { var html = ""; if (totalRecord < pageSize) { html += "<div class='col-sm-6 text-right'>" html += "<em>There are ( " + totalRecord + " posts)</em>" html += "</div>" } $("#audiPagingControl").html(html); }; //**********************************************special auto sales************************************************* //This session is for new special autos function AudiList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Audi/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobilAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#Audi").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function BMWList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/BMW/" + userState + "/" + userCity;; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#BMW").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function MercedesList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Mercedes-Benz/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#Mercedes").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function PorscheList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Porsche/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#Porsche").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function JaguarList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Jaguar/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#Jaguar").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function TeslaList(userState, userCity, ipAddress) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Tesla/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color :' + record.interiorColor + ' <br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; html += "<div class='col-sm-3'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:320px;height:140px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h4><font color='blue'>" + heading + "</font></h4>" html += "<h4><font color='green'>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); + "</font></h4>" html += "<h5>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td width='50%' align='right'>Exterior Color :</td>" html += "<td width='50%' align='left'>" + record.exteriorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Interior Color :</td>" html += "<td width='50%' align='left'>" + record.interiorColor + "</td>" html += "</tr>" html += "<tr>" html += "<td width='50%' align='right'>Mileage :</td>" html += "<td width='50%' align='left'>" + record.autoMileage.toLocaleString() + " miles</td>" html += "</tr>" html += "</table>" html += "</h5>" html += "<br><a href='mobileAutoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "' class='btn btn-default btn-sm'>View Details</a>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" html += "</div>" html += "</div>" html += "</div>" } $("#Tesla").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; //***********************************************************************************************************/ function GetState(userState, ipAddress) { //alert(userState); var stateUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetState"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'shortName' }, { name: 'longName' } ], url: stateUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#stateList").jqxComboBox({ source: dataAdapter, placeHolder: userState, selectedIndex: 0, displayMember: "longName", valueMember: "ID", width: 180, height: 30, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#stateList").on('select', function (event) { if (event.args) { var item = event.args.item; stateId = item.value; GetCity(stateId, ipAddress); } }); }; function GetCity(stateId, ipAddress) { var stateUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetCity/" + stateId; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'stateId' }, { name: 'cityName' } ], url: stateUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#cityList").jqxComboBox({ source: dataAdapter, placeHolder: userCity, // selectedIndex: 0, displayMember: "cityName", valueMember: "cityName", width: 180, height: 30, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#cityList").on('select', function (event) { if (event.args) { var item = event.args.item; var cityId = item.value; userCity = item.value; } }); }; //***********************************************************************************************************/ function GetBodyType() { var bodyTypeId; var bodyTypeUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetBodyType"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'bodyType' } ], url: bodyTypeUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#bodyTypeList").jqxComboBox({ source: dataAdapter, placeHolder: bodyType, selectedIndex: 0, displayMember: "bodyType", valueMember: "bodyType", width: 180, height: 30, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#bodyTypeList").on('select', function (event) { if (event.args) { var item = event.args.item; bodyTypeId = item.value; bodyType = item.value; } }); }; function GetYears(autoYear) { var autoYearlUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetYears/"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'autoYear1' } ], url: autoYearlUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoYearList").jqxComboBox({ placeHolder: autoYear, source: dataAdapter, // selectedIndex: 0, displayMember: "autoYear1", valueMember: "autoYear1", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoYearList").on('select', function (event) { if (event.args) { var item = event.args.item; autoYearId = item.value; autoYear = item.value; } }); }; function GetColor(autoColor) { var autoColor = ""; var autoColorUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetAutoColor/"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'Color' }, { name: 'Rgb' } ], url: autoColorUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoColorList").jqxComboBox({ placeHolder: autoColor, source: dataAdapter, // selectedIndex: 0, displayMember: "Color", valueMember: "Color", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoColorList").on('select', function (event) { if (event.args) { var item = event.args.item; autoColor = item.value; } }); }; $(document).ready(function () { $('#search').click(function (e) { userState = $("#stateList").val(); bodyType = $("#bodyTypeList").val(); autoMake = $("#autoMakeList").val(); autoModel = $("#autoModelList").val(); autoYear = $("#YearList").val(); autoColor = $("#ColorList").val(); var Url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedSearch/" + userState + "/" + userCity + "/" + bodyType + "/" + autoMake + "/" + autoModel + "/" + autoYear + "/" + autoColor; var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'stockNo', type: 'string' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: Url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. // alert(length); var html = "<div class='carousel-inner'>" for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Body Type : ' + record.bodyType + '<br>' + 'Exterior Color : ' + record.exteriorColor + '<br>' + 'Interior Color :' + record.interiorColor + ' <br>' + 'Engine : ' + record.autoEngine + '<br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; if (record == 0) { html += "<div class='item active'>" } else { html += "<div class='item'>" } html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:130px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='mobileAutoDtails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-sm'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:130px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='mobileAutoDtails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-sm'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#banner").html(html); }, }); $("#stateList").val() = userState; $("#cityList").val() = userState; $("#bodyTypeList").val() = bodyType; $("#autoMakeList").val() = autoMake; $("#autoModelList").val() = autoModel; $("#YearList").val() = autoYear; $("#ColorList").val() = autoColor; }); }) </script> <style type="text/css"> .jqx-dropdownlist-content { font-size: 10px; } </style> <script> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script> </head><!--/head--> <body> <form method=post> <input type="hidden" id="autoMakeId" /> <input type="hidden" id="txtlocation"> <header id="header"> <!--header--> <div id="headerMenu"></div> </header><!--/header--> <!--############################Side Memu Bar################################--> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="left-sidebar"> <h2>Search</h2> <div class="panel-group category-vehicles" id="accordian" height="200px"> <!--category-vehicles--> <div class="panel panel-default" align="left"> <h5>Change Location</h5> <div id="stateList"></div> <h5>City</h5> <div id="cityList"></div> <h5>Body type</h5> <div id="bodyTypeList"></div> <h5>Auto Make</h5> <div id="autoMakeList"></div> <h5>Auto Model</h5> <div id="autoModelList"></div> <h5>Year</h5> <div id="autoYearList"></div> <h5>Color</h5> <div id="autoColorList"></div> </div> <div align='center'><a href="index.html" class="btn btn-default" id="search">Search</a></div> </div><!--/category-vehicles--> </div> </div> <!---#################################################################--> <div class="col-sm-12 padding-right"> <div class="new_vehicles"> <!--new_vehicles--> <ul class="pagination" id="pagination"></ul> <div id="newVehicles"></div> </div><!--new_vehicles--> <div class="category-tab"> <!--category-tab--> <div class="col-sm-12"> <ul class="nav nav-tabs"> <li class="active"><a href="#Audi" data-toggle="tab">Audi</a></li> <li><a href="#BMW" data-toggle="tab">BMW</a></li> <li><a href="#Mercedes" data-toggle="tab">Mercedes-benz</a></li> <li><a href="#Porsche" data-toggle="tab">Porsches</a></li> <li><a href="#Jaguar" data-toggle="tab">Jaguar</a></li> <li><a href="#Tesla" data-toggle="tab">Tesla</a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade active in" id="Audi"></div> <div class="tab-pane fade" id="BMW"></div> <div class="tab-pane fade" id="Mercedes"></div> <div class="tab-pane fade" id="Porsche"></div> <div class="tab-pane fade" id="Jaguar"></div> <div class="tab-pane fade" id="Tesla"></div> </div> <!--##################################Recommand##########################################--> </div> </div> </div> </div> </section> </form> <footer align="center">Power By BrandonCode.com</footer> </body> </html>
Create WCF Project
Open Visual Studio 2017 Community.
Create WCF Project
Open Visual Studio 2017 Community.
Create WCF Project
Open Visual Studio 2017 Community.
Create WCF Project
Open Visual Studio 2017 Community.
AngularJS
Architecture is both the process and product of planning, designing and construction. Architectural works, in the material form of buildings, are often perceived as cultural symbols and as works of art. Historical civilizations are often identified with their surviving architectural achievements.
AngularJS
Autumn or Fall is one of the four temperate seasons. Autumn marks the transition from summer into winter, in September (Northern Hemisphere) or March (Southern Hemisphere) when the arrival of night becomes noticeably earlier. The equinoxes might be expected to be in the middle of their respective seasons, but temperature lag (caused by the thermal latency of the ground and sea) means that seasons appear later than dates calculated from a purely astronomical perspective.
AngularJS
An arch is a structure that spans a space and supports a load. Arches appeared as early as the 2nd millennium BC in Mesopotamian brick architecture and their systematic use started with the Ancient Romans who were the first to apply the technique to a wide range of structures.
var autoApp = angular.module('autoApp', []); autoApp.controller("usedCarController", function ($scope, $http, $timeout, $rootScope, $window) { $scope.itemId = $window.itemId; $scope.ipAddress = $window.ipAddress; $scope.userLocation = $window.userState + ", " + $window.userCity; $scope.sellerAccount = $window.sellerAccount; $scope.module = $window.module; $scope.device = $window.deviceType; AddVisitor(); function AddVisitor() { var visitorData = { deviceType: $scope.device, categoryType: $scope.module, itemId: $scope.itemId, ipAddress: $scope.ipAddress, userLocation: $scope.userLocation }; var request = $http({ method: "post", url: "localhost:4194/Service1.svc/AddVisitor/", //data: visitorData, data: JSON.stringify(visitorData), dataType: "json" }).success(function (data, status, headers, config) { alert('Record saved'); }).error(function (data, status, headers, config) { $scope.message = 'Unexpected Error'; }); return request; } $scope.AddBuyerMessage = function () { // debugger; var buyerData = { SellerAccount: $scope.sellerAccount, BuyerMessage1: $scope.message, itemId: $scope.itemId }; var request = $http({ method: "post", url: "localhost:4194/Service1.svc/AddBuyerMessage/", // data: buyerData data: JSON.stringify(buyerData), dataType: "json" }).success(function (data, status, headers, config) { $scope.thankyouMessage = "Thank you for contacting us. Your message has been sent to seller ... "; // alert('Record saved'); }).error(function (data, status, headers, config) { $scope.message = 'Unexpected Error'; }); }; $scope.ContactMessage = function () { // debugger; var contactData = { VisitorName: $scope.name, VisitorEmail: $scope.email, Subject: $scope.subject, VisitorMessage: $scope.message }; var request = $http({ method: "post", url: "localhost:4194/Service1.svc/AddContactMessage/", // data: contactData data: JSON.stringify(contactData), dataType: "json" }).success(function (data, status, headers, config) { $scope.thankyouMessage = "Thank you for contacting us. Your message is very important to us, we will return your request as soon as we can ... "; // alert('Record saved'); }).error(function (data, status, headers, config) { $scope.message = 'Unexpected Error'; }); }; });
Client App
autoIndex.html is a list of all the auto from the database.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/android-icon-144x144.png"> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/apple-icon-152x152.png"> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/favicon-32x32.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Used Car</title> <link href="Content/bootstrap.min.css" rel="stylesheet" /> <link href="Content/font-awesome.min.css" rel="stylesheet" /> <link href="Content/main.css" rel="stylesheet" /> <link href="Content/sticky-navigation.css" rel="stylesheet" /> <link href="Content/jqx.base.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery.js"></script> <script src="Scripts/jqxcore.js"></script> <script src="Scripts/jqxdata.js"></script> <script src="Scripts/jqxbuttons.js"></script> <script src="Scripts/jqxscrollbar.js"></script> <script src="Scripts/jqxlistbox.js"></script> <script src="Scripts/jqxcombobox.js"></script> <script src="Scripts/MyAngular/GeneraScripts.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script> <script src="Scripts/MyAngular/jquery.twbsPagination.js"></script> <style> .mySlides { display: none; } </style> <script type="text/javascript"> function MobileDetect() { var uagent = navigator.userAgent.toLowerCase(); if (uagent.search("iphone") > -1 || uagent.search("android") > -1 || uagent.search("webos") > -1 || uagent.search("blackberry") > -1) { window.location.href = "mobile/index.html"; } } var html = ""; var uEmail = ""; var bodyType; var autoMake; var autoModel; var autoYear; var autoColor; var userState; var userCity; var stateId; var recordId; var ipAddress; var location; var totalView = 0; var passcode = ""; var autoMakeId = 0; var totalPage = 0; var pageSize = 15; var specialPageSize = 10; var pageNumber = 1; var numberOfPage; var userStateId; $(document).ready(function () { /* This part is for authentication var tokenKey = 'accessToken'; checkLiveToken(); function checkLiveToken() { var token = sessionStorage.getItem(tokenKey); var headers = {}; if (token) { headers.Authorization = 'Bearer ' + token; } $.ajax({ type: 'GET', url: 'api/values', headers: headers, success: function (data, status, jqXHR) { uEmail = data; $("#userEmail").val(data); html += "<div>" + uEmail + "<div>"; showUserName(data); }, error: function (xhr) { //alert("failed. Get Value"); } }); } */ recordId = GetQueryString("recordId"); userState = GetQueryString("userState"); userCity = GetQueryString("userCity"); pageNumber = GetQueryString("page"); bodyType = GetQueryString("bodyType"); autoMake = GetQueryString("autoMake"); autoModel = GetQueryString("autoModel"); autoYear = GetQueryString("autoYear"); autoColor = GetQueryString("autoColor"); passcode = GetQueryString("passcode"); pageNumber = GetQueryString("page"); localStorage.setItem("userStateId", userStateId); localStorage.setItem("userCity", userCity); localStorage.setItem("userState", userState); if (pageNumber == "") { pageNumber = "1"; } //userStateId = "45"; //userCity = "Arlington"; //userState = "Texas"; //*************** $('#loading').show(); /* This logic is for the user location to record their location in the database */ if (userState == "") { $.get("http://ipinfo.io", function (response) { // $("#ip").html("IP: " + response.ip); $("#ipAddress").html("IP: " + response.ip); $("#address").html("Location: " + response.city + ", " + response.region); $("#details").html(JSON.stringify(response, null, 4)); userState = response.region; userStateId = getStateId(userState).toString(); userCity = response.city; userStateId = "45"; userCity = "Arlington"; userState = "Texas"; Location(userState, response.city); bodyType = "Sedans"; autoMake = "Accura"; autoModel = "3.2 CL TYPE-S"; autoYear = "1970"; autoColor = "White"; GetState(userState); GetCity(userStateId); GetBodyType(); GetAutoMake(); GetYears(autoYear); GetColor(autoColor); AutoUsedBannerList("45", "Arlington"); AutoUsedPageList("45", "Arlington", pageSize, pageNumber); AutoRecordCount("45", "Arlington"); AudiList(userStateId, userCity); BMWList(userStateId, userCity); MercedesList(userStateId, userCity); PorscheList(userStateId, userCity); JaguarList(userStateId, userCity); TeslaList(userStateId, userCity); }, "jsonp") } else { userStateId = getStateId(userState).toString(); ipAddress = GetQueryString("ipAddress"); bodyType = GetQueryString("bodyType"); userState = GetQueryString("userState"); userCity = GetQueryString("userCity"); autoYear = GetQueryString("autoYear"); autoColor = GetQueryString("autoColor"); // take this off userStateId = "45"; userCity = "Arlington"; userState = "Texas"; //*************** Location(userState, userCity); GetState(userState); GetCity(userStateId); GetBodyType(); GetAutoMake(); GetYears(autoYear); GetColor(autoColor); AutoUsedBannerList(userStateId, userCity); AutoUsedPageList(userStateId, userCity, pageSize, pageNumber); AutoRecordCount(userStateId, userCity); AudiList(userStateId, userCity); BMWList(userStateId, userCity); MercedesList(userStateId, userCity); PorscheList(userStateId, userCity); JaguarList(userStateId, userCity); TeslaList(userStateId, userCity); } $('#loading').hide(); localStorage.setItem('userStateId', userStateId); localStorage.setItem('userCity', userCity); localStorage.setItem('userState', userState); function Location(userState, userCity) { var html = "" html += "Used Car for sale in " + "<font color='green'>" + userCity + ", " + userState + "</font>" $("#location").html(html); }; //**********************************************Item Display************************************************* //**********************************************left menu************************************************* function GetAutoMake() { var autoMakeUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetAutoMake"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'autoMake1' } ], url: autoMakeUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoMakeList").jqxComboBox({ source: dataAdapter, placeHolder: autoMake, selectedIndex: 0, displayMember: "autoMake1", valueMember: "autoMake1", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoMakeList").on('select', function (event) { if (event.args) { var item = event.args.item; autoMakeId = item.value; autoMake = item.value; getModelList(autoMakeId); } }); }; function getModelList(autoMakeId) { var autoModelUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetAutoModels/" + autoMakeId; //alert(autoModelUrl); // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'autoMakeId' }, { name: 'autoModel1' } ], url: autoModelUrl }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#autoModelList").jqxComboBox({ placeHolder: autoModel, source: dataAdapter, selectedIndex: 0, displayMember: "autoModel1", valueMember: "autoModel1", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#autoModelList").on('select', function (event) { if (event.args) { var item = event.args.item; autoModelId = item.value; autoModel = item.value; //document.location.href = 'autoIndex.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&userState=' + userState + '&userCity=' + userCity + '&autoMake=' + autoMake + '&autoModelId=' + autoModelId + '&ipAddress=' + ipAddress; } }); } function GetBodyType() { var bodyTypeId; var bodyTypeUrl = "http://localhost:59040/UsedCarService/Service1.svc/GetBodyType"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID' }, { name: 'bodyType' } ], url: bodyTypeUrl, async: false }; var dataAdapter = new $.jqx.dataAdapter(source); // Create a jqxComboBox $("#bodyTypeList").jqxComboBox({ source: dataAdapter, placeHolder: bodyType, selectedIndex: 0, displayMember: "bodyType", valueMember: "bodyType", width: 180, height: 25, searchMode: 'containsignorecase', autoComplete: true }); // trigger the select event. $("#bodyTypeList").on('select', function (event) { if (event.args) { var item = event.args.item; bodyTypeId = item.value; bodyType = item.value; // document.location.href = 'index.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&userState=' + userState + '&userCity=' + userCity + '&bodyType=' + bodyTypeId + '&ipAddress=' + ipAddress; } }); }; if (uEmail == '') { showUserName(""); } function showUserName(vUser) { if (vUser) { //$('#setting').show(); var arr = vUser.split('@'); var first = arr.shift(); //or arr[arr.length-1]; var last = arr.pop(); //or arr[0]; var html = ""; //html += "<a href='http://www.karcheap.com/BrandonAuto/?userEmail=" + vUser + "'><font size='2px'>Hi! " + first + " <img src='images/AccountImage.png' height='20px'/></font></a></li>" html += "<a href='Admin.html' target='backOffice'><font size='2px'>Hi! " + first + " <img src='images/AccountImage.png' height='20px'/></font></a></li>" } $("#user").html(html); } //**********************************************End left menu************************************************* //**********************************************Body************************************************* function AutoUsedBannerList(userState, userCity) { var html = ""; var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedBanner/" + userState + "/" + userCity // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; //alert(length); // loop through the records and display them in a table. for (var i = 0; i < length; i++) { var record = records[i]; html += "<img class='mySlides w3-animate-fading' src='" + record.picture + "' style='width: 100%' align='middle' />" //html += "</div>" //html += "<div class='item'>" // html += "<div class='col-sm-6'>" // html += "<h4><span><font color=#8C8C88;'>" + heading + "</font></span></h4>" // html += "<h3><span>$" + price.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</span></h3>" // html += "<table border='1' width='95%' style='font-size:12pt'>" // html += "<tr>" // html += "<td align='right'>Exterior Color :</td>" // html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" // html += "</tr>" // html += "<tr>" // html += "<td align='right'>Interior Color :</td>" // html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" // html += "</tr>" // html += "<tr>" // html += "<td align='right'>Mileage :</td>" // html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" // html += "</tr>" // html += "</table>" // html += "<table border='1' width='95%'>" // html += "<tr>" // html += "<td align='left'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-sm' style='width:300px'> View Details </a></td>" // html += "</tr>" // html += "</table>" // html += "</div>" // html += "<div class='col-sm-6'>" // html += "<img src='" + record.picture + "' class='car img-responsive' style='width:300px;height:200px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" // html += "</div>" //html += "</div>" } // html += "</div>"; $("#banner").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function AutoUsedPageList(userStateId, userCity, pagSize, pagNumber) { var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedPaging/" + userStateId + "/" + userCity + "/" + pagSize + "/" + pagNumber; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color : ' + record.interiorColor + ' <br>' + 'Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:300px;height:180px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);'/>" html += "<h5><font color='blue'>" + displayText(heading, 20) + "</font></5>" html += "<h4>$" + record.ID + "/" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkbox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + record.ID + '/' + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='100%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-default btn-sm' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='http://images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:300px;height:180px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<br><h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='100%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-default btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" } $("#newVehicles").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function AutoRecordCount(userStateId, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/AutoRecordCount/" + userStateId + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; totalRecord = length; numberOfPage = Math.round(parseInt(totalRecord) / parseInt(pageSize)); $("#numberOfPage").val(numberOfPage); // loop through the records and display them in a table. var html = ""; }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; if (numberOfPage == 0) { numberOfPage = 1; } $(function () { var obj = $('#pagination').twbsPagination({ totalPages: 5, //$("#numberOfPage").val(), visiblePages: 10, onPageClick: function (event, page) { pageNumber = page; AutoUsedPageList(userStateId, userCity, pageSize, pageNumber); } }); }); //*********************************************************************************************** //**********************************************special auto sales************************************************* //This session is for new special autos function AudiList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Audi/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#Audi").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function BMWList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/BMW/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color :' + record.interiorColor + ' <br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { // html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#BMW").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function MercedesList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Mercedes-benz/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#Mercedes").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function PorscheList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Porsche/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color :' + record.interiorColor + ' <br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { // html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#Porsche").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function JaguarList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Jaguar/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color :' + record.interiorColor + ' <br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { // html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#Jaguar").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; function TeslaList(userState, userCity) { var url = "http://localhost:59040/UsedCarService/Service1.svc/GetSpecialAuto/Tesla/" + userState + "/" + userCity; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'bodyType', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = ""; for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Exterior Color : ' + record.exteriorColor + '<br>' + ' Interior Color :' + record.interiorColor + ' <br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; ShowView("auto", record.ID); html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=" + pageNumber + "&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs' style='width:100%'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { // html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#Tesla").html(html); }, loadError: function (jqXHR, status, error) { }, beforeLoadComplete: function (records) { } }); // perform data binding. dataAdapter.dataBind(); }; //**********************************************************End body*************************************************/ //**********************************************************Search*************************************************/ $('#search').click(function (e) { autoYear = $("#autoYearList").val(); autoColor = $("#autoColorList").val(); var Url = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedSearch/" + userState + "/" + userCity + "/" + bodyType + "/" + autoMake + "/" + autoModel + "/" + autoYear + "/" + autoColor; var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'stockNo', type: 'string' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' } ], id: 'ID', url: Url }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // loop through the records and display them in a table. var html = "<div class='carousel-inner'>" for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var detail = 'Body Type : ' + record.bodyType + '<br>' + 'Exterior Color : ' + record.exteriorColor + '<br>' + 'Interior Color :' + record.interiorColor + ' <br>' + 'Engine : ' + record.autoEngine + '<br>' + ' Mileage : ' + record.autoMileage.toLocaleString() + ' miles'; if (record == 0) { html += "<div class='item active'>" } else { html += "<div class='item'>" } html += "<div class='col-sm-4'>" html += "<div class='vehicle-image-wrapper'>" html += "<div class='single-vehicle'>" if (recordId == record.ID) { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "<img src='images/checkBox.png' class='new' style='width:20px'/>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } else { html += "<div class='vehicleinfo text-center'>" html += "<img src='" + record.picture + "' class='car img-responsive' style='width:360px;height:160px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;'/>" html += "<h5><font color='blue'>" + heading + "</font></5>" html += "<h4>$" + record.salePrice.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</h4>" html += "</div>" html += "<table border='0' width='95%' style='font-size:10pt'>" html += "<tr>" html += "<td align='right'>Exterior Color :</td>" html += "<td align='left'> <strong>" + record.exteriorColor + "</strong></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Interior Color :</td>" html += "<td align='left'> <b>" + record.interiorColor + "</b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Mileage :</td>" html += "<td align='left'> <b>" + record.autoMileage.toLocaleString() + ' miles' + "</b></td>" html += "</tr>" html += "</table>" html += "<table border='0' width='95%'>" html += "<tr>" html += "<td align='center'><a href='autoDetails.html?gs_l=psy-ab.3.0.0.9526.26894.0.28173.32.18.2.11.12.0.250.2467.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&accountNo=" + record.accountNumber + "&recordId=" + record.ID + "&userState=" + userState + "&userCity=" + userCity + "&ipAddress=" + ipAddress + "&picture=" + record.picture + "&autoMake=" + record.autoMake + "&autoModel=" + record.autoModel + "&autoColor=" + autoColor + "&autoYear=" + autoYear + "&bodyType=" + bodyType + "' class='btn btn-primary btn-xs'>View Details</a></td>" html += "</tr>" html += "</table>" if (record.autoStatus == 'Sold') { html += "<img src='images/sold1.png' class='new' style='width:90px'/>" } else if (record.autoStatus == 'New') { //html += "<img src='images/home/new.png' class='new' style='width:40px'/>" } html += "</div>" } html += "</div>" html += "</div>" html += "</div>" } $("#banner").html(html); }, }); }); }); </script> <style> #header { width: 100%; height: 107px; margin: 0; padding: 0; /*background: url(template/images/HeaderPanel.png) no-repeat center top;*/ } #header h1 { margin: 0; padding: 0 0 0 296px; } #header h1 a { display: block; width: 378px; height: 92px; text-indent: -9000px; } body { margin: 0; padding: 0; font-family: Arial; font-size: 10px; } #priNav { margin: 0px 0 0px 0; padding: 0; list-style-type: none; text-align: center; height: 36px; } #priNav li { display: inline; margin: 0px 0 20px 0; padding: 0 8px; line-height: 36px; font-size: 11px; text-transform: uppercase; background: url(template/images/divline.gif) no-repeat right center; } #priNav li a { color: #666; text-decoration: none; } #priNav li a:hover { color: #000; text-decoration: none; } #priNav li a#priNav_Home { background: url(template/images/divline.gif) no-repeat left center; padding-left: 8px; } #priNav li ul { display: none; } </style> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,900); .module { background: url(template/images/HeaderPanel.png); background-size: cover; width: 100%; height: 80px; margin: 0px 0 0 0px; position: relative; float: left; } .top h2 { color: grey; margin: 0; padding: 20px; } .lr p { font-family: 'Roboto', sans-serif; position: absolute; bottom: 20px; left: 20px; color: white; margin: 0; } .mid h2 { font-family: 'Roboto', sans-serif; font-weight: 900; color: white; text-transform: uppercase; margin: 0; position: absolute; top: 50%; left: 50%; font-size: 2rem; transform: translate(-50%, -50%); } .cap p { padding: 20px; color: white; font: 12px Monaco, Mono-Space; margin: 0; } div.polaroid { width: 80%; height: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); text-align: left; padding: 5px; } </style> <script> $(window).load(function () { $('#loading').hide(); }); </script> <script> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script> </head> <body onload="MobileDetect();"> <input type="hidden" id="userEmail" /> <div class="module mid"> <table width="90%" height="20px" border="0" align="center"> <tr> <td align="left" width="200px"> <h3><font color="#919191">Brandon</font><font color="#FF9A00">Auto</font></h3> </td> <td align="left" width="300px"> <font size="3px"><div id="location"></div></font> </td> <td align="right" width="120px"> <a href='contact-us.html'><i class='a fa-envelope'></i><font size="2px">Contact</font></a> </td> <td align="right" width="120px"> <i class='fa fa-phone'></i><font size="2px">(469) 733-8574</font> </td> <td align="right" width="120px"> <a href="Login.html"><i class='fa fa-lock'></i><font size="2px">Login</font></a> </td> <td align="right" width="120px"> <a href="Register.html"><i class='fa fa-registered'></i><font size="2px">Register</font></a> </td> <td align="right"> <div id="user"></div> </td> </tr> </table> </div> <div id="sticky_navigation_wrapper"> <div id="sticky_navigation"> <img src="template/images/HeaderPanel1.png" width="100%" /> <img src="template/images/HeaderPanel2.png" width="100%" /> </div> </div> <br /> <br /> <br /> <ul id="priNav"> <li class="first"><a href="/" id="priNav_Home" title="">Home</a></li> <li><a href="autoIndex.html" title="Used Car"><font color="green"><B>Used Car</B></font></a></li> <li><a href="motoIndex.html" title="Used Motocycle">Used Motocycle</a></li> <li><a href="partIndex.html" title="Garage Sale">Garage Sale</a></li> <li class="last"><a href="" title="">About Brandon Auto</a></li> </ul> <br /> <br /> <br /> <br /> <table align="center" width="75%" border="0"> <tr> <td width="25%"> <ul id="finderNav"> <li id="finderNav_head"></li> <li><a href="#" id="finderNav_makes" class="finderNavVehicle"><img src="template/images/leftBar1.png" /></a> </li> <li><a href="#" id="finderNav_body" class="finderNavVehicle"><img src="template/images/leftBar1.png" /></a> </li> <li><a href="#" id="finderNav_price" class="finderNavVehicle"><img src="template/images/leftBar1.png" /></a> </li> <li><a href="#" id="finderNav_d_summary" class="finderNavVehicle"><img src="template/images/leftBar1.png" /></a> </li> </ul> </td> <td width="75%" align="center"> <div class="w3-content w3-section" style="max-width:500px" align="right"> <img src="images/Infinity10.jpg" class="mySlides w3-animate-fading" style="width: 100%" /> <div id="banner"></div> </div> </td> </tr> </table> <!--</div>--> <table width="90%" align="center"> <tr> <td> <div class="row"> <div class="col-sm-3"> <div class="left-sidebar"> <h2>Search</h2> <div class="panel-group category-vehicles" id="accordian" height="400px"> <!--category-vehicles--> <div class="panel panel-default" align="left"> <h6>Change location</h6> <div id="stateList"></div> <h6>City</h6> <div id="cityList"></div> <h6>Body type</h6> <div id="bodyTypeList"></div> <h6>Auto Make</h6> <div id="autoMakeList"></div> <h6>Auto Model</h6> <div id="autoModelList"></div> <h6>Year</h6> <div id="YearList"></div> <h6>Color</h6> <div id="ColorList"></div> <h6></h6> <br /> <div align='center'><a href="index.html" class='btn btn-default btn-sm' style='width:70%' id="search">Search</a></div> </div> </div><!--/category-vehicles--> <div class='panel-body' align="left"> <ul> <li>Body Shop</li> <li><img src='images/DanielAuto.png' alt='' style='width:240px;height:350px' align='left' /></li> <li><b>Best Shop In-town</b></li> </ul> </div> <!--</div> </div>--> <!--</div>--> </div> </div> <!---#################################################################--> <div id="loading" class="loading"> <div class="loader"></div> </div> <div class="col-sm-9 padding-right"> <div class="new_vehicles"> <h2 class="title text-center">All Listing</h2> <!--new_vehicles--> <ul class="pagination" id="pagination"></ul> <div id="newVehicles"></div> </div><!--new_vehicles--> <div class="category-tab"> <!--category-tab--> <div class="col-sm-12"> <ul class="nav nav-tabs"> <li class="active"><a href="#Audi" data-toggle="tab">Audi</a></li> <li><a href="#BMW" data-toggle="tab">BMW</a></li> <li><a href="#Mercedes" data-toggle="tab">Mercedes-benz</a></li> <li><a href="#Porsche" data-toggle="tab">Porsches</a></li> <li><a href="#Jaguar" data-toggle="tab">Jaguar</a></li> <li><a href="#Tesla" data-toggle="tab">Tesla</a></li> </ul> </div> <div class="tab-content"> <div class="tab-pane fade active in" id="Audi"></div> <div class="tab-pane fade" id="BMW"></div> <div class="tab-pane fade" id="Mercedes"></div> <div class="tab-pane fade" id="Porsche"></div> <div class="tab-pane fade" id="Jaguar"></div> <div class="tab-pane fade" id="Tesla"></div> </div> <!--##################################Recommand##########################################--> </div> </div> </div> </td> </tr> </table> <div id="footer"> <div id="footer_box"> <ul id="footer_right"> <li><a href="www.brandoncode.com">RSS</a></li> </ul> <div class="clear"></div> </div> </div> <script> var slideIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } slideIndex++; if (slideIndex > x.length) { slideIndex = 1 } x[slideIndex - 1].style.display = "block"; setTimeout(carousel, 9000); // Change image every 2 seconds } </script> </body> </html>
Client Application
autoDetail.html This html will show the detail of an auto that user selected from the the autoIndex file
<!DOCTYPE html> <html> <head> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/android-icon-144x144.png"> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/apple-icon-152x152.png"> <link rel="icon" type="image/png" href="http://www.karcheap.com/favio1/favicon-32x32.png"> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <title>Details | Used Auto</title> <link href="Content/bootstrap.min.css" rel="stylesheet"> <link href="Content/main.css" rel="stylesheet"> <link href="Content/PhotoStyle.css" rel="stylesheet" type="text/css" /> <link href="Content/sticky-navigation.css" rel="stylesheet" /> <link href="Content/jqx.base.css" rel="stylesheet" type="text/css" /> <script src="Scripts/jquery.js"></script> <script src="Scripts/jqxcore.js"></script> <script src="Scripts/jqxdata.js"></script> <script src="Scripts/MyAngular/GeneraScripts.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script type="text/javascript"> var UserName; var UserPhone; var UserEmail; var autoMake; var autoModel; var DealerName; var DealerAddress; var AccountType = ""; var Logo; var totalView; var userState; var userStateId; var userCity; var deviceType = "desktop"; var module = "auto"; var sellerAccount = GetQueryString("accountNo"); var itemId = GetQueryString("recordId"); var userState = GetQueryString("userState"); var userCity = GetQueryString("userCity"); var ipAddress = GetQueryString("ipAddress"); var imgDisplay = GetQueryString("picture"); var autoMake = GetQueryString("autoMake"); var autoModel = GetQueryString("autoModel"); var autoYear = GetQueryString("autoYear"); var autoColor = GetQueryString("autoColor"); var bodyType = GetQueryString("bodyType"); var pageNumber = GetQueryString("page"); var visitorLocation = userState + "," + userCity; $("#sellerAccount").val(sellerAccount); $("#itemId").val(itemId); $("#userState").val(userState); $("#userCity").val(userCity); $("#ipAddress").val(ipAddress); AddVisitor(ipAddress); GetUserInfo(sellerAccount); AutoUsedDetail(itemId); var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; //January is 0! var yyyy = today.getFullYear(); $('#loading').show(); function AddVisitor(ipAddress) { jQuery.support.cors = true; var VisitorData = { "sellerAccount": sellerAccount, "deviceType": deviceType, "categoryType": module, "itemId": itemId, "autoMake": autoMake, "autoModel": autoModel, "picture": imgDisplay, "ipAddress": ipAddress, "visitDay": dd, "visitMonth": mm, "visitYear": yyyy, "location": userCity + ', ' + userState, "userLocation": "" }; $.ajax({ type: "POST", /* or type:"GET" or type:"PUT" */ url: "api/KarCheap/InsertVisitor", data: JSON.stringify(VisitorData), contentType: 'application/json; charset=utf-8', dataType: "json", success: function (r) { } }); return false; }; $(document).ready(function () { $('#saveMessage').click(function () { //debugger; // jQuery.support.cors = true; var buyerData = { SellerAccount: sellerAccount, BuyerMessage1: $('#buyerMessage').val(), itemId: itemId, deviceType: deviceType, module: module, MessageDate: today }; $.ajax({ type: "POST", /* or type:"GET" or type:"PUT" */ url: "api/KarCheap/InsertBuyerMessage", data: JSON.stringify(buyerData), contentType: 'application/json', dataType: "json", success: function (data, status, jqXHR) { $("#thankyouMessage").html("Thank you for contacting us. Your message has been sent to seller ... "); }, error: function (xhr) { $("#thankyouMessage").val("Unexpected error . Our technical staff will look into this "); //alert(xhr.responseText); } }); }); }); function GetUserInfo(sellerAccount) { //alert(sellerAccount); var userInfo = "http://localhost:59040/UsedCarService/Service1.svc/GetUserInfo/" + sellerAccount; //var userInfo = "api/KarCheap/GetUserInfo/" + sellerAccount; // prepare the data var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'AccountType', type: 'string' }, { name: 'DealerName', type: 'string' }, { name: 'DealerAddress', type: 'string' }, { name: 'UserName', type: 'string' }, { name: 'UserPhone', type: 'string' }, { name: 'UserEmail', type: 'string' }, { name: 'Logo', type: 'string' } ], id: 'ID', url: userInfo }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; for (var i = 0; i < length; i++) { var record = records[i]; AccountType = record.AccountType; $("#DealerName").html(record.DealerName); $("#DealerAddress").html(record.DealerAddress); $("#UserPhone").html(record.UserPhone); $("#UserEmail").html(record.UserEmail); $("#Logo").html(record.Logo); } } }); dataAdapter.dataBind(); } $('#showMap').click(function () { $("#messageDialog").load('map.html', function () { OpenMessageDialog(); }); function OpenMessageDialog() { var page = "showMap.html?address=" + DealerAddress; // Define the Dialog and its properties. $("#messageDialog").html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>') $("#messageDialog").dialog({ resizable: false, modal: true, title: "Message", height: 450, width: 850, buttons: { "Close": function () { $(this).dialog('close'); } } }); } }); /*************************************Banner*************************************************/ function AdvertiseBanner() { var html = "" html += "<table>" html += "<tr>" html += "<td>" html += "<div class='container' style='width:280px;height:250px'>" html += "<div class='panel panel-primary'>" html += "<div class='panel-heading'><font size=2>Auto Body Shop</font></div>" html += "<div class='panel-body'>" html += "<ul>" html += "<li>Body Shop</li>" html += "<li><img src='images/BodyShop2.jpg' alt='' style='width:200px;height:180px' align='left'/></li>" html += "<li>Auto Body Shop</li>" html += "<li><b>Best Shop In-town</b></li>" html += "</ul>" html += "</div>" html += "</div>" html += "</div>" html += "</div>" html += "</td>" html += "</tr>" html += "</table>" $("#advetiseBanner").html(html); } /*********************************************************************************************/ function SellerNotes(sellNotes) { var html = "" html += "<div class='row'>" html += "<div class='contact-form' align='center'>" html += "<h4 class='title text-center'>Seller Notes</h4>" html += "<div class='status alert alert-success'><font color='blue'></font></div>" html += "<div class='form-group col-md-12'>" html += "<textarea name='message' id='sellerNotes' ng-model='message' required='required' class='form-control' rows='5' placeholder='Your Message Here' style='width:80%'>" + sellNotes + "</textarea>" html += "</div>" html += "</div>" html += "</div>" html += "</div>" $("#sellerNotes").html(html); } /*********************************************************************************************/ function AutoUsedDetail(itemId) { var largeImage; var noteLength; var VINNO; ShowView("auto", itemId); jQuery.support.cors = true; // prepare the data var autoDetailUrl = "http://localhost:59040/UsedCarService/Service1.svc/AutoUsedDetail/" + itemId; //alert(autoDetailUrl); var source = { datatype: "json", datafields: [ { name: 'ID', type: 'int' }, { name: 'accountNumber', type: 'string' }, { name: 'stockNumber', type: 'string' }, { name: 'autoMake', type: 'string' }, { name: 'autoModel', type: 'string' }, { name: 'autoYear', type: 'int' }, { name: 'bodyType', type: 'string' }, { name: 'exteriorColor', type: 'string' }, { name: 'interiorColor', type: 'string' }, { name: 'autoEngine', type: 'int' }, { name: 'autoDoor', type: 'int' }, { name: 'autoMileage', type: 'float' }, { name: 'salePrice', type: 'money' }, { name: 'newPrice', type: 'money' }, { name: 'autoStatus', type: 'money' }, { name: 'userState', type: 'int' }, { name: 'userCity', type: 'string' }, { name: 'picture', type: 'string' }, { name: 'notes', type: 'string' }, { name: 'VIN', type: 'string' } ], id: 'ID', url: autoDetailUrl }; var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function (records) { // get data records. var records = dataAdapter.records; // get the length of the records array. var length = records.length; // alert('record length ' + length); for (var i = 0; i < length; i++) { var record = records[i]; var heading = record.autoYear.toString() + ' ' + record.autoMake + ' ' + record.autoModel; var price = record.salePrice; var stockNo = record.stockNumber; VINNO = record.VIN; var detail = 'Body Type : ' + record.bodyType + '<br>' + ' ExteriorColor : ' + record.exteriorColor + ' InteriorColor : ' + record.interiorColor + '<br>' + ' Doors : ' + record.autoDoor + '<br>' + ' Mileage : ' + record.autoMileage + '<br>' + ' Engine : ' + record.autoEngine + '<br>'; var location = record.userCity + ", " + getStateName(record.userState); autoMake = record.autoMake; autoModel = record.autoModel; noteLength = record.notes; if (stockNo == null || stockNo == "") { stockNo = "N/A"; } if (VINNO == null || VINNO == "") { VINNO = "N/A"; } // loop through the records and display them in a table.<div class="panel panel-default"> var html = "" html += "<div class='container' style='width:350px'>" html += "<div class='panel panel-default' width='100%'>" html += "<div class='panel-body'>" html += "<table border=1 width='100%' align='center'>" html += "<tr align='center'style='height:40px'>" html += "<td valign='top' height='20px'><h4>" + heading + "</h4></td>" html += "</tr>" html += "<tr align='center' style='height:40px'>" html += "<td height='25px'><h3><font color='blue'>$" + price.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1."); +"</font></h3></td>" html += "</tr>" html += "</table>" html += "<table border=0 width='100%'>" html += "<tr>" html += "<td valign='top' height='25px'><h5><span>Stock Number :</span></h5></td>" html += "<td valign='top' height='25px'><h5>" + stockNo + "</h5></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>VIN :</font></td>" html += "<td width='65%' align='left'><font size=2><b> " + VINNO + "</font></b></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>Body Type:</font></td>" html += "<td width='65%' align='left'><font size=2><b>" + record.bodyType + "</font></b></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>Exterior Color:</font></td>" html += "<td width='65%'><font size=2><b>" + record.exteriorColor + "</b></font></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>Interior Color: </font></td>" html += "<td width='65%'><font size=2><b>" + record.interiorColor + "</b></font></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>Engine: <b></b></font></td>" html += "<td width='65%'><font size=2><b>" + record.autoEngine + "</b></font></td>" html += "</tr>" html += "<tr>" html += "<td width='35%' align='right'><font size=2>Mileage: </font></td>" html += "<td width='65%'><font size=2><b>" + record.autoMileage.toLocaleString() + ' miles' + "</font></b></td>" html += "</tr>" html += "<tr>" html += "<td align='right'>Views :</td>" html += "<td align='left'> <b>" + totalView + "</b></td>" html += "</tr>" html += "</table>" html += "<table border=0 width='100%'>" html += "</table>" html += "</div>" html += "</div>" html += "</div>" $("#autoDetail").html(html); } if (noteLength == null || noteLength == "") { // alert("here"); } else { SellerNotes(noteLength); } } }); // perform data binding. dataAdapter.dataBind(); } $(document).ready(function () { imageList(); function imageList() { var fileExt = {}; var vImageFile = imgDisplay; //$('#imgDisplay').attr('src'); fileExt[0] = ".png"; fileExt[1] = ".jpg"; fileExt[2] = ".gif"; $.ajax({ //This will retrieve the contents of the folder if the folder is configured as 'browsable' url: 'http://localhost:97/Usedcare/AutoUsed/' + sellerAccount + "/" + itemId, success: function (data) { //List all png or jpg or gif file names in the page $(data).find("a:contains(" + fileExt[0] + "),a:contains(" + fileExt[1] + "),a:contains(" + fileExt[2] + ")").each(function () { filename = this.href.replace(window.location.host, "").replace("http:///", "http:/localhost:97/"); var imageName = filename.split('\\').pop().split('/').pop(); // alert(imgDisplay + "=" + filename); if (filename == vImageFile) { $("#leftNav").append("<img src='" + filename + "' style='width:50px;height:50px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #d5dd42' align='center' alt='" + filename.split("/").pop(-1) + "' title='" + filename.split("/").pop(-1) + "' onclick='showImage(\"" + filename + "\",\"" + filename.split("/").pop(-1) + "\");'/>"); } else { $("#leftNav").append("<img src='" + filename + "' data-ng-model='imgDisplay' style='width:50px;height:50px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' align='center' alt='" + filename.split("/").pop(-1) + "' title='" + filename.split("/").pop(-1) + "' onclick='showImage(\"" + filename + "\",\"" + filename.split("/").pop(-1) + "\");'/>"); } }); +$("#rightDisplay").append("<img id='currentImg' src='" + filename + "' style='width:95%;height:85%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;' alt='' title=''/></div>") } }); } }); function showImage(imgName, imgText) { var curImage = document.getElementById('currentImg'); var textDiv = document.getElementById('rightText'); curImage.src = imgName; curImage.alt = imgName; curImage.title = imgName; document.getElementById('imageName').value = curImage.alt; textDiv.innerHTML = imgText; } $(document).ready(function () { $('#back').click(function (e) { //searchbyState setTimeout(function () { document.location.href = 'autoIndex.html?fiel_l=psy-28173.32.18.2.11.12.0.250.2467.0j167.0j14j2.16.0....0...1c.1.64.psy-ab..3.29.2813.0..0i131k1j0i3k1j0i22i30k1.0.wa9Ln_tUXmU&page=' + pageNumber + '&userState=' + userState + '&userCity=' + userCity + '&recordId=' + itemId + '&ipAddress=' + ipAddress + '&bodyType=' + bodyType + '&autoMake=' + autoMake + '&autoModel=' + autoModel + '&autoYear=' + autoYear + '&autoColor=' + autoColor }, 500); }) }); </script> <script> //showMenu(recordId); function showMenu(recordId) { var html = ""; html += "<div class='polaroid1' style='height:700px'>" html += "<table>" html += "<tr>" html += "<td valign='top'>" html += "<a href='Detail.html?recordId=" + recordId + "'><img src='images/Back.png' /></a>" html += "</td>" html += "<td valign='top'>" html += "<H4>BACK</H4>" html += "</td>" html += "</tr>" html += "</table>" html += "<H3>Rental</H3>" html += "<HR>" html += "<table border='0' width='85%'>" html += "<tr>" html += "<td valign='top'>" html += "<table>" html += "<tr>" html += "<td valign='top'>" html += "<LABEL>Detail</LABEL>" html += "</td>" html += "</tr>" html += "<tr>" html += "<td>" html += "<a href='Detail.html?recordId=" + recordId + "'><img src='images/detail1.png' width='50px' /></a>" html += "</td>" html += "<td valign='top' align='right'>" html += "<img src='images/currentShow.png' />" html += "</td>" html += "</tr>" html += "</table>" html += "</td>" html += "</tr>" html += "</table>" html += "<HR>" html += "<table border='0' width='85%'>" html += "<tr>" html += "<td valign='top'>" html += "<table>" html += "<tr>" html += "<td valign='top'>" html += "<LABEL>Map</LABEL>" html += "</td>" html += "</tr>" html += "<tr>" html += "<td>" html += "<a href='MapDirection.html?recordId=" + recordId + "'><img src='images/map2.png' width='50px' /></a>" html += "</td>" html += "</tr>" html += "</table>" html += "</td>" html += "</tr>" html += "</table>" html += "<HR>" html += "<table border='0' width='85%'>" html += "<tr>" html += "<td valign='top'>" html += "<table>" html += "<tr>" html += "<td valign='top'>" html += "<LABEL>Calendar</LABEL>" html += "</td>" html += "</tr>" html += "<tr>" html += "<td>" html += "<a href='Calendar.html?recordId=" + recordId + "'><img src='images/calendar1.png' width='50px' /></a>" html += "</td>" html += "</tr>" html += "</table>" html += "</td>" html += "</tr>" html += "</table>" html += "<HR>" html += "</div>" $("#menu").html(html); } $('#loading').hide(); </script> <style> div.polaroid { width: 100%; height: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19); text-align: left; padding: 5px; } div.container { width: 95%; padding: 10px; } </style> <style type="text/css"> .loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #fff; } .loader { left: 50%; margin-left: -4em; font-size: 10px; border: .8em solid rgba(218, 219, 223, 1); border-left: .8em solid rgba(58, 166, 165, 1); animation: spin 1.1s infinite linear; } .loader, .loader:after { border-radius: 50%; width: 4em; height: 4em; display: block; position: absolute; top: 50%; margin-top: -4.05em; } @keyframes spin { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } </style> <script> $(window).load(function () { $('#loading').hide(); }); </script> <script> $(function () { $(this).bind("contextmenu", function (e) { //e.preventDefault(); }); }); </script> </head> <body> <input type="hidden" id="itemId" /> <div id="header"> <img src="template/images/HeaderPanel.png" width="100%" height="60px" /> <img src="template/images/HeaderPanel1.png" width="100%" /> <div class='logo pull-center'> <img src="images/Prev1.png" id="back" style="width:40px" /> </div> </div> <br /> <br /> <br /> <div class="container" style="width:95%"> <div class="row"> <div class='col-sm-2'> <table border="0"> <tr> <td> <div class='panel-body'> <ul> <li>Body Shop</li> <li><img src='images/DanielAuto.png' alt='' style='width:240px;height:350px' align='left' /></li> <li><b>Best Shop In-town</b></li> </ul> </div> </td> </tr> </table> </div> <div id="loading" class="loading"> <div class="loader"></div> </div> <div class='col-sm-6'> <table border="0" align="right" style='width:92%;height:420px'> <tr> <td align="center"> <div id="imageName"></div> </td> </tr> <tr> <td align="center"> <div id="rightDisplay"></div> </td> </tr> <tr> <td> <div id="rightText" align="center" style="font-size:12pt"> </div> </td> </tr> <tr> <td align="center"> <div id="thumbs"> <div id="leftNav"></div> </div> </td> </tr> </table> </div> <div class='col-sm-3'> <div id="autoDetail"></div> <table border=0 width='100%' style='font-size:11pt'> <tr> <td></td> <td>Contact Us at</td> </tr> <tr> <td class='glyphicon glyphicon-home form-control-feedback'></td> <td><font size=3><div id="DealerName"></div></font></td>" </tr> <tr> <td class='glyphicon glyphicon-road form-control-feedback'></td> <td><div id="DealerAddress"></div></td> </tr> <tr> <td class='glyphicon glyphicon-phone form-control-feedback'></td> <td><div id="UserPhone"></div></td> </tr> <tr> <td class='glyphicon glyphicon-phone form-control-feedback'></td> <td><div id="UserEmail"></div></td> </tr> <tr> <td class='glyphicon glyphicon-envelope form-control-feedback'></td> <td></td> </tr> </table> <input type="button" id="showMap" align="center" value="MAP"> </div> </div> </div> <div class="container"> <div class="row"> <div id="sellerNotes"></div> <div class="row"> <div class="contact-form" align="center"> <h4 class="title text-center">Send message to seller</h4> <div class="status alert alert-success"> <font color="blue"><div id="thankyouMessage"></div></font> </div> <div class="form-group col-md-12"> <textarea name="message" id="buyerMessage" required="required" class="form-control" rows="8" placeholder="Your Message Here" style="width:640px"></textarea> </div> <div class="form-group col-md-9"> <input type="button" name="submit" id="saveMessage" class="btn btn-primary pull-right" value="Submit" style="margin-right: 5px;height:24px;font-size:12px;"> </div> </div> </div> </div> <div id="messageDialog"></div> </div> </body> </html>
Client Application
Let create a open Visualstudio 2017 to create Client App.
No results found