Amit Raya

Tuesday, July 21, 2015

This is update to my last blog Easy DIY Carousel using Jquery and I have updated some code from the initial works for making the code reusable in moveleft() and moveright() function, also I have added one more carousel to show how we can have two carousel showing independent images but when on is clicked the other one also moves. I have also introduced a slider below using which you can go to specific slide without having to look at other slides. I have also moved all script from the html to another .js file.

So let's start, first off let's have the same code as given in Easy DIY Carousel using Jquery blog. Now create another div and call it carousel1 and rest of the content and div inside the carousel remains the same as the first one. The only different in the inside of carousel and carousel1 is the fact that carousel contains counter whereas carousel1 doesn't because we are using the same counter for both the carousel. Also added is another div called navig which will give us the slider button.

After adding the new carousel and the slider the html code looks like this:

Now that we have completed the HTML let's complete the css for the for the slider and new carousel. First I will put only the part of code which is for the carousel1 and slider then I will paste the whole css. This will help you understand what has been added since the last blog.

Sunday, July 12, 2015

Before we start with the coding let's examine the concept of this Carousel. The idea is very simple. To explain I have one image and description below:

There are basically three to four steps to building a Carousel using jquery. The details of the concept is given below:1. There has to be a placeholder for divs to start with and this placeholder should not be visible.2. There should be a visible window through which each of the div will pass (slide) such that they look like we are rotating images3. There should be another place holder where all these images should go to after passing through the visible windowVery simple idea, very simple implementation. Let's start with the code now.First of all let's define four divs (you can use as many as you like).

After you have defined the four divs let's color them so that we can recognize which one is which and also try to place all those divs in one location as described in the diagram. Also we need to understand that here div with class carousel is our window, so to start with apart from the first div all other divs will be slid to the left (-450px from the visible window) of the carousel and after they become visible they will be pushed to the right(+450px from the visible window) such that they become invisible again. So our Carousel div has to have overflow hidden and a counter to ensure we are keeping count. So the mystyle.css will look like this:

Wednesday, September 17, 2014

We see that many of WYSIWYG have implementation of image upload but when you actually want to implement that most them don't provide image upload upload right away. However with CK Editor I found a way to implement the image upload using ASP.net. However the coding is very simple so you can implement the same in PHP and other languages also.

First create a project (here I have named it ckeditorfortest). Select default options as given in the images below.

This will not enable the editor and when you run the program you will see page like this

You will see that the WYSIWYG is enabled for the textbox and is working. Now click on the image linkand then you will see the following modal dialog come up.

As you can see we don't have option to upload images in this, but you can still provide image URL to include. Now to enable image browsing modify the script we wrote previously in the Index.cshtml to the following:

Now after implementing this code, reload the /home/Index page and click on the image icon in the editor toolbar again. What this code basically does is it gives CK editor what is the url where we are going to implement the Image browser and what is the url where we are going to implement the upload functionality.

Now you can see that we have one new tab call "Upload" and in "Image Info" tab also a new button has come up which says "Browse Server". In the "Upload" tab you will see option to choose file and send it to server. If you click the same now it will not work nor will the "Browse Server" button in "Image Info" tab.

Now let's build the functionality for these tabs.
First let's create a viewmodel for holding the imageurl(the image url contains the image name also). So right click on the model folder and create class file and name the class file imagesviewmodel.cs. Paste the following code in the viewmodel.

Here apart from the Index action we have added one other action methods. Please ensure to add using System.IO;
In this new action method which if you realize is same as given in previous jquery script we wrote in Index.cshtml "filebrowserImageUploadUrl: '/home/uploadnow'", we need to ensure that the name of the action method remains the same. This action will take in a HttpPostedFileWrapper input which we have named upload. The filewrapper will have following information

but we here will be using FileName only. So we will first check if the upload HttpPostedFileWrapper is properly loaded, once that is ascertained we will generate the string path by combining the path where image will be uploaded in the server with the filename. upload.SaveAs(path) will save the image to the local provided. Also ensure that the action returns void because we don't need to do any action after upload and the page should remain as it is. Now if you try to run the program and go to "Upload" tab and click choose file you can choose file and click on "send it to server" and same will be uploaded to the server.
Now the upload is complete. Now we will look at how we will insert this image into the WYSIWYG editor.
For that we will create another action in the home controller as given in the jquery in the Index.cshtml "filebrowserImageBrowseUrl: '/home/uploadPartial',"the following code lists the action method.

