Friday, October 28, 2011

Invoking Server Side method using Jquery

Hi All,

Recently we had a requirement of performing database operation on the click of a submit button of a web part. In order to avoid post back and trying to implement something new, we tried using jquery for the same.

We used jquery to invoke the server side methods. The methods were defined as web method on an application page (_layouts folder). The web method looked something like this :

[webmethod]
public static void AddNewData(string UserId,string favoriteName, string favoriteURL, string flagmovetoTop)
{
//some business logic
}

Then on the click of the submit button we invoked the java script method, where we performed the data base operations using "JSON". Below is the code snippet for the same.

$(document).ready(function () {
$.ajax({
type: "POST",
url: 'url of the method',
data: "{'userID':'" + userId + "', 'favoriteName':'" + favname + "', 'favoriteURL':'" + favUrl + "','flagmovetoTop':'" + ismovetoTop + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var result = msg.d;
if (result >= 0) {
SubmitClicked();
}
else {

}
}, failure: function (msg) {
// alert(msg);
}
});
});


url : URL parameter is the url of the method used to perform the operation. As mentioned we defined the web methods on the application page so the URL parameter looks something as below :
/_layouts/FolderName/PageName.aspx/AddNewData

One thing which we should keep in mind that if the button is defined on an application page, we need to provide complete url of the method like "http://_layouts/FolderName/PageName.aspx/AddNewData".


data : The data parameter accepts the values of the variables which the web method accepts. The web method which we used accepts four parameters. One thing which we should note that 'UserID', 'favoriteName','favoriteURL' and 'flagmovetoTop' are the name of the parameters defined in the web method.

We were performing database operation and using stored procedure for the same. From the stored procedure we returned '0' if the operation is success else '-1'.

Depending the value returned from the method, the 'result' variable will have value in it. So if it is success (if result ==0) we perform some set of further operation.

Hope this helps.. :)

Monday, October 24, 2011

Passing arguments and handling return value in SP.UI.ModalDialog.showModalDialog

Hi All,

Recently I had a requirement to open a modal window using "SP.UI.ModalDialog.showModalDialog". Also on the modal window we were doing some database operations on the button click and after successful implementation we need to close the modal window and redirect the parent window to the home page of the application.

Also we need to pass some parameters from the parent to the modal window to perform the database operation.

In order to pass value to the modal window, I used the "args" option of the dialog. Also to handle the return value "dialogReturnValueCallback" was implemented. (The list of various options of the dialog can be found here)

Below is the code snippet which I had used to cater my business requirement.

var URLValue ="url of the page which needs to be shown as modal";
//parameters that needs to be passed to the modal window is defined in myArgs
var myArgs = {favoriteName:bookmarkTitle,favoriteURL:bookmarkUrl};
var options = {
url: URLValue,
title: 'Modal Window Test',
allowMaximize: false,
showClose: true,
width:600,
autoSize:true,
args:myArgs,
dialogReturnValueCallback: myDialogCallback
};
var dialogSP = SP.UI.ModalDialog.showModalDialog(options);
});
function myDialogCallback(result,response)
{
if(result ==1)
{
window.location.href = "url of the page where we are redirecting after successful operation";
}
}

The above snippet list down how to open a modal window, passing parameters and defining the return call back. Now we need to make sure that on the button click (submit,OK)on the modal window we pass respective values back to the parent page for further operations.

Below is the code snippet for the same.

function SubmitClicked() {
var results = {
message: "Submmited Successfully",
anothervalue: "Submit"
};
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, results);
}
On the code behind we can register this function like "Button.attributes.add("onclick",SubmitClicked())". This will pass value "1" in the result and we handle the same in the returncallback function "myDialogCallback".

Hope this helps you.. :)