.NET GENES

Hello and Good day! In this blog post I will demonstrate on how to add a select or dropdown control in Bootstrap-Table by Wenzhixin with an OnChange() event in ASP.NET Core MVC. For this tutorial, I will only fetch records from a List variable with fake information and not from a database for simplicity sake. To begin create an ASP.NET Core MVC using Visual Studio that targets the .NET 5 Framework and perform the rest of the steps below. I. Project Setup A. Add via libman the Bootstrap-Table by Wenzhixin using CDN as the option. B. Add via libman font-awesome using CDN as the option. C. Add the latest tableExport.js to bootstrap-table folder. D. Add Nuget Package Microsoft.AspNetCore.Mvc.NewtonsoftJson 5.x E. Add a new class in the Models folder called Product.cs Here's the project structure. II. Coding The Project A. Product.cs - Add properties that describe a product. The status property is where the Dropdown of the Boostrap-Table is bound to. public class Product {

Good evening, This blog post demonstrates on how to upload or send a form with multiple files using HttpPostedFileBase class which is a property of a model class using jQuery and ajax in ASP.NET MVC. Given a sample model, I have declared a HttpPostedFileBase array property which is responsible for handling multiple files. public class clsWeeklyStatusReports { public Guid ID { get ; set ; } public string DomainName { get ; set ; } public string EmployeeName { get ; set ; } public DateTime SubmissionDate { get ; set ; } public string SubmissionDateDisplay { get { return SubmissionDate.ToString( "MM/dd/yyyy" ); } } public string MimeType { get ; set ; } public string FileName { get ; set ; } public HttpPostedFileBase[] Files { get ; set ; } public clsWeeklyStatusReportsGM() { ID = Guid.Empty; DomainName = string .Empty; EmployeeName = string .Empty; MimeType = string .Empty; FileName = string .Empty

Team, Here's an example of how to perform a cascading dropdown in ASP.NET MVC using jQuery and Entity Framework as the ORM. This example will use Microsoft's sample database called WideWorldImporters . So to start with, we need to create an ASP.NET MVC Project and add bootstrap and jQuery files through NuGet. Then add an ADO.NET Entity Data Model (Entity Framework) which maps to the WideWorldImporters database. Once done, add a new class called CountryStatesCitiesViewModel with an enumerable property called CountryList which contains country values that will bind to the country dropdownlist control in the UI. public class CountryStatesCitiesViewModel { public IEnumerable<SelectListItem> CountryList { get ; set ; } } Add a controller called Home with a default Index ActionResult method that retrieves country list from the database and store them to the model used for data binding of the dropdownlist control. I checked the WideWorldImporters db and found out

Good evening all! When working with checkboxes in Bootstrap Table created by Wenzhixin, you may have notice that on page load the checkboxes are checked by default. If you want to uncheck these checkboxes on page load of your ASP.NET MVC page, call the checkInvert method of the bootstrap table on document ready of the page such as the code below: $(document).ready( function () { UncheckShoppingCartTable(); }); function UncheckShoppingCartTable() { $( '#tblShoppingCart' ).bootstrapTable( 'checkInvert' ); }

Good afternoon fellow programmers! I recently have a task to load a Script template that contains HTML markup to a page dynamically. But before loading the template, I need to change the attribute values of certain elements such as id and name. However, reading the template object made it difficult for me to convert it to an HTML object so I can traverse and manipulate the DOM. After doing research and some experiments, I found the solution presented below on how to read the value of a Script template and be able to use jQuery methods to traverse and update the DOM elements. Sample Script Template To Load In A Page <script type= "text/html" id= "templateGroup" > <div name= 'divChildSkill_' class= "col-md-12" id= "divChildSkill_" > <div class= "col-md-12" > <div class= "col-md-6" > <div class= "col-md-4" > <label id= "anchorLabel" >&l

Good evening fellow developers! Here's are solutions on how to obtain the Bootstrap-Table by Wenzhixin data if the check all event is fired. The first one loops through the table rows and then looks for the element in the row that holds the data either in the element attribute or innerText and retrieves it using jQuery methods. $( '#AttachmentsTable' ).on( 'check-all.bs.table' , function (e, rows) { var allrows = $( "#AttachmentsTable tr" ); downloadAttachmentsArray.length = 0 ; downloadAttachmentsArray = []; $.each(allrows, function (i, item) { if (i > 0 ) { var aElem = $(item).find( 'a' ).attr( 'file' ); downloadAttachmentsArray.push({ Filename : aElem }); } }); }); The better solution uses the built-in getData method of the bootstrap table which returns an array. And then you may then loop through that array to get the data. $( '#AttachmentsTable' ).o

Good afternoon! I'm working on a ASP.NET MVC which uses the oldest version of Bootstrap which 3.0. Normally when working with modals, the hide() function works if using updated versions of the Bootstrap given the code below. The snippet should close the modal after a form has been submitted but this doesn't work as expected when working with the oldest version. $( "#modal-add" ).on( "submit" , "#form-add" , function (e) { e.preventDefault(); var form = $( this ); $.ajax({ url: form.attr( "action" ), method: form.attr( "method" ), data: form.serialize(), success: function (data) { $( "#modal-add" ).modal( 'hide' ); //close modal function $( "#tblEmployee" ).bootstrapTable( 'load' , data); showAlert( 'Saving of record successful!' , 'success' ); }, error: function (er) { showAlert( 'Error saving record. Please try again later.' , 'dan

Given the sorting function below to sort dates, this doesn't add checking for invalid date values. In return, the sorting doesn't do any effect on the data provided. var DateSortWithValidation = function (a, b) { var dateA = new Date(a); var dateB = new Date(b); if (dateA < dateB) return -1; if (dateA > dateB) return 1; return 0; }; So I made a little modification to the function using isNan() for date validation which sorts the dates properly. var DateSortWithValidation = function (a, b) { var dateA = new Date(a); var dateB = new Date(b); if (isNaN(dateA)) { return 1; } else if (isNaN(dateB)) { return -1 } else { if (dateA < dateB) return -1; else if (dateA > dateB) return 1; else return 0; } }; Usage of the function. $(document).ready( function () { var dates = [ new Date( '08/25/2018' ), new Date( 'test' ), new Date( '09/15/2018' ), new Date( &#

I have this script below that will insert a dynamically defined script tag next to an existing script element in an ASP.NET MVC page. $(document).ready( function () { script.type = "text/javascript" ; script.src = '/Scripts/bootstrap3.2.0.js' ; $(script).insertAfter( 'script[src*="bootstrap.js"]' ); $( 'script[src*="bootstrap.js"]' ).attr( 'src' , '' ); }); Using the script above, I wasn't able to achieve the output since it can't locate the particular script tag. Upon investigating the production site, it appears that the scripts are bundled and the code above has no effect. With slight modification of the code to check if a script is bundled, I managed to get the inserting of script working. $(document).ready( function () { var script = document.createElement( 'script' ); script.type = "text/javascript" ; script.src = '@Url.Content("~/Scripts/bootstrap3.2.0.js")&

Hello, Our team encountered this issue before when using jQuery.Validation in ASP.NET MVC and the solution that we have is to replace the jQuery Validation Plugin from version 1.8.0 to 1.11.1 . Until now, were still using this version. Cheers!

Hello, In this tutorial, I'll demonstrate on how to sort a date column of a Bootstrap Table by Wenzhixin using Moment.js. First is to create an empty ASP.NET MVC project and then add an ADO.NET Entity Model that references the Employee table of Northwinds database. Next is to define an Employee ViewModel class that will hold the information to be utilized by the Bootstrap table. public class EmployeeViewModel { public int EmployeeID { get ; set ; } public string EmployeeName { get ; set ; } public DateTime BirthDate { get ; set ; } public DateTime HireDate { get ; set ; } public string Address { get ; set ; } public string PostalCode { get ; set ; } public string Country { get ; set ; } } Then add a new controller called Employee that declares a Northwind context object, queries the database and returns the model object as JSON. public class EmployeeController : Controller { private NorthwindEntities _context; public EmployeeController() { _con

Basing from the post DataTable With Running Total Per Group which applies running total to a DataTable object, we can also achieve the same functionality through the front-end side by changing the structure of the GridView control given that this is an ASP.NET WebForm application. The snippet to set the control's data source is simple such as below: dt.Columns.AddRange( new DataColumn[ 5 ] { new DataColumn( "SrNo" , typeof ( int )), new DataColumn ( "PartyName" , typeof ( string )), new DataColumn ( "ItemName" , typeof ( string )), new DataColumn ( "ChqAmt" , typeof ( int )), new DataColumn ( "PartyCode" , typeof ( string ))}); dt.Rows.Add( 1 , "ABC Water Supply" , "Construction Service" , 400 , "ABC" ); dt.Rows.Add( 2 , "ABC Pump Services" , "Type 24 Engine Pump" , 150 , "ABC" ); dt.Rows.Add( 3 , "ABC Water Supply" , "12 Ft Wa