@page @model NorthwindRazor.Pages.Products_ListCrudModel @{ ViewData["Title"] = "List of Products"; } @section AdditionalCss { <link rel="stylesheet" href="~/css/ui.jqgrid.min.css" /> } @section AdditionalJavaScript { <script src="~/js/jqgrid-i18n/grid.locale-en.min.js" asp-append-version="true"></script> <script src="~/js/jquery-jqgrid-4.13.2.min.js" asp-append-version="true"></script> @await Html.PartialAsync("_ValidationScriptsPartial") <script src="~/js/jqgrid-listcrud.js" asp-append-version="true"></script> <script type="text/javascript"> var addEditTitle = "Products"; var urlAndMethod = "/Products/Products_ListCrud"; function addItem() { clearFields(); resetValidationErrors(); showHideItem(null); $("#productID").attr('disabled', true); } function editItem(productID, productName, supplierID, categoryID, quantityPerUnit, unitPrice, unitsInStock, unitsOnOrder, reorderLevel, discontinued) { clearFields(); resetValidationErrors(); showHideItem(productID); $("#productID").attr('disabled', false); $("#productID").val(productID); $("#productName").val(productName.replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n')); $("#supplierID").val(supplierID); $("#categoryID").val(categoryID); $("#quantityPerUnit").val(quantityPerUnit.replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n')); $("#unitPrice").val(unitPrice); $("#unitsInStock").val(unitsInStock); $("#unitsOnOrder").val(unitsOnOrder); $("#reorderLevel").val(reorderLevel); if (discontinued.toLowerCase() == "yes") $("#discontinued").prop('checked', true); else $("#discontinued").prop('checked', false); return false; } function clearFields() { $("#productID").val(''); $("#productName").val(''); $("#supplierID").val(''); $("#categoryID").val(''); $("#quantityPerUnit").val(''); $("#unitPrice").val(''); $("#unitsInStock").val(''); $("#unitsOnOrder").val(''); $("#reorderLevel").val(''); $("#discontinued").removeAttr('checked'); } function getSerializedData() { var productID = $('#productID').val(); if (productID == '') productID = '-1'; var serializedData = "'ProductID':'" + productID + "'," + "'ProductName':'" + $('#productName').val().replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n').replace(/'/g, "\\'") + "'," + "'SupplierID':'" + $('#supplierID').val() + "'," + "'CategoryID':'" + $('#categoryID').val() + "'," + "'QuantityPerUnit':'" + $('#quantityPerUnit').val().replace(/~APOS/g, "'").replace(/~QUOT/g, '"').replace(/~NEWL/g, '\n').replace(/'/g, "\\'") + "'," + "'UnitPrice':'" + $('#unitPrice').val() + "'," + "'UnitsInStock':'" + $('#unitsInStock').val() + "'," + "'UnitsOnOrder':'" + $('#unitsOnOrder').val() + "'," + "'ReorderLevel':'" + $('#reorderLevel').val() + "'," + "'Discontinued':'" + $('#discontinued').is(':checked') + "'"; return serializedData; } function isDataValid() { var isValid = true; // get item values that needs to be validated var productName = $('#productName').val(); var quantityPerUnit = $('#quantityPerUnit').val(); var unitPrice = $('#unitPrice').val(); var unitsInStock = $('#unitsInStock').val(); var unitsOnOrder = $('#unitsOnOrder').val(); var reorderLevel = $('#reorderLevel').val(); // clear all validation messages $('#productNameValidation').text(''); $('#quantityPerUnitValidation').text(''); $('#unitPriceValidation').text(''); $('#unitsInStockValidation').text(''); $('#unitsOnOrderValidation').text(''); $('#reorderLevelValidation').text(''); // validation if (productName == '') { isValid = false; $("#productNameValidation").text('Product Name is required.'); } if (productName.length > 40) { isValid = false; $("#productNameValidation").text('Product Name must be 40 characters or less.'); } if (quantityPerUnit.length > 20) { isValid = false; $("#quantityPerUnitValidation").text('Quantity Per Unit must be 20 characters or less.'); } if (unitPrice != '' && !isDecimal(unitPrice)) { isValid = false; $("#unitPriceValidation").text('Unit Price must be a decimal.'); } if (unitPrice != '' && isDecimal(unitPrice) && !isWithinMoneyRange(unitPrice)) { isValid = false; $("#unitPriceValidation").text('Unit Price must be a valid decimal.'); } if (unitsInStock != '' && !isNumeric(unitsInStock)) { isValid = false; $("#unitsInStockValidation").text('Units In Stock must be an integer.'); } if (unitsInStock != '' && isNumeric(unitsInStock) && !isWithinInt16Range(unitsInStock)) { isValid = false; $("#unitsInStockValidation").text('Units In Stock must be between -32768 and 32767.'); } if (unitsOnOrder != '' && !isNumeric(unitsOnOrder)) { isValid = false; $("#unitsOnOrderValidation").text('Units On Order must be an integer.'); } if (unitsOnOrder != '' && isNumeric(unitsOnOrder) && !isWithinInt16Range(unitsOnOrder)) { isValid = false; $("#unitsOnOrderValidation").text('Units On Order must be between -32768 and 32767.'); } if (reorderLevel != '' && !isNumeric(reorderLevel)) { isValid = false; $("#reorderLevelValidation").text('Reorder Level must be an integer.'); } if (reorderLevel != '' && isNumeric(reorderLevel) && !isWithinInt16Range(reorderLevel)) { isValid = false; $("#reorderLevelValidation").text('Reorder Level must be between -32768 and 32767.'); } if (isValid) return true; else return false; } $(function () { InitializeAddUpdateRecordDialog(); $('.datetextbox').datepicker({ dateFormat: "m/d/yy" }); $('#list-grid').jqGrid({ url: '/Products/Products_ListCrud?handler=GridData', datatype: 'json', mtype: 'GET', colNames: ['Product ID','Product Name','Supplier ID','Category ID','Quantity Per Unit','Unit Price','Units In Stock','Units On Order','Reorder Level','Discontinued', '', ''], colModel: [ { name: 'ProductID', index: 'ProductID', align: 'right' }, { name: 'ProductName', index: 'ProductName', align: 'left' }, { name: 'SupplierID', index: 'SupplierID', align: 'right' }, { name: 'CategoryID', index: 'CategoryID', align: 'right' }, { name: 'QuantityPerUnit', index: 'QuantityPerUnit', align: 'left' }, { name: 'UnitPrice', index: 'UnitPrice', align: 'right', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "$"} }, { name: 'UnitsInStock', index: 'UnitsInStock', align: 'right', formatter: 'integer' }, { name: 'UnitsOnOrder', index: 'UnitsOnOrder', align: 'right', formatter: 'integer' }, { name: 'ReorderLevel', index: 'ReorderLevel', align: 'right', formatter: 'integer' }, { name: 'Discontinued', index: 'Discontinued', align: 'center', formatter: 'checkbox' }, { name: 'editoperation', index: 'editoperation', align: 'center', width: 40, sortable: false }, { name: 'deleteoperation', index: 'deleteoperation', align: 'center', width: 40, sortable: false } ], pager: $('#list-pager'), rowNum: 10, pageable: true, jsonReader: { page: "d.page" }, rowList: [5, 10, 20, 50], sortname: 'ProductID', sortorder: "asc", viewrecords: true, caption: 'List of Products', height: '100%', width: '1200', gridComplete: function () { var ids = jQuery("#list-grid").jqGrid('getDataIDs'); for (var i = 0; i < ids.length; i++) { var currentid = ids[i]; var productID = jQuery("#list-grid").jqGrid('getCell', ids[i], 'ProductID'); var productName = jQuery("#list-grid").jqGrid('getCell', ids[i], 'ProductName').replace(/'/g, '~APOS').replace(/"/g, '~QUOT').replace(/\n/g, '~NEWL'); var supplierID = jQuery("#list-grid").jqGrid('getCell', ids[i], 'SupplierID'); var categoryID = jQuery("#list-grid").jqGrid('getCell', ids[i], 'CategoryID'); var quantityPerUnit = jQuery("#list-grid").jqGrid('getCell', ids[i], 'QuantityPerUnit').replace(/'/g, '~APOS').replace(/"/g, '~QUOT').replace(/\n/g, '~NEWL'); var unitPrice = jQuery("#list-grid").jqGrid('getCell', ids[i], 'UnitPrice'); var unitsInStock = jQuery("#list-grid").jqGrid('getCell', ids[i], 'UnitsInStock'); var unitsOnOrder = jQuery("#list-grid").jqGrid('getCell', ids[i], 'UnitsOnOrder'); var reorderLevel = jQuery("#list-grid").jqGrid('getCell', ids[i], 'ReorderLevel'); var discontinued = jQuery("#list-grid").jqGrid('getCell', ids[i], 'Discontinued'); editLink = "<a href='#' onclick=\"editItem('" + productID + "','" + productName + "','" + supplierID + "','" + categoryID + "','" + quantityPerUnit + "','" + unitPrice + "','" + unitsInStock + "','" + unitsOnOrder + "','" + reorderLevel + "','" + discontinued + "')\"><img src='/images/Edit.gif' style='border:none;' /></a>"; deleteLink = "<a href='#' onclick=\"deleteItem('" + currentid + "')\"><img src='/images/Delete.png' style='border:none;' /></a>"; jQuery("#list-grid").jqGrid('setRowData', ids[i], { editoperation: editLink }); jQuery("#list-grid").jqGrid('setRowData', ids[i], { deleteoperation: deleteLink }); } } }); }); // rename the page parameter to _page because asp.net core razor's page model // does not recognize the page parameter when passed $.extend(jQuery.jgrid.defaults, { prmNames: { page: "_page" } }); </script> } <h2>@ViewData["Title"]</h2> <br /><br /> <div id="addUpdateRecordDialog" title="Add New Products"> <form method="post"> <div> <fieldset> <legend></legend> <table> <tr id="trPrimaryKey"> <td class="editor-label"><label asp-for="Products.ProductID"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="Products.ProductID" id="productID" readonly="readonly" /></td> <td class="editor-field"></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.ProductName"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="Products.ProductName" id="productName" onblur="isDataValid()" /></td> <td class="editor-field"><span id="productNameValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.SupplierID"></label>:</td> <td></td> <td class="editor-field"><select id="supplierID" asp-for="Products.SupplierID" asp-items="@(new SelectList(Model.SuppliersDropDownListData, "SupplierID", "CompanyName"))"><option value="">Select One</option></select></td> <td class="editor-field"></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.CategoryID"></label>:</td> <td></td> <td class="editor-field"><select id="categoryID" asp-for="Products.CategoryID" asp-items="@(new SelectList(Model.CategoriesDropDownListData, "CategoryID", "CategoryName"))"><option value="">Select One</option></select></td> <td class="editor-field"></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.QuantityPerUnit"></label>:</td> <td></td> <td class="editor-field"><input asp-for="Products.QuantityPerUnit" id="quantityPerUnit" onblur="isDataValid()" /></td> <td class="editor-field"><span id="quantityPerUnitValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.UnitPrice"></label>:</td> <td></td> <td class="editor-field"><input asp-for="Products.UnitPrice" id="unitPrice" onblur="isDataValid()" /></td> <td class="editor-field"><span id="unitPriceValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.UnitsInStockHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="Products.UnitsInStockHidden" id="unitsInStock" onblur="isDataValid()" /></td> <td class="editor-field"><span id="unitsInStockValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.UnitsOnOrderHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="Products.UnitsOnOrderHidden" id="unitsOnOrder" onblur="isDataValid()" /></td> <td class="editor-field"><span id="unitsOnOrderValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.ReorderLevelHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="Products.ReorderLevelHidden" id="reorderLevel" onblur="isDataValid()" /></td> <td class="editor-field"><span id="reorderLevelValidation" style="color: red;"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="Products.Discontinued"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="Products.Discontinued" type="checkbox" id="discontinued" /></td> <td class="editor-field"></td> </tr> <tr> <td colspan="2"></td> <td colspan="2"> <br /> <input id="inputAdd" name="inputAdd" type="button" value="Add" class="button-150" onclick="saveNewItem()" /> <input id="inputUpdate" name="inputUpdate" type="button" value="Update" class="button-150" onclick="updateCurrentItem()" /> <input type="button" value="Cancel" onclick="closeDialog(); return false;" class="button-100" /> </td> </tr> </table> </fieldset> </div> </form> </div> <div id="errorConfirmationDialog"></div> <div id="errorDialog"></div> <a href="#" onclick="addItem()"><img src="@Url.Content("~/images/Add.gif")" alt="Add New Products" style="border: none;" /></a> <a href="#" onclick="addItem()">Add New Products</a> <br /><br /> <table id="list-grid"></table> <div id="list-pager"></div>