This article demonstrates how to use Ajax's Rating Control in ASP.Net.
Note: We are assuming that you have already completed the installation of the Ajax Toolkit as well as have a basic understanding of coding.
About the control:
A DragPanel is used mainly to allow you to implement mouse based drag and drop movable content in your ASP.NET web page, where the end user of your website is allowed to move the content and place it anywhere on the page. Before firing up the Visual Studio environment, make sure you have satisfied the requirements.
This article provides a few steps which will be easy to follow.
Step 1:
Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ScriptManager to the page. You can drag the ScriptManager from the Visual Studio Toolbox window onto the page. The ScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
Step 2:
Create one css class named dragpanel, which looks like:
<style type="text/css">
.dragpanel{
background-color: #FFC0FF;
height: 200px;
width: 400px;
border-bottom-color: black;
}
</style>
Step 3:
Drag a Panel control from the Toolbox and give it the CssClass name dragpanel.
<asp:Panel ID="PnlHeader" runat="server" CssClass="dragpanel">
</asp:Panel>
Step 4:
Drag an image into the panel control.
<asp:Panel ID="PnlHeader" runat="server" CssClass="dragpanel">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/flower.jpg"
Width="100px" />
</asp:Panel>
Step 5:
Drag a DragPanel Extender control from the Ajax toolkit; provide:
TargetControlID="Image1"
DragHandleID="Image1"
Which looks like:
<cc1:DragPanelExtender ID="Image1_DragPanelExtender" runat="server"
Enabled="True" TargetControlID="Image1" DragHandleID="Image1">
</cc1:DragPanelExtender>
Step 6:
On From's body tag write the following javascript function. With the use of this function you can set a drag drop target.
<script type="text/javascript">
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(150, 60)+"px";
document.body.style.width = Math.max(350,60)+"px";
}
setBodyHeightToContentHeight();
</script>
I have called this function within a Script.
Step 7: Run Website..........