Change in View:

//add class to action link and get the actionlink click using .classname in jquery.

@Html.ActionLink(“link text”, “actionName”, “controllerName”,  new {@class=”popupLink”})

<script type=”text/javascript”>
$(function () {
$(‘.popupLink’).click(function () {
$(‘<div id=”popupfooterdiv”/>’).appendTo(‘body’).dialog({
close: function (event, ui) {
dialog.remove();
},
modal: false,
draggable: false,
width: 500,
height: 400,
resizable: false,
//open: function (event, ui) {
//    $(‘.ui-dialog-title’).remove();
//}
}).load(this.href, {});
return false;
});
});
</script>

In Controller

[HttpPost]

public ActionResult actionName()

{

return PartialView();

}

http://www.jacklmoore.com/colorbox

Get the JS file and colorbox.css file which will be useful when you want to open any popup(jQuery dialog).

So at first you need to import css file and js file into your project.
Similar like this

Create an anchor tag and give any class to them. (Remember class must be the unique.) and in href option you can write link where you want to redirect. Here i need to use the imagebutton so i am combining anchor tag and imagebutton

that’s it completed from the Designing page now you need to do changes in jQuery to open the popup.

You need to add the jQuery as described follow

That’s it You have completed with that and you can now open the jQuery dialog with this.

To close the dialog and reload current page you need to write the code in GoToLink.aspx Page
parent.document.location = parent.document.location;
parent.$.fn.colorbox.close();
or you can simply press escape this will close the popup.

You can get more details on the following link.
http://www.jacklmoore.com/colorbox

This dialog will looks like this:

The Markup

We need to show some content in the popup box. In our example we are going to create simple login box.

index.html

<!--gray overlay-->
<div id="dialog-overlay" class="dialog-overlay"></div>

<!--login dialog start-->
<div id="login_container" class="dialog-box">
	<div id="login"  style="width:300px;padding:5px;">
		<div class="dialog-content">
			<table  class="dialog-content" style="margin-top:20px;padding:0;width:100%;" >
				<tr>
					<td>Email : </td><td><input type="text" id="log_usr" name="Email" class="textpart" style="width:230px;" /></td>
				</tr>
				<tr>
					<td>Password : </td><td><input type="password" id="log_pass" name="Password" class="textpart" style="width:230px;" /></td>
				</tr>
				<tr>
					<td>Country : </td><td><input type="text" id="country" name="country" class="textpart" allownull=true style="width:230px;" /></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input id="log_submit" type="button" class="btnstyle" style="margin-top:10px;" value="Submit" />
						<input id="log_cancel" type="button" class="btnstyle" style="margin-top:10px;" value="Cancel" />
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<!--login dialog End -->

<a href="javascript:void(0);"  onclick="javascript:$('#login_container').showX()">Log In</a>

The jQuery

Following few lines of jquery displays our html content as popup box.

pbscript.js

var XDLG="";
$(document).ready(function(){

	// CENTERS given element
	jQuery.fn.center = function () {
    	this.css("position","absolute");
    	this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    	this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    	return this;
	}
	
	// SHOW a dialog
	jQuery.fn.showX = function () {
    	// get the screen height and width        
		var maskHeight = $(document).height()+$(document).scrollTop();  
		var maskWidth = $(window).width();
			
		// calculate the values for center alignment
		var dialogTop =  ($(document).scrollTop()+50);    
		var dialogLeft = "100px"; 
	
		// assign values to the overlay and dialogbox
		//$('#dialog-overlay').css({height:maskHeight, width:maskWidth});
		$(this).css({top:dialogTop, left:dialogLeft}).center();

		// display the boxes
		XDLG="#"+$(this).attr("id");
		$("#dialog-overlay").show();
		$(XDLG).show();	
	}
	
	// CLOSE a dialog
	jQuery.fn.closeX = function () {
		$(this).clearX();
		$(this).hide();
		$("#dialog-overlay").hide();
		XDLG="";
	}
	
	
	// CLEAR inputs in a dialog
	jQuery.fn.clearX = function (){	
		$(this).find("input:text").val('');	
	}
	
	// VALIDATE inputs
	jQuery.fn.validate = function (type){
		var emfilter=/^[_A-z0-9-]+((\.|\+)[_A-z0-9-]+)*@[A-z0-9-]+(\.[A-z0-9-]+)*(\.[A-z]{2,4})$/;
		
		if(type=="email"){
			return (emfilter.test($(this).val()) ? true : false); 
		}
		else if(type=="inputs"){
			var cvalue="";var exception="";
			//allownull [ i.e: can be left empty]- custom property.
			//following selects only the input elements which is need to be validated.
			$(this).find("input:text,textarea,select").filter(":not([allownull])").each( function(){
				cvalue=$(this).val().trim();
				if($(this).get(0).tagName.toLowerCase()=="select" && cvalue<1){
					exception=$(this).attr("name")+ " not selected";
				}
				else if(cvalue.length<1){
					exception=$(this).attr("name")+ " is empty";
				}
				
			});
			
			if(exception.length<1){
				$(this).find("input:password").each( function(){
					cvalue=$(this).val().trim();
					if(cvalue.length<1)
						exception=$(this).attr("name")+ " is empty";
						
				});
			}
			
			
			return (exception.length>0 ? exception : true);
		}
	}
	
	// CLEAR on pressing `esc` button
	$(document).keyup(function(e){
		if(e.keyCode === 27)
			$(XDLG).clearX();
	});

	// CLOSE on clicking on request
	$("#dialog-overlay,#log_cancel").click(function(){
		$(XDLG).closeX();
	});

	// SUBMIT the details, may be an ajax request...
	$("#log_submit").click(function(){
			
		msg=$("#login").validate('inputs');
		if(msg!=true){
			alert(msg);
			return false;
		}
		else if(!$("#log_usr").validate('email')){
			alert("Not a valid email");
			return false;
		}
		
		alert('OK, make an ajax call!');
	});
});	

