.NET GENES

Good evening, When working with Detail View option in Bootstrap-Table by Wenzhixin, there's a possibility that you have to render the details information using a table element to the detail view with same number of columns and headers of the parent table as per client request. However, upon rendering the details view with the table element, the child table's columns are not aligned with the parent Bootstrap-Table such as the sample screen below. I tried different solutions such as CSS, jQuery/JavaScript and MutationObserver Pattern which work for a few details view and the rest would be in disarray. Before presenting the solution, here are the codes involved in this project. Bootrap Table With data-detail-view property enabled. <table id= "tblDetailsReport" class= "TableBorderCollapse table-striped" data-toggle= "table" data-sort-name= "JobNumber" data-sort-order= "asc" data-search= "t...

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, When working with the Bootstrap-Table by Wenzhixin in a specific project, I encountered an issue which is the value of input controls such as checkbox and textbox were lost when I performed searching, filtering or pagination of the Bootstrap-Table. I tried several solutions presented in github and the documentation such as setting the properties of data-maintain-meta-data or data-maintain-selected to true and much more. After a few hours, I did found the solution in the documentation which is Saving Row Data Using Input . The solution is to fetch the current value of the control and call Bootstrap-Table updateRow method to preserve the values. The entire page is shown below including it's JavaScript code. @{ ViewBag.Title = "Home Page"; } <div class= "row" > <div id= "divPeople" class= "col-md-12" > <div class= "table-responsive" > <table id= "tblPeople" ...

Good afternoon! Given that you have a HTML form loaded on a page or partial view that utilize the jQuery Unobtrusive Validation that requires the user to input a note before submitting a form. However, upon running the page or partial view, the error message will always show or appear even without user interaction on page load. @model Portal.Models.JobTicketNote @{ Layout = ""; } <script src= "~/Scripts/jquery.validate.js" ></script> <script src= "~/Scripts/jquery.validate.unobtrusive.js" ></script> @using (Ajax.BeginForm("ManageJobTicketNote", "GGSDashboard", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "JobTicketNotesTable" }, new { @id = "frmManageJobTicket" })) { @Html.AntiForgeryToken() @Html.HiddenFor(m => m.DataID) @Html.HiddenFor(m => m.ButtonActivity) if (Model.ButtonActivity.Equals("Edit",...

Good evening. Here's an ASP.NET MVC example of showing a confirm dialog with yes/no button that returns a result either to submit a form or not using jQuery UI Dialog. This is useful especially if the form consists of multiple buttons that have the capability to submit a form. Say for example, a form has a save and delete buttons inside the BeginForm() statement and you want to extend the feature of the delete button that is to notify the user if he/she wishes to proceed with removing the form information. The existing method of showing a confirm dialog which has been practiced since ASP Classic is using the JavaScript Window.confirm dialog. But for this demo, I'll choose the jQuery UI Dialog instead of the traditional confirm dialog because the UI is more presentable to the user and this tutorial won't include database interaction for simplicity sake. To begin with, create an empty ASP.NET MVC project and add Nuget packages for jQueryUI.Combined and Bootstrap . Then ...

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 ...

Hello and Good Evening! This post demonstrates how to implement an AutoComplete TextBox in ASP.NET MVC using jQuery UI and Entity Framework. I've had applied this concept to some of my projects and has been helpful to the clients and users using the application. Enough of the chitchat and lets get started by simply following the steps below. 1. Create an ASP.NET MVC project and add NuGet packages for Bootstrap and jQuery UI. 2. Add an Entity Framework model to the project using one of Microsoft's sample database called AdventureWorks . 3. In your _Layout.cshtml, make sure to reference the jQuery library inside the head tag so that the jQuery UI will work as expected. <!DOCTYPE html> <html> <head> <meta charset= "utf-8" /> <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <title>@ViewBag.Title - My ASP.NET Application</title> <script src= "~/Scripts/jque...