this action method will basically list out all images that are there in the upload directory for the user to choose which image he wants to insert into the WYSIWYG. So the variable "images" take all images that are there in the upload directory along with filename and path. The action method sends this variable to the view.
Next right click on the action method and create view and name the view uploadPartial.cshtml.
Paste the following code in the view.

So upon completing this if you click on the "Browse Server" button, a new page will open which will show all the images in the upload folder. As shown below:

To understand what is done in the view, we make this view strongly typed to the viewmodel we create earlier. Now we run through each of the image and append the same to an html anchor. As your will notice we will put in the full path of the image file in data-source attribute. Here @Request.Url.GetLeftPart(UriPartial.Authority) will give the left part of the url of your website. That is if your website url is http://localhost:5938 then this will be returned even if you are http://localhost:5938/home/uploadpartial location. To this we will append the image url which is basically location of the image from the root folder along with image name. So this makes the image clickable. Below we will write some jquery to take the image URL which needs to be returned to "Image Info" tab in the modal dialog where we clicked "Browse server". What this jquery code does is basically take the image url and send it the opener page which opened this page. So it will be sent one step back and then we close the window.
As of now if you click on the image nothing will happen. For the image url to come in the "Image Info" tab URL textbox follow the steps below.

Now one final step in the Index.cshtml add one function to get the value of image url from uploadpartial and put that value in the URL textbox in "Image Info" tab. I will give you the full script section so that we don't get confused.

The function updateValue basically takes the id of the element in this case the URL textbox which we send from uploadpartial and the value and inputs the value to the textbox.

Now recompile the code and run now if you go to "Image Info" tab, and click "Browse Server" button you will be shown the uploadpartial, which will basically show all images (clickable) from the upload folder. When you click on any of the image the uploadpartial will be closed and the url of the clicked image will be populated in "URL" textbox of the "Image Info" tab. If you click "Ok" now you will see that the image is inserted in the WYSIWYG editor like in the image below:

Add a ViewModel Folder and right click and add class. As class as "Instructor.cs"

After this define the model, please remember for this demo the model is not important so I am not going to database and creating the model. I will only be using this viewModel as my model.
Add the following code in "Instructor.cs"

Now that we have created the class for model, let's go to HomeController.cs and make the following changes to display our index page as it would come from the database. Add the following code in index action method.

This should give us the normal kind of view whenever we open an index view, but for that you need to right click on the action and click view. Let's make the view linked to the viewmodel we had created for making it easy to implement.

Now click run and this is the page you should see

Now add the Export to excel button to the view, write the following code in the view:

Now your view should look like this.

Now let's implement the export to excel button. In the controller add the following code.
In the action definition add

Now add the reuse object with the following code, please also note the reference added

Now create another ViewModel as follows and name it ContactWithEmail.cs. I am creating this ViewModel even for one single component in the page to show that we can have components exported in email and also to make it easier for Captcha implementation, which I will talk about later.

This is the final implementation. I couldn't find a way to upload my code, if you need, please contact me I will be happy to share. However, I have also pasted all my code below, please don't forget to add NuGet reference for recaptcha.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ExportToExcelSendEmailandRecaptcha.ViewModel;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Net;
using System.Net.Mail;
namespace ExportToExcelSendEmailandRecaptcha.Reuse
{
public class Reuse
{
internal void actualExport(List<Instructor> instructors, HttpResponseBase resp)
{
//We will use grid to put the same in excel by creating XML which will be saved as excel
//create new grid handle
GridView gv = new GridView();
//assign the instructor table as datasource
gv.DataSource = instructors;
//bind the data source with the grid handle
gv.DataBind();
resp.ClearContent();
resp.Buffer = true;
//This gives the name of the excel sheet, inplace of "instructor" you can have different filename
//If you want different file name you can have this also sent from the controller
resp.AddHeader("content-disposition", "attachment; filename=" + "instructor" + ".xls");
resp.ContentType = "application/msexcel";
resp.Charset = "";
StringWriter sw = new StringWriter();
HtmlTextWriter htw = new HtmlTextWriter(sw);
gv.RenderControl(htw);
resp.Output.Write(sw.ToString());
resp.Flush();
resp.End();
}
internal bool sendEmail(string strReceiver, string strSubject, string strComment)
{
try
{
//create the mail message handle, this is given by System.Net.Mail
MailMessage mailMessage = new MailMessage();
//This gives the from address for sender
//First is for the email address and second is for display name
//Display name can be any but email has to be valid
mailMessage.From = new MailAddress("abc@hotmail.com", "Contosso University");
//Add email to be sent to address
mailMessage.To.Add(strReceiver);
//Subject for the email
mailMessage.Subject = strSubject;
//Body of the email
mailMessage.Body = strComment;
//type for email body here I have selected to be HTML
mailMessage.IsBodyHtml = true;
//Define smtp handle given by System.Net
SmtpClient smtpClient = new SmtpClient();
//Define host, this keeps changing, so check your setting for hotmail
//Alternatively you can use your gmail also ask smtp server
smtpClient.Host = "smtp-mail.outlook.com";
smtpClient.Port = 587;
smtpClient.EnableSsl = true;
NetworkCredential networkCredential = new NetworkCredential();
networkCredential.UserName = "abc@hotmail.com";
networkCredential.Password = "abcabc";
smtpClient.UseDefaultCredentials = true;
smtpClient.Credentials = networkCredential;
smtpClient.Send(mailMessage);
return true;
}
catch (Exception e)
{
return false;
}
}
}
}

