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

Advertisements

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