Monday, November 20, 2017

Play #1:Garnishing Jquery

The purpose of my life. One of the purpose of life is to share our knowledge and would like to take this forum to share my knowledge.Beeing a senior software engineer I would like to share my experience in couple of my projects or modules. A single blog is not enough so I will release in the form of plays where each play discusses about a module and how we solved the module.In this play I am going to discuss about the module we developed for a intranet website. The requirement is to display the news headlines in couple of landing pages and obviously to design a editor page to edit the headline. Might seems easy to the other eye but journey was quite a learning and interesting.The tools we used is ASP.NET, C#, LINQ, JQUERY.The Challenges:The first task we started is the editor module to do the DML operation. What!! DML operation, I am hearing the voice but the design itself had a challenge where we had to make our choices.1. HTMLExtender:We have to pick up a editor where we have to add the html content, the flashy thought I got is using the HTML Extender in ajaxcontroltoolkit along with the textbox and there comes the question how to add it into our project.It's straightforward unless you know what you are doingThere are different ways in which you can install the ajaxcontrolkit but I prefer nugget tools available in the visual studio. Below provides other ways you can install the ajaxcontroltoolkit.http://www.codingfusion.com/Post/3-Different-ways-to-add-AjaxControlToolkit-in-AspNote: Once installed, the HtmlSanitizer is also gets installed which is a .NET library for cleaning HTML fragments and documents from constructs that can lead toXSS attacks. It usesAngleSharpto parse, manipulate, and render HTML and CSS.

The interesting part is the minDate property is difference between the today date and previous date which should be disabled.

So as the comment suggests it disables all the date before today.3. The Thumbnail Image Editor:The requirement we received for this is where a user should able to enter the content and add a thumbnail image from the Thumbnail folder available in the server.The first answer would be using the image option available in the HTMLExtender but the facility it provides is that we can upload the image only from the client side.But we need to show the thumbnail images from the server side there are third party tools like fck editor, doesn't that provide the solution. Well the answer is kind of YES and NO because here we can upload multiple images, which brings up to the point where we need to do the validation if the user has added multiple images which I thought was not a good idea and we finally came up the solution lets build a jquery thumbnail editor by our-self. It was a good solution which avoids the multiple validation and we had a good pat from our client.The tools needed for that is as follows.1. Jquery UI Dialog box.2. Webapi to communication to the server to retrieve the thumbnail images.3. Jquery AJAX to call web api.Note: I have differentiated with the color to indicate where it has been used.Step to add the dialog box.Step 1: Add the below html content into the html file.

<%//Jquery popup %>

<divid="dlgthumbnailImageSelector"title="Thumbnail Picker">

<divclass="selectable">

<%// load the image dynamically %>

</div>

</div>

Step 2:

Add the dialog box inside the document ready

$(document).ready(function () {

//thumbnail dialog box

$("#dlgthumbnailImageSelector").dialog({

autoOpen: false,

buttons: {

Ok: function () {

var imageName = $("#hiddenThumbnailImage").val();

$('#lblThumbnailImage').val(imageName);

$("#lblThumbnailImage").html(imageName);

$(this).dialog("close");

}

},

modal: true,

maxWidth: 450,

maxHeight: 500,

width: 450,

height: 500

});

});

The OK is the keyword and we have used the hidden field to store the selected value and we have used the label to show the selected image to the user.Step 3:The thumbnail image editor is opened when the button is click inside the editor.Highlighted the one which calls the dialog button.

The above can be placed in any of the business logic file, this logic has been placed inside the Headlines.cs file under App_Code folder.

The webapi is self hosted within the application and if it need to called with the help of the JQUERY API then we need to add the below code inside the Application_Start available inside the Global.asax file.

void Application_Start(object sender, EventArgs e)

{

//routing url for accessing webapi restful service to load the thumbnail images.

GlobalConfiguration.Configure(config =>

{

config.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(

name: "DefaultApi",

routeTemplate: "api/{controller}/{id}",

defaults: new { id = RouteParameter.Optional }

);

});

}

Step 5:If the thumbnail dialog loading then we need to contact the webapi using JQUERY AJAX. Below is the steps.

For the slide line editor we used one of the feature known as the light-weight slider which uses the jquery and I have tweaked a little in-order to the support the slider functionality. It also supports tool tip when focused on a particular headline and configurable number of items to be displayed in the light slider.

No comments:

Post a Comment

Search This Blog

ABOUT SIVA SHUNMUGAM

Siva Shunmugam is a software Professional works for Effindi Technologies. He loves technology because it makes the life easy and likes socializing. By beeing a professional he comes to know about how the technology is beeing handled in the real time world. Among the many technological programes he uses and embraces SQL-SERVER, ASP.NET, JQUERY simply because he uses it in his profession.

DISCLAIMER

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet/ BOL. My employer do not endorse any tools, applications, books, or concepts mentioned on the blog. I have documented my personal experience on this blog.