.NET GENES

Hello, I have a div inside a parent div that overlaps when rendered in Internet Explorer 11 browser. The parent div has a col-md-2 class. Other browsers such as Edge, Firefox and Chrome doesn't show this irregularity. After doing some spikes and testing, the solution for this is to set the child div's class to "row". <div class= "row" id= "chartReport" ></div> And in your css, remove the width and margin styles of the child div. #chartReport { border : 2px solid lightgray; background-color : white; /*width: 300px;*/ /*margin: 15px;*/ } Cheers!

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

Good afternoon! The previous two articles on using Bootstrap Tables by Wenzhixin were simply displaying, sorting and paging records. This tutorial will demonstrate on how apply filtering features to the table. First is to create an ASP.NET MVC project and then add an ADO.NET Entity Data Model that will use the Northwind Database Employees table. Next is to add an EmployeeView model that will be used as field names by the Bootstrap Table. The source code for the View Model and the EmployeeController is presented can be copied from this article Sort Bootstrap Table Date Column By Wenzhixin Using Moment.js In ASP.NET MVC . To enable filtering of the table, obtain the bootstrap-table-filter-control.js from the Bootstrap Table source code at github and reference it in your page as presented below: <link href= "~/Content/bootstrap.min.css" rel= "stylesheet" /> <link href= "~/Content/bootstrap-table.css" rel= "stylesheet" /> <script...

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

Good evening guys and gals! In this tutorial, I will show you on how to display records in tabular format using Bootstrap Table created by Wenzhixin in ASP.NET MVC. First, you need to have AdventureWorks Database since this is the database used in the demo. Next is to create an ASP.NET MVC project and then add an ADO.NET Entity Model that targets the AdventureWorks DB specifically the tables People , EmployeeDepartmentHistories , Departments , Shifts , BusinessEntityAddresses and Addresses . Proceed by adding an EmployeeViewModel class that contains properties of the Employee. This class will be used by the Bootstrap Table's columns property. public class EmployeeViewModel { public int BusinessEntityId { get ; set ; } public string EmployeeName { get ; set ; } public string Address { get ; set ; } public string PostalCode { get ; set ; } public string DepartmentName { get ; set ; } public string DepartmentGroupName { get ; set ; } public string Shif...

Hi, I was asked by a developer on how to fix the arrow which appears at the bottom of the calendar dropdown and not below the textbox. This issue was raised in my previous post Bootstrap DatePicker Control in ASP.NET Webforms . The solution is to reference the bootstrap-datepicker.css instead of bootstrap-datepicker3.standalone.css <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" /> <script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script> <script type= "text/javascript" src= "Scripts/bootstrap.min.js" ></script> <script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js" ></script> <script type= "text/javascript" > Output ...

Happy New Year! This post will illustrate on how to apply Bootstrap styling to a Repeater control given that the template used will be a Table element. To begin with, create an ASP.NET WebForm project. This application will retrieve Employee information from Northwinds database. Add an ADO.NET Entity Framework 6.0 to your project which will hook up with the Employee table. Add a WebForm page to your solution then drag a Repeater control inside the div tag below the form tag. Make sure to reference the bootstrap file in your head tag. The Repeater control will utilize the table element as it's template for displaying employee information. For the record, the employee photo will be shown on the left column, while the personal details are presented on the right column. The table also made use of Bootstrap's table css classes. <head runat= "server" > <title></title> <link href= "Content/bootstrap.css" rel= "stylesheet...

