2013 | Coding Cluster - using asp.net, c#, mvc 4, iphone, php, ios, javascript, in asp.net mvc 3 & more

drag and drop between two divs using jquery ui

Tuesday

Jquery drag and drop sortable between different divs:
In this tutorial I'm using jquery 1.4 2 min js and jquery-ui-1.8.13.min.js for drag and drop divs with image. In this simaple example you can Drag and drop items within a list and also Drag and drop items within and between lists of divs
First download the requirement Jquey fils, you can download it from here or you can directly call from google.

Download jquery 1.4 2 min js

Downloadjquery-ui-1.8.13.min.js

Using the parameter connectWith (jQuery selector) we can define which other lists that items within a list can be dragged and dropped to. Add the following code into page load function.

<script>
$(document).ready(function () {
 $('.container .draggable-list').sortable({
 connectWith: '.container .draggable-list'
 });
});
</script>

then add that js reference to your page header tag

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>

Then copy and paste the following css in to your style region

<style>
.container {
 width: 400px;
 background-color:#000000;
 border-bottom-color:#003366;
}
.draggable-list {
 background-color: #0066FF;
 list-style: none;
 margin: 0;
 min-height: 70px;
 padding: 10px;
}
.draggable-item {
 background-color: #FFF;
 border: 1px dotted #000;
 cursor: move;
 display: block;
 font-weight: bold;
 color:#CC0033;
 text-shadow: 5px 5px 5px #FF0000;
 padding-bottom:  70px;
 margin: 5px;
}
.img1 {
 width:76px;
 height: 62px;
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -3.5px -9px;
 float:left;
}
.img2 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -98px -7px;
 width: 70px;
 height: 66px;
 float:left;
}
.img3 {
 background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmPR_z7HNH5_D5mL3iSnN3TKntSKvOpWrGXApaXvYRRgEViP9zN5X5hlXxt4JAbshSv4YOHSzyHFaXSfCZI1rKDU68JZm3PvonazswiGKHLGCwd-gbeFF5rpd0nquiDk07XylsVJRzlvaD/s1600/how+to+use+sprite+image.jpg') -198px -9px;
 width: 63px;
 height: 58px;
 float:left;
}

Finally add the draggable-list and draggable-item with in the container div.

<div class="container">
  <div class="draggable-list" style="float:left">
    <div class="draggable-item">
      <div class="img1"></div>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img2"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img3"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img5"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img6"></span>
      <p style="float:right"> Group A </p>
    </div>
    <div class="draggable-item"> <span class="img4"></span>
      <p style="float:right"> Group A </p>
    </div>
  </div>
  <div class="draggable-list" style="float:right">
    <div class="draggable-item"> <span class="img7"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img8"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img9"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img10"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img11"></span>
      <p style="float:right"> Group B </p>
    </div>
    <div class="draggable-item"> <span class="img12"></span>
      <p style="float:right"> Group B </p>
    </div>
  </div>
</div>

Demo Download

Enabling Service Broker in SQL Server 2008

Thursday

Activate Service Broker in SQL Server 2008:
If you are working in sql dependency, SignalR related projects you must enable service broker for messaging and queuing functions between instances. The basic functions of sending and receiving messages forms a part of a “conversation.”

What is services broker?

According from Microsoft SQL Server Service Broker provides native support for messaging and queuing applications in the SQL Server Database Engine. This makes it easier for developers to create sophisticated applications that use the Database Engine components to communicate between disparate databases. Developers can use Service Broker to easily build distributed and reliable applications.

Service broker find applications when single or multiple SQL server instances are used. This functionality helps in sending messages to remote databases on different servers and processing of the messages within a single database. In order to send messages between the instances, the Service Broker uses TCP/IP.

Check the sql server services broker status?

Before enable service broker better we need check the current services broker status of the database. The following simple command used to do that.

SELECT name, is_broker_enabled FROM sys.databases

