Posts

Donate

ASP.NET MVC 5 Client-Side Remote Validation Using jQuery

Image
When integrating jQuery validation in ASP.NET MVC, here's how to apply client-side remote validation using javascript code. Below are the snippets and screenshots. Make sure to render the jquery.validate.min.js file in your View or Layout. Email HTML Markup: 1 2 3 4 5 6 7 <div class= "form-group has-feedback" > <label for= "email" class= "control-label col-md-3" >Email Address:</label> <div class= "col-md-9" > <input type= "email" name= "email" id= "email" class= "form-control" placeholder= "Enter email" /> <span class= "glyphicon form-control-feedback" id= "email1" ></span> </div> </div> Custom Javascript Validation Code: 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 $( function () { $( "#frmInput" ).validate({ sub

ASP.NET MVC WebGrid In Partial View Redirects To Blank Page During Pagination

Image
Hello, I've created an ASP.NET MVC website that loads a partial view with a WebGrid control on ajax call. When I tested navigating to next record set, the WebGrid performs a postback and then redirects to a blank page. Not only that, the WebGrid control also lost it's css style. After doing some research on it's properties, I basically encountered a property called ajaxUpdateContainerId . After including that property in the WebGrid control, the pagination works fine and does not redirect to a blank page. Original Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 @{ var grid = new WebGrid( canPage: true, canSort: true, rowsPerPage: 10); grid.Bind(Model.AddressList, rowCount: Model.AddressList.ToList().Count); grid.Pager(WebGridPagerModes.NextPrevious); @grid.GetHtml(tableStyle: "webGrid", htmlAttributes: new { id = "grid" }, headerStyle: "hea

LINQ To SQL In Operator With Subquery

Given the following sql statement below using In operator with subquery as it's argument, I need to convert this to LINQ statement. SELECT [CountryRegionCode] ,[Name] ,[ModifiedDate] FROM [AdventureWorks2012].[Person].[CountryRegion] where CountryRegionCode in ( select distinct [CountryRegionCode] from [AdventureWorks2012].[Person].StateProvince) After doing some readings on LINQ documentation, I found it's equivalent LINQ code using let . model.CountryRegionsList = ( from country in _context.CountryRegions let subQuery = ( from stateprovince in _context.StateProvinces select stateprovince.CountryRegionCode). Distinct () where subQuery. Contains (country.CountryRegionCode) select country).ToList();

ASP.NET Trigger Onchange Event Of DropDownList Inside GridView Using jQuery

Image
There was a question in a forum if how can we trigger an onchange event of a DropDownList control inside a GridView template field. This time using unobtrusive approach. So in order to understand a bit further, the GridView control when rendered to the browser becomes a table element while DropDownList becomes a Select control. So, to trigger the event we need to traverse the GridView control then find the Select control and attach a change event. Here's a solution using jQuery. HTML Markup: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <asp:GridView ID= "gvItem" runat= "server" AutoGenerateColumns= "False" > <Columns> <asp:BoundField DataField= "ID" HeaderText= "ID" /> <asp:BoundField DataField= "ProductName" HeaderText= "ProductName" /> <asp:TemplateField HeaderText= "Time Slot" > <

ASP.NET MVC 5 Client-Side Form Validation Using jQuery And Bootstrap With Model Class

