How to resolve JSON serialization error in Telerik MVC grid to populate large dataset

For the past year, I have been working with Telerik MVC extensions. When I initially started, it seemed a good idea to use these controls event though I was aware that Telerik no longer supported these controls. Down the line,  I came across several instances where I wished I had used some other controls to begin with. Anyway, that is not to say that these controls are not handy. They are very useful if you want to get an application ready with few controls here and there, without having to go into the details.

But sometimes it is just a pure headache. I encountered an issue where I got a “JSON serialization error” when trying to load a large data-set into the telerik mvc grid using Ajax binding. The Data Access layer and the back-end scripts seemed to be populating the right data-set into the model. But when the exception occurred when the model had to be rendered into the telerik mvc grid.

JsonException

I tried increasing the maxLength in the web.config (as suggested in StackOverFlow posts) but that did not resolve the issue. The first assumption was that the since the JsonResult class caused the serialized JSON string to exceed the default maximum string of the JavaScriptSerializer class, this should have fixed the issue. Well, it did not fix the issue as the value of the MaxJsonLength only applies to the internal JavaScriptSerializer used by asynchronous communication layer to invoke Web services methods.

webconfig

Continue reading

Advertisements

Create a fully-functional Dashboard using MVC4

Nowadays, almost all applications have a dashboard that provide a “easy to read, single page, real-time user interface” which shows that current status of the application, usually as a graphical representation. Dashboards provide snapshots and historical trends of the key performance indicators (KPIs) that help the end-users to obtain information at a glance.

In this article, I am going to outline the steps to create a simple but fully-functional dashboard using ASP.NET MVC4. For demonstration purpose, I have persisted the data in a session variable. To real-time project, this would be replaced by a database call. For demo, I have created a dashboard with four portlets ( or dashboard items) as shown below.

D1

Let’s get started.

Continue reading

qTip Implementation in MVC Partial View

Recently, I came across a task wherein I had to show a list of dynamic information in a tooltip in a MVC project. So, I started playing around with qTip. My intent was to load the dynamic information within partial view and to load that partial view inside a qTip tooltip.

This article outlines the steps to show partial view in a tooltip using qTip. For demonstration purpose, we will create a list of events and will show the event details in the tooltip.

1. Create a MVC application.  The first step would be to download the necessary javascript files and css files to implement qTip2. This can be done by either using CDN from http://qtip2.com/download or by installing the Nuget Package using the following command. This will install the necessary jquery dependencies, script files and css files.

Nuget_Package

Continue reading

Multiple submit buttons in a MVC4 view using custom attribute

This post is targeted to anyone who is a beginner in MVC and finds oneself fidgeting over difficulties encountered during its learning curve.  While MVC is a very interesting architecture to work with, I personally felt it really tests one’s patience until you get a hang of it.

One of the common issues that most people face as a MVC novice developer is implementing multiple submit buttons in a form in MVC view. Recently, I had a similar scenario and thought it would a good idea to put it into an article for future reference.

The following three steps elaborate the solution to this problem.

1. We need to create a custom attribute that would match the action name with the name attribute of the button.

3

Continue reading

Render MVC partial view inside bootstrap modal dialog

In this article, I am going to show you how to create a modal dialog using bootstrap and then load a MVC partial view in the dialog.

The steps are explained below with screenshots.

1. We need to have a modal container in the main layout page. All the dialogs will be loaded inside this container. I have hardcoded the styles for now. It is recommended that all the styles be put in a separate stylesheet file.

11

2. Now, we need to add the needed javascript. This script will make an internal Ajax call and will inject the content of the partial view inside the modal container div.

22

Continue reading

Pass Multiple Models in a View in ASP.NET MVC

I came across this very intuitive article in CodeProject. This article explains how to pass multiple models in a view using ASP.NET MVC4, describing the pros and cons of these approaches and with a sample demo project as well.

  1. ViewModel
  2. Partial View
  3. ViewBag
  4. ViewData
  5. TempData
  6. Tuple

Link to Code Project Articles:

I found it very helpful as I am on the verge of building a ASP.NET MVC project and am diving into its nitty-gritty details.

Hope it helps you too! 🙂

Implementing masked input in MVC4

In any application, whether it be web or desktop application, the user needs to conform to a set format or template while entering the data into a form. This is solely done for the purpose of data integrity. This is where the concept of “masked input” comes in. As per Wikipedia, “an input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in a text box.” Some of the frequently used input for masking include Date, Time, Phone, SSN, Product Key , Zip codes, Postal codes and so forth as shown here.

One method of easily implementing masked input is by using jquery. However, it has a serious drawback that we have to link jquery function for each input that we need to mask. There are a couple of good plugins available for this but all pose the same issue.

Another workaround is to create a data annotation for masking input and using it in our views or viewModels. The intent of this post is to walk-through this alternative approach.

Continue reading