Then activate services broker on "codingclusterDB" database by using the following command.

ALTER DATABASE CodingClusterDB SET ENABLE_BROKER
GO

Enable SQL Server Broker taking too long time?

If your Alter Database query takes long time to process, then use the following command to activate services broker on your database

ALTER DATABASE CodingClusterDB SET ENABLE_BROKER WITH ROLLBACK IMMEDIATE;
GO

Install .nupkg file locally(OR)Offline in visual studio from NuGet

Tuesday

Install NuGet Package from local machine manually:

Some companies not allowed internet connection for development environment for some security purpose. On that time we can't install packages directly from Nuget.Org through Package Manager console. This type of situation the following s three easy steps to install Nuget packages to visual studio when your are working in offline mode.

Step-1: First download your package from http://www.nuget.org/packages/ .

Download Nuget Packages Without VS/NuGet Package Manager (Manuallydownload):
If you not able to directly download the package from http://www.nuget.org/packages/ , then you try a chrome extension called "NuTake". This extension create a direct link to download the package. The link just shown under the "PM>Install - Package..." command box.

Step-2: After download your package open visual studio and open "Tools - > Options -> Package Manager"

Give a name and folder location. Click OK. Drop your NuGet package files in that folder.

Step-3: In the third step, Go to your Project, Right click and select "Manage Nuget Packages" and

select /Install your new Package source.

Sample code for displaying festival names on calendar control in ASP.Net

Friday

Displaying festival names on calendar control using c# in ASP.Net:

This is an article for showing festival names on a specific date on calendar control. First create a SQL table with following fields HolidayName, HolidayDate. And fulfill the festival name in "HolidayName" field and festival date in "HolidayDate" field.

Then took one Calendar control on to the page(Calendar.aspx)

Copy and paste the following code into your Calendar.aspx file

 <form id="form1" runat="server">
<div>

    <asp:calendar ondayrender="Calendar1_DayRender" id="Calendar1" runat="server" backcolor="#FFFFCC" bordercolor="#FFCC66" borderwidth="1px" daynameformat="Shortest" names="Verdana" size="8pt" forecolor="#663399" height="200px" showgridlines="True" width="300px">
        <selecteddaystyle backcolor="#CCCCFF" bold="True">
        <selectorstyle backcolor="#FFCC66">
        <todaydaystyle backcolor="#FFCC66" forecolor="White">
        <othermonthdaystyle forecolor="#CC9966">
        <nextprevstyle size="9pt" forecolor="#FFFFCC">
        <dayheaderstyle backcolor="#FFCC66" bold="True" height="1px">
        <titlestyle backcolor="#990000" bold="True" size="9pt" forecolor="#FFFFCC">
    </titlestyle>

</dayheaderstyle></nextprevstyle></othermonthdaystyle></todaydaystyle></selectorstyle></selecteddaystyle></asp:calendar></div>
</form>
<span style="font-weight: bold; color: rgb(51, 51, 255);font-size:130%;"></span>

Then Copy and paste the following code into your Calendar.aspx.cs file

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection con;
protected void Page_Load(object sender, EventArgs e)
{
 con = new SqlConnection(ConfigurationManager.ConnectionStrings["YourConnectionString"].ConnectionString);
}
protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
{
 CalendarDay day = (CalendarDay)e.Day;
 SqlCommand cmd = new SqlCommand("select HolidayName,HolidayDate from Holidays", con);
 con.Open();
 SqlDataReader dr = cmd.ExecuteReader();

 while (dr.Read())
 {
     if (day.Date.ToString() == dr["HolidayDate"].ToString())
     {
         TableCell cell = (TableCell)e.Cell;
         string s1 = dr["HolidayName"].ToString();
         if (s1 != null)
         {
             cell.BackColor = System.Drawing.Color.LightGray;
             cell.Controls.Add(new LiteralControl("
" + s1));
         }

     }

 }
 con.Close();
}
}