Here's an example ASP.NET MVC application that shows information in a DataList layout with pagination using PagedList Pager. The project also integrates Bootstrap for enhancing the UI and display the images from AdventureWorks Products table through an ImageHandler class. The significant files used in this project are: 1. PagingModel.cs/IndexModel.cs - These classes are responsible for defining the page number, size of page, and PagedList property that stores the information that are paged accordingly to it's size. public class PagingModel { public PagingModel () { Size = 24 ; Page = 1 ; } public int Page { get ; set ; } public int Size { get ; set ; } } public class IndexModel { public PagingModel PageModel { get ; set ; } public IndexModel (PagingModel pageModel) { Products = new PagedList<ProductViewModel>( new List<ProductViewModel>(), 1 , pageModel.Size); PageModel = pageModel; } public IPagedList<ProductViewModel> ...

Good evening! Adding a Bootstrap glyphicon to Ajax.ActionLink() helper is similar with Html.ActionLink() except that when the linkText parameter of the helper is empty, it will cause an Ajax issue and an Internal Server Error will be thrown from the browser. If you're going to integrate glyphicons on Ajax.ActionLink() helper and exclude the linkText property, supply that parameter with space instead of empty string so as not to cause jQuery or Ajax issues. @Ajax.ActionLink( " " , "DeleteComment" , "Home" , new { id = comment.CommentID }, new AjaxOptions { OnBegin = "return confirm('Are you sure you want to delete this comment?');" , InsertionMode = InsertionMode.Replace, UpdateTargetId = "event-details-" + Model.Id, HttpMethod = "GET" , }, new { @class = "commentDelete glyphicon glyphicon-trash" }); linkText i...

Hello, Here's how to integrate glyphicon to Html.ActionLink() helper in ASP.NET MVC. The code below will display the glyphicon shopping cart right after the text Checkout of the anchor element. @Html.ActionLink( "Checkout" , "Index" , "Home" , null , new { @class = "btn btn-info glyphicon glyphicon-shopping-cart" }) In order to add the glyphicon before the text of the anchor element, use @Url.Action() instead. <a href= "@Url.Action(" Index ", " Checkout ")" class= "btn btn-info" > <span class= "glyphicon glyphicon-shopping-cart" ></span>Checkout </a> Output:

Given that I have this code in my .cshtml page using Ajax.ActionLink() that calls a controller method using Ajax request: @Ajax.ActionLink( "Select" , "TaskListing" , new { id = item.TaskID }, new AjaxOptions (){ HttpMethod = "GET" , UpdateTargetId = "taskListing" , InsertionMode = InsertionMode.Replace }) And the controller method called by the Ajax ActionLink is decorated with Ajax attribute. [HttpGet] [AjaxOnly(true)] [ActionName("TaskListing")] public ActionResult TaskListing_Ajax ( int id = - 1 ) { var projects = projRep.GetAllProjects(); var model = new TaskAndTaskViewModel(); model.Task = te.Tasks.FirstOrDefault(t => t.TaskID == id); model.SelectList = from p in projRep.GetAllProjects() select new SelectListItem { Selected = (p.ProjectID == Convert.ToInt32(model.Task.ProjectID)), Text = p.ProjectName.ToString(), Value = p.ProjectID.ToString() ...

Hello all, Bootstrap has lots of plugins that you can experiment with, and one of them is the Typeahead.js plugin similar to jQueryUI Autocomplete plugin. According to Bootstrap, Typeahead is an extendend plugin for quickly creating elegant typeaheads with any from text input. So given the description of the widget, I will provide a tutorial that integrates the plugin in an ASP.NET MVC project basing from this article Twitter Bootstrap Typeahead and ASP.NET MVC . The author from the source demonstrates preloaded country values but in my case, I modified it to handle searching through a database. So to proceed with, just follow the steps below: 1. Create an ASP.NET MVC Project (C#). 2. Add an ADO.NET Entity model that connects to the AdventureWorks DB and it's CountryRegions table. 3. In your home controller, add the code that search countries based on a given value. private static AdventureWorks2012Entities _context; // // GET: /Home/ public ActionResult Index() { ret...

Here's how to integrate Bootstrap DatePicker widget in you ASP.NET Webforms Project. First, you need to add reference to the following JS and CSS files: bootstrap.min.css , bootstrap-datepicker3.standalone.css , jquery-1.11.1.min.js , bootstrap.min.js , bootstrap-datepicker.min.js . 1 2 3 4 5 <link rel= "stylesheet" href= "Content/bootstrap.min.css" /> <link rel= "stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.standalone.css" /> <script type= "text/javascript" src= "Scripts/jquery-1.11.1.min.js" ></script> <script type= "text/javascript" src= "Scripts/bootstrap.min.js" ></script> <script type= "text/javascript" src= "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js" ></script> Create a simple registration form with B...

Hello, Here's a VB.NET example on how to perform form validation using jQuery and Bootstrap without Model class. Validation is performed purely on the client side. The steps are explained in detail at VBForums codebank ASP.NET MVC 5 Form Validation using jQuery and Bootstrap without Model class and the source code can be downloaded in github MVCFormValidationJQueryValidateVB . Screenshots: That's it.. :-)

As I was converting a registration form from MVC 5 C# website to VB.NET MVC 5, I've noticed that in VB.NET the div elements with form-group class have different spacing in between compared with the former project. I've doubled checked and compared Site.css and my custom css files and all styles are the same. Luckily, I found out that MVC 5 VB.NET project includes the older version of Bootstrap that is version 3.0. So, replacing the old bootstrap files in VB.NET project with bootstrap.min.css and bootstrap.css version 3.3.6 corrected the issue.

Here's a simple CRUD application using ASP.NET GridView control with Twitter Bootstrap as it's css class reference. The code sample used is in VB.NET. Create: Update: Delete: ASPX markup: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 <div id= "Container" > <div id= "GridContainer" > <div id= "LabelContainer" > <asp:Label ID= "lblHeading" runat= "server" Text= "ASP.NET GridView CRUD with Bootstrap (VB.NET)" > </asp:Label> ...

Here's how you make use of the asp.net panel container that will serve as modal dialog. During render, panel will be converted to div elements. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <asp:Panel ID= "pnlModal" runat= "server" role= "dialog" CssClass= "modal fade" > <asp:Panel ID= "pnlInner" runat= "server" CssClass= "modal-dialog" > <asp:Panel ID= "pnlContent" CssClass= "modal-content" runat= "server" > <asp:Panel runat= "server" class= "modal-header" > <button type= "button" class= "close" data-dismiss= "modal" > <span aria-hidden= "true" > &times; </span><span class= "sr-only" > Close </span> </button> ...