Image
Here's a simple client side validation in ASP.NET MVC 5. By default, the application's unobtrusive validation has been set to true in web.config file. For this demo, I did not include a saving process to database. I just added a simple view to indicate a success if the model passed to the controller is valid. See files and screenshots below: Registration.cs (This should be created inside the Model folder) 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 public class Registration { [Required(ErrorMessage = "You must provide your first name")] [Display(Name = "First Name")] public string FirstName { get ; set ; } [Required(ErrorMessage = "You must provide your last name")] [Display(Name = "Last Name")] public string LastName { get ; set ; } [Required(ErrorMessage = "You must provide your middle name")]

Syntax error, '>' expected in Sitecore CMS

When I was a developer in a large corporation before, I was assigned to a Sitecore CMS project. While working on the CMS's services in getting the contents, I encountered an error as mentioned in a title post. After doing some research, I found out that the CMS's parser does not recognize special characters of the data returned from it's search query. So the workaround that I found from an article was to surround the data returned with hash tags. In the sample codes below, I just added a snippet to insert hashtags to data returned from the parser. Sample Data Returned: Tel-Aviv Formatted data: #Tel-Aviv# Original method: 1 2 3 4 5 6 7 8 9 10 11 public static IEnumerable<IUniversity> GetSchoolsByState(Guid stateProvinceId, Language languageVersion) { if (stateProvinceId.Equals(Guid.Empty)) return null ; var stateProvinceReferenceItem = Context.Database.GetItem(ID.Parse(stateProvinceId)); if (stateProvinceReferenceItem == nul

$(...).valid is not a function in ASP.NET MVC 5

Image
I created an ASP.NET MVC 5 simple application with entry forms integrating bootstrap and jQuery validation. Upon testing, the valid() built-in function is not recognized by the browser as stated in the title of this post. After series of investigation, I found out that by default, ASP.NET MVC does not render the jQuery validation scripts by default in _Layout.cshtml. Only jQuery core scripts. The fix is to render jqueryval validation scripts in _Layout.cshtml. The scripts have already been bundled in the BundleConfig file. @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryval") @*code fix*@ @Scripts.Render("~/bundles/bootstrap") On page load, the scripts are indeed rendered to the browser using chrome dev tools.

WPF Add Or Delete Rows In A DataGrid Using Observable Collection

Image
Here's a simple way of adding/deleting WPF Datagrid rows using observable collection. XAML Code 1 2 3 4 5 6 7 8 <DataGrid AutoGenerateColumns= "False" ItemsSource= "{Binding}" Margin= "12,12,12,41" Name= "dataGrid1" CanUserResizeRows= "False" CommandManager.PreviewExecuted= "UserDataGrid_PreviewDeleteCommandHandler" RowEditEnding= "dataGrid1_RowEditEnding" RowHeaderWidth= "20" > <DataGrid.Columns> <DataGridTextColumn Binding= "{Binding UserName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header= "User name" Width= "230" > </DataGridTextColumn> <DataGridTextColumn Binding= "{Binding FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Header= "First Name" Width= "245" > </DataGridTextColumn> </DataGrid.Columns> </DataGrid> C#

ASP.NET MVC Sales Dashboard Demo Application

Image
As I was doing some research on chart controls to be integrated in ASP.NET MVC, I found a working from Shield UI which is MVC 4 regarding Sales Dashboard. As I was running the application to the browser, only the left container shows the chart. The right and bottom part does not show anything. It seems the remaining chart samples will be manually shown to the browser by entering the correct URL. To solve this, I added a ViewModel class, modified the HTML markup in the Index view and modified the codes in Home Controller. See updates below: SalesDashboardViewModel.cs 1 2 3 4 5 6 7 8 9 10 11 12 13 14 using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace SalesDashboardMVC.Models { public class SalesDashboardViewModel { public IEnumerable<QuarterlySales> Quarterly_Sales { get ; set ; } public IEnumerable<SalesByProduct> Sales_By_Products { get ; set ; } public IEnumerable<Perfor

Display Images in ASP.NET MVC Using Custom HtmlHelper

Image
Here's a simple Image Helper for showing known image types. I've tested this for old format such as bitmaps and images with OLE headers. This helper sets the image width and height with fixed values. You may change it dynamically or update this helper to accept parameters for width and height. C# Code 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 /// <summary> /// Helper for showing images /// </summary> public static MvcHtmlString ImageLink( this HtmlHelper htmlHelper, byte [] photo, string id) { string imageSrc = null ; if (photo != null ) { using(MemoryStream ms = new MemoryStream()) { string imageBase64 = string .Empty; Image xImage = (Bitmap)(( new ImageConverter()).ConvertFrom(photo)); if (ImageFormat.Bmp.Equals(xImage.RawFormat)) { // strip out 78 byte OLE header (don't need to do this for normal images) ms.Write(photo, 78, photo.Length - 78); } else { ms.Write(photo, 0, photo.Length);

Donate