ContactWithEmail.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace ExportToExcelSendEmailandRecaptcha.ViewModel
{
public class ContactWithEmail
{
/*You need not necessary add this ViewModel if you have only one column*/
[Required(ErrorMessage = "Please enter Comment")]
public string Comment { get; set; }
}
}

Thursday, September 13, 2012

for convinence sake we will call it Modal_JQuery_ASPdotNet_MVC. You can name your project to you liking.

Now click Ok button. Select Internet Project and click Ok. The view engine I use is Razor, so I have selected Razor as my view engine.

Now the basic set up is done. We will have the following items created in Solution explorer for us to use.

Now as you can see you already have Home controller and Views for Home created. Since the modal doesn't have to do much with controller and view (apart from handling the logic and showing the view) we will work on Home controller and Home View to show our Modal dialog.

The idea of this sample is to show a partial view as modal dialog. So we also need to create a partial view which will be displayed as modal dialog. Right click on ~/views/shared/ folder and add a partial view. As given below:

Now write the code for what you want displayed in the modal dialog. Say we are working on making a Contact Us form. So let's add code for the same.

code for the modal is complete with this partial implementation. Now all that remains is writing JQuery involved in respresenting this partial as modal dialog.
Now to start with the JQuery code. Open Index view in ~/Views/Home/. This view is already created by VWD when we created the project. Now for simplicity sake please delete all the below selected code in Index.cshtml.

Now start with the Jquery first include JQuery library, JQuery UI and JQuery Unobtrusive ajax extensions to your code. You can do that by adding the following code:

Let's break that down for you. @Html.Action generates anchor tag in HTML for us. It has many overload out of which the one we are using has the following component

@Html.ActionLink("Text of the link","Action to be called", "Controller in which action is present", "route values", "Html attributes to be assigned to anchor tag")
So here we have said create a anchor tag with text Contact US which will call the action name ContactUs in controller Home. It doesn't have any route values that is to say we are not passing any parameter to the action and its Html attributes are as follows:
it's class name is openDialog
it's data_dialog_id attribute is emailDialog
it's data_dialog_title attribute is contactus

Note: data_dialog_id in @Html.ActionLink is converted to data-dialog-id when anchor tag is created. This happens automatically.
Also add a div to display the result thrown from the dailog to be displayed:

<div id="result"></div>

Now write JQuery to create the modal. (please remove comment in case this doesn't work, the comments are added for understanding and don't play any role in code.)

