@model NorthwindAPI.ViewModels.ProductsViewModel @{ ViewBag.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/Delete/"; 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 () { InitializeAddUpdateRecordDialog(); $('.datetextbox').datepicker({ dateFormat: "m/d/yy" }); $('#list-grid').jqGrid({ url: '/Products/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, 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 }); } } }); }); </script> } <h2>@ViewBag.Title</h2> <br /><br /> <div id="addUpdateRecordDialog" title="Add New Products"> <form asp-controller="@Model.ViewControllerName" asp-action="@Model.ViewActionName" method="post"> <div> <fieldset> <legend></legend> <table> <tr id="trPrimaryKey"> <td class="editor-label"><label asp-for="ProductsModel.ProductID"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="ProductsModel.ProductID" id="productID" readonly="readonly" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.ProductID"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.ProductName"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="ProductsModel.ProductName" id="productName" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.ProductName"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.SupplierID"></label>:</td> <td></td> <td class="editor-field"><select id="supplierID" asp-for="ProductsModel.SupplierID" asp-items="@(new SelectList(Model.SuppliersDropDownListData, "SupplierID", "CompanyName"))" id="supplierID"><option value="">Select One</option></select></td> <td class="editor-field"><span asp-validation-for="ProductsModel.SupplierID"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.CategoryID"></label>:</td> <td></td> <td class="editor-field"><select id="categoryID" asp-for="ProductsModel.CategoryID" asp-items="@(new SelectList(Model.CategoriesDropDownListData, "CategoryID", "CategoryName"))" id="categoryID"><option value="">Select One</option></select></td> <td class="editor-field"><span asp-validation-for="ProductsModel.CategoryID"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.QuantityPerUnit"></label>:</td> <td></td> <td class="editor-field"><input asp-for="ProductsModel.QuantityPerUnit" id="quantityPerUnit" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.QuantityPerUnit"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.UnitPrice"></label>:</td> <td></td> <td class="editor-field"><input asp-for="ProductsModel.UnitPrice" id="unitPrice" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.UnitPrice"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.UnitsInStockHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="ProductsModel.UnitsInStockHidden" id="unitsInStock" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.UnitsInStockHidden"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.UnitsOnOrderHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="ProductsModel.UnitsOnOrderHidden" id="unitsOnOrder" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.UnitsOnOrderHidden"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.ReorderLevelHidden"></label>:</td> <td></td> <td class="editor-field"><input asp-for="ProductsModel.ReorderLevelHidden" id="reorderLevel" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.ReorderLevelHidden"></span></td> </tr> <tr> <td class="editor-label"><label asp-for="ProductsModel.Discontinued"></label>:</td> <td><span style="color: red;">*</span></td> <td class="editor-field"><input asp-for="ProductsModel.Discontinued" type="checkbox" id="discontinued" /></td> <td class="editor-field"><span asp-validation-for="ProductsModel.Discontinued"></span></td> </tr> <tr> <td colspan="2"></td> <td colspan="2"> <br /> <input id="inputSubmit" name="inputSubmit" type="submit" value="Add" class="button-150" /> <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>