The CSS

xlog.css

.dialog-overlay {

	/* set it to fill the whil screen */
	width:100%; 
	height:100%;
	
	/* transparency for different browsers */
	filter:alpha(opacity=50); 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	opacity: 0.5; 
	background:#000; 

	/* make sure it appear behind the dialog box but above everything else */
	position:absolute; 
	top:0; left:0; 
	z-index:3000; 

	/* hide it by default */
	display:none;
}

.dialog-box {
	
	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	
	/* css3 border radius */
	-moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	
	background:#eee;
	
	
	/* make sure it has the highest z-index */
	position:absolute; 
	z-index:5000; 

	/* hide it by default */
	display:none;
}

.dialog-content {
	text-align:left; 
	border: medium none;
	color:#000;
	font-family:arial,helvetica,sans-serif;
	font-size:12px;
	
}
.textpart{
	text-align:left; 
	border: 1px solid #E5E5E5;
	color:#666666;
	font-family:verdana,geneva,sans-serif;
	font-size:12px;
	padding-left:4px;
	height:30px;
}
.btnstyle{
	background-color: #F5F5F5;
    background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px 2px 2px 2px;
    color: #666666;
    cursor: pointer;
    font-family: arial,sans-serif;
    font-size: 11px;
    font-weight: bold;
    height: 25px;
    line-height: 23px;
    min-width: 54px;
    padding: 0 8px;
    text-align: center;
}
.btnstyle:hover{
	-webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

Thats it!. What we’ve done is, initially we have created content to show in the popup and added bit of jquery to set the content hidden when page loads also we’ve added some functions to show and hide the div.

When you load index.html it will shows you an anchor link as Login. if you click the link it will pops up the content we’ve created. To make it disappear just click the outer portion of popup box or click cancel button in the dialog. You make it hide by pressing esc key also.

Validation

Other than showing a content as popup, it’ll validate the elements in the div when you click the submit button.

This assumes that you already know how to setup jQuery and ui in your working page. if not, kindly read this page.

Now let us create our home page with a button ‘Click Me!’.

index.php:

<html>
    <head>

        <link href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css">
        <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

        <title>Demo</title>
    </head>
    <body>
        <button id="click_me">Click Me!</button>
    </body>
</html>

Then let us create our form in seperate file let’s name it form.php:

<form>
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" id="firstname" /><br>

    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" id="lastname" />

    <input type="submit" name="submit"/>
</form>

Our goal here is when we click the button ‘Click Me!’, the Modal form will appear in our page with content from form.php witch is a separate file.
We can achieve that goal with this script:

<script type="text/javascript">
    $(document).ready(function(){
        $('#click_me').click(function(){
            $('<div>').load('form.php').dialog();
        });
    });
</script>

This line will capture the click event to the button

    $('#click_me').click(function(){

and this line will load the content of form.php to $(‘<div>’) and create a modal form.

        $('<div>').load('form.php').dialog();

Now test it in your preferred browser and your modal form should look like this:

There you have it! A Modal form with content from external or different php/html file.

This article intended to show how to implement Jquery Dialog validation within ASP.net MVC 3, it will skip the steps of how implementing jquery UI dialog, there are many articles around to cover about it.

What I want to do here is to implement the jquery dialog which gets data from a partialview, it will then validate the inputs then send it to the ActionController via an Ajax call

Here are the main steps:

1. Render a Jquery Dialog from PartialView
2. Validate on client side (if datas are required or not)
3. Send the datas over as Ajax Call/Json to the server to validate it

In order to reduce http calls, ones need to validate as much as possible on client before sending datas to server validation.

Here is what is done for validation:

Client Validation

<script src="../../Models/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Models/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<button id="btnDialog">Account Logon</button>

<div id="Logonform"></div>

<script type="text/javascript">

    $(document).ready(function () {

        $.validator.unobtrusive.parse('#Logonform');

        $("#Logonform").dialog({
            autoOpen: false,
            modal: true,
            title: 'Login',

            buttons: {
                Save: function () {
                    //alert($('form').serialize());
                    //alert($("#Logonform").attr('UserName'));

                    if ($('form').validate().form()){
                        $.ajax({
                            url: "@Url.Action("LogOn", "Account")",
                            type: "POST",
                            data: $('form').serialize(),
                            datatype: "json",
                            success: function (result) {
                                $("#Logonform").html(result).dialog('open');
                            }
                        });
                    }
                },

                Close: function () {
                    $(this).dialog('close');
                }
            }

        });

        $("#btnDialog").click(function () {
            $.ajax({
                url: "@Url.Action("LogOn", "Account")",
                type: "GET",
                success: function (result) {
                    $("#Logonform").html(result).dialog('open');
                }

                });
        });
    })

</script>

As you can see, there is a need to implement

• $.validator.unobtrusive.parse(‘#Logonform’); to activate unobstrusive javascript within the project
• include the 2 javascript libraries:
• <script src=”../../Models/Scripts/jquery.validate.min.js” type=”text/javascript”></script> <script src=”../../Models/Script/jquery.validate.unobtrusive.min.js” type=”text/javascript”></script>
• Before the Ajax call, client validation with if ($(‘form’).validate().form()){ }

Here is the model

    public class LogOnModel
    {
        [Required]
        [Display(Name = "Nom d'utilisateur")]
        public string UserName { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Mot de passe")]
        public string Password { get; set; }

        [Display(Name = "Mémoriser le mot de passe ?")]
        public bool RememberMe { get; set; }
    }</

Server validation

The server validation is very much straightforward, check if the ModelState is valid, then processing the datas, if error, Add error collection to the ModelState and return back the errors with the partialView

        [HttpPost]
        public ActionResult LogOn(LogOnModel model)
        {
            if (ModelState.IsValid)
            {
                if (Membership.ValidateUser(model.UserName, model.Password))
                {
                    FormsAuthentication.SetAuthCookie(model.UserName, model.RememberMe);
                    return Json( new { result = "ok", user = model.UserName });
                }
                else
                {
                    ModelState.AddModelError("", "Le nom d'utilisateur ou mot de passe fourni est incorrect.");
                }
            }

            // Si nous sommes arrivés là , quelque chose a échoué, réafficher le formulaire
            return PartialView("_Logon");
       }

Code source can be found here:

http://dl.dropbox.com/u/9847533/JqueryDialogTest.zip

Others interesting articles to read:

http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/

http://cdsmithon.net/2012/03/27/ajax-form-submission-in-mvc-3-0/

The input form components specifically input text , and text area tags are not rendered/jqtransformed properly. The below is how a sample JQtransformed form looks on Safari

JQuery Dialog with JQTransformed form on Safari

It looks the same way when viewed in Chrome browser too.

The workaround for this problem until JQTransform’s fix is to tweak the jquery.jqtransform.js file. Comment out the below bold code lines in the JS file .

/***************************
Text Fields
***************************/
$.fn.jqTransInputText = function(){
return this.each(function(){
var $input = $(this);
…………….

………….
………………

……………………..
/* If this is safari we need to add an extra class */
$.browser.safari && $wrapper.addClass(‘jqTransformSafari’);
 //comment the below line to fix the Issue related to webkit text box
            //$.browser.safari && $input.css(‘width’,$wrapper.width()+16);
this.wrapper = $wrapper;

});
};

    /***************************
TextArea
***************************/
$.fn.jqTransTextarea = function(){
return this.each(function(){
var textarea = $(this);
…………………………….

…………………………….

…………………………….

if($.browser.safari){
//comment the below lines to fix the Issue related to webkit text area
                //$(‘#jqTransformTextarea-mm’,oTable)
                    //.addClass(‘jqTransformSafariTextarea’)
                    //.find(‘div’)
                        //.css(‘height’,textarea.height())
                        //.css(‘width’,textarea.width())
                //;
}
});
};

The below is how the dialog looks after the modifications

JQuery Dialog with JQTransformed form on Safari after tweaking JS file

However, when text area is focused browser’s default highlighting mars the JQTransform’s focus style. The work around for this is to add a style class  say “textArea” to text area tag and define the style as below in your css file .

.textArea:focus{

outline:none;

}

Finally, the below is how the dialog looks on Safari and Chrome browsers.

It worked !