<script type="text/javascript">
//Below code will clear cache
$.ajaxSetup({ cache: false });
//Below code will run the JQuery when document is ready.
$(document).ready(function () {
//Below code will append a click event to the class openDialog
//which we assigned to the anchor previously
$(".openDialog").live("click", function (e) {
//Below code will prevent default action from occuring
//when openDialog anchor is clicked
e.preventDefault();
//This is the actual implementation of the dailog
$("<div></div>")
//To the div created for dialog we will add class named dialog
//this is done so that we can refer to the dialog later
//we will see this in a short while why it is important
.addClass("dialog")
//add attribute add id attribute
//note id attribute is assigned the same value as data-dialog-id
//attribute in openDialog anchor
.attr("id",$(this).attr("data-dialog-id"))
//below code appends this div to body
.appendTo("body")
//below code describes the attribute for the dialog
.dialog({
//below code assigns title to the dialog
//here we use same title as data-dialog-title attribute
//in openDialog anchor tag
title: $(this).attr("data-dialog-title"),
//this will append code to close the dialog
//and also put close cross(x) in dialog
//we press ESC key in keyboard will also close dialog
close: function () { $(this).remove() },
//below code defines that the dialog is modal dialog
modal:true
})
//below code says take href from openDialog anchor
//which is /Home/ContactUs and load it to the modal dialog
.load(this.href);
});
});
</script>

Now a small controller code needs to be written to open the modal dialog.
In Home controller write the following code:

public ActionResult ContactUs(){ return PartialView("ContactUs");}

Now, since we are refering the JQuery library in our Index file we need to clear JQuery reference from our _Layout.cshtml file. so in _Layout.cshtml find the line which says @Scripts.Render
("~/bundles/jquery") and comment it. The way to comment using razor syntax is as follows:

@*@Scripts.Render("~/bundles/jquery")*@

Note:Applies only to guys using VWD2012

Now for final touch so that your modal looks good include JQuery UI CSS in the _Layout.cshtml.

And for simplicity sake I suggest you to remove the default style sheet's section which defines ui-dialog for ajax login because it conflicts with the JQuery UI CSS.
Note: Applies only to guys using VWD 2012.

Now our dialog can be opened and if we press ESC key the dialog will close.(screenshot below).

Note you can see that the partial ContactUs.cshtml which we created previously is reflected as dialog here. We can have any kind of form shown as dialog in this way.

Now what happens if I want to take the dialog's data after submit is clicked and process the data and also show it in the page as updated.

We will do that now.

Before we move on with the JQuery let's first create a ContactUs post method controller where we will do the logic processing. The controller will look like this.

Let me explain that to you. This controller will take name, email and message from the modal dialog as input and will output a Json result with name, email and message. Here before returning the content you can also save it to database you if want or you can write any other processing logic like you might want to append Mr/Mrs before the name.

After the controller is done now let's write JQuery code that will call this controller. We need to append this code in the previous script we had defined inside the $(document).ready() function.

//if you see that code in the partial view our submit button
//is defined as .close class, so below code says on document ready
//append click event to this button
$(".close").live("click", function (e) {
//prevent default action on the button click
e.preventDefault();
//get value of name textbox id=Namecontact
//put in variable name
var name = $("#Namecontact").val();
//get value of email textbox id=emailcontact
//put in variable email
var email = $("#emailcontact").val();
//get value of message textarea id=messagecontact
//put it in variable message
//note since messagecontact is a textarea
//we need to use .text() rather than .val()
var message = $("#messagecontact").text();
//Start ajax call
$.ajax({
//define method for sending data to controller
type: "POST",
//define controller URL
url: "/Home/ContactUs",
//define data to send to controller
//if you remember our controller accepts
//3 parameters name, email and message
data: { "name": name, "email": email, "message": message },
//create a success function
//this method is executed if controller
//defined by the URL is found
//and it accepts the data sent
//control comes to this point if the controller
//is executed. So data in function(data)
//contains the Json data we sent
//from the controller
success: function (data) {
//Now in the div with id result defined in
//index page previously we will put in the
//data. As you can see Json data is very
//easy way of returning to ajax call because
//now you can simply say data(dot)variable sent
//and you will get the returned value.
$("#result").html("<ul><li>Name: " + data.nameret + "</li><li>Email: " + data.emailret+ "</li><li>Message: "+data.messageret+"</li></ul>");
//now close the modal dialog we opened
$(".dialog").dialog("close");
},
//control comes to this function if ajax doesn't
//find the controller or controller doesn't accepts
//the data sent or controller throws exception
error: function (data) {
//If it happens alert user of the error
alert("There was error processing this");
//close the modal dialog
$(this).closest(".dialog").dialog("close");
}
});
});

So this now completes our dialog. Please note that this JQuery needs to be inside $(document).ready() function.

PS: You can also add validations to this the modal form but I have not included it here. You can also send modal from dB to the Views and update those modal from result from the view. For this you will have to make changes to the controller actions defined.