I have a ASP.NET Application with a master site and content sites. in one of this content sites I have a Div with Controls and I want to try it make draggable with jQuery but I don't know how I can to this in ASP.NET because of the Control Id in asp.
here is my code:
master site:
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Script/jquery-ui.js" type="text/javascript"></script>
<script>
$(function () {
$("#create_box").draggable();
});
</script>
</head>
<body>
<form id="mainform" runat="server">
<div class="gastzugang">
<asp:ContentPlaceHolder ID="lw_header" runat="server">
<!--Header-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_content" runat="server">
<!--Content-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_footer" runat="server">
<!--Footer-->
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
My Content Site:
<%# Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="CreateUser.aspx.cs" Inherits="lw_gastzugang.CreateUser" %>
<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
<div class="createuser">
<div class="create_box">
<div class="newUser">
Benutzer Anlegen <br/>
<br/>
//Here are my Controls
<br/>
<asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen"
onclick="btnAnlegen_Click" />
</div>
</div>
</div>
</asp:Content>
I want to this:
http://jqueryui.com/droppable/
Just use jQuery UI draggable.
Make
ClientIDMode="static" in the asp.net Tag
Or Use
<script type="text/javascript">
$('#'+'<%=lw_content.ClientID%>').draggable();
</script>
You could take a look at hammer.js which covers a 'drag' style event:
https://github.com/EightMedia/hammer.js
The drag example there is at:
http://eightmedia.github.com/hammer.js/drag/
Now I don't know too much about ASP.NET but what I would try is applying the drag behaviour to anything with a .draggable class.
Hope that helps a little!
Related
I am trying to add a view inside a Web form and its fine to show data. But I do a post it break. I have used LINK sample which I found on sof but it wont work for POST Request. Always throwing a MAC fail error.
Webforms typically uses a single form for the entire page. But HTML does not support nested forms, so if you put another form onto the page via MVC partial view, you need to ensure the partial view is not rendered inside of your <form runat="server"> tag.
Here is an example of using multiple forms with Webforms.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<fieldset>
<legend>ASP.NET web form (POST)</legend>
<asp:Label runat="server" AssociatedControlID="txtSearch">Name: </asp:Label><asp:TextBox runat="server" ID="txtSearch" /><asp:Button runat="server" ID="btnSend" Text="Search" OnClick="btnSend_Click" />
</fieldset>
</form>
<form method="get" action="Search.aspx">
<fieldset>
<legend>Regular HTML form using GET</legend>
<label for="name-text">Name: </label><input type="text" id="name-text" name="q" /><input type="submit" value="Search" />
</fieldset>
</form>
<form method="post" action="Search.aspx">
<fieldset>
<legend>Regular HTML form using POST</legend>
<label for="name-text2">Name: </label><input type="text" id="name-text2" name="q" /><input type="submit" value="Search" />
</fieldset>
</form>
</body>
</html>
NOTE: If your main webforms form is declared in a master page, you will need to render your MVC form inside of a separate ContentPlaceHolder control so the forms are not nested.
<!DOCTYPE HTML>
<html id="Html1" runat="server" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml-rdfa-1.xsd" xmlns:og="http://opengraphprotocol.org/schema/" >
<head id="Head1" runat="server">
<title>My Site</title>
</head>
<body id="Body1" runat="server">
<form id="frmMain" runat="server">
<!-- form for Webforms -->
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
<!-- placeholder for external forms -->
<asp:ContentPlaceHolder ID="OutsideOfForm" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Jquery is not wrking when I am using form tag in asp.net controls.so whats the solution .I am trying multiple techniques but it does not work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bt1").click(function () {
$("#p1").hide(2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p runat="server" id="p1">this is asp.net</p>
<asp:Button ID="bt1" Text="click" runat="server"/>
</div>
</form>
</body>
</html>
As you are using ASP.NET and bt1 is a button server control you need to use Control.ClientID.
<%= bt1.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$("#<%= bt1.ClientID %>").click(function () {
$("#<%= p1.ClientID %>").hide(2000);
});
OR
You can use ClientIDMode.Static mode then you can continue with your existing code. However I will not recommend it.
I have an ASP.NET project whose page starts with:
<head runat="server">
<meta charset="utf-8">
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</head>
Then my manager told me that I have to merge that project with another one. She gave me the code of the other project. That code doesn't have a head tag in it, but it has this at the start of the page:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
Where do I put the <head> tag in this new project?
The first code snippet you provided is standard HTML markup and the second is ASP.NET markup as I am sure you are aware.
You can combine both of them in the following manner:
<%# Page Title="Service Categories" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="service._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
<title>Online SMS Choose</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/css/tableStyle.css" />
<link id="Link2" rel="stylesheet" runat="server" media="screen" href="~/css/LoadingStyle.css" />
<link id="Link3" rel="stylesheet" runat="server" media="screen" href="~/css/selectStyle.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function () {
$("#tabs").tabs();
});
$(function () {
$("#datepicker").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
........
You have already a head section in there:
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
check your project for files, which put content into this PlaceHolder. If you want to define a <head> wrap it around this content placeholder. But then you need to check the contents of the other files and refactor it, so you do not define a head tag inside a head tag.
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="Scripts/ZeroClipboard.js"></script>
<script type="text/javascript" src="Scripts/main.js"></script>
</asp:Content>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="content" id="Content">
// ...
</div>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
You can place the <head runat="server"></head> above the content..
Wich file are you supposed to put in the other?
One is using a masterpagefile and the other isn't.
I want to load website pages with slide effect similar abnieh.
It means when you are click the menu elements, the page changes with slide effect.
I use Umbraco CMS, ASP.NET Web Form and C#.NET.
How can I do it?
Please help me.
a part of my main master page is:
<form id="AbniyehMainForm" runat="server">
<div id="MasterMaster" style="width: 100%;">
<div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault">
<div>
<uc1:HeaderControl runat="server" ID="HeaderControl" />
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="aboutUsContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="serviceSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="projectSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="newsSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
<div>
<asp:ContentPlaceHolder runat="server" ID="languagesContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="menuContent">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
You will need to use a client side javascript effect, Most likely with jQuery and load the pages using ajax then slide the page in after it is loaded. I found this Project that looks like it will do what you want and here is a sample from a tutorial.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
And here is how you load a page via ajax from the jQuery website.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$( "#new-nav" ).load( "/ #jq-footerNavigation li" );
</script>
</body>
</html>
I have a Page that is associated with a master page. In the master page, I put the css links in the head section and I put the jquery script tag and the script that contains the function to toggle the grid, but when it is not working. Looks like it is not even calling showhide when I click on an item.
Here is a snippet of the master page:
<head runat="server">
<title></title>
<link href="MainLayout.css" rel="stylesheet" type="text/css" />
<link href="ajaxtab.css" rel="stylesheet" type="text/css" />
<link href="dialog.css" rel="stylesheet" type="text/css" />
<link href="grid.css" rel="stylesheet" type="text/css" />
<link href="pager.css" rel="stylesheet" type="text/css" />
<link href="subgrid.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.endsWith("plus.png"))
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Here is the div that contains the showhide function in the onclick event in the aspx page:
<div class="searchgroup"
id='<%#String.Format("master{0}",Container.DataItemIndex)%>'
onclick='showhide(<%#String.Format("\"#master{0}\"",Container.DataItemIndex)%>
,
<%#String.Format("\"#detail{0}\"",Container.DataItemIndex) %>)'>
<asp:Image ID="imgCollapsible"
CssClass="first"
ImageUrl="plus.png"
Style="margin-right: 5px;"
runat="server" />
<span class="searchheader"><%#Eval("Business")%></span>
</div>
Here is html it generates for the master and detail div:
//master div
<div class="searchgroup"
id='master0'
onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible"
class="first" src="plus.png"
style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
//details div
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
I could not get the JQuery working and I was running out of time, so for now I decided to use the collapsible panel externder from the ajax control toolkit. When I get time, I will investigate the JQuery Issue, Thanks for all your suggestions so far. If anyone has any more, please let me know.
Your javascript is throwing an error at src.endsWith("plus.png") because there is no built in endsWith function in js. replace that with src.substr(-8) == "plus.png" instead and it works:
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
EDIT - Working example:
MasterPage.master
<%# Master Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="searchgroup" id='master0' onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" class="first" src="plus.png" style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
</tr>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
</asp:Content>
" Looks like it is not even calling showhide when I click on an item." If you simplify the function with just an alert() function, does it work.
The code looks fine to me. Maybe there is some id mismatch.
You may check if jquery's path is correct in your page (that which uses this master page).
To be sure if its calling showhide() you can use Firebug in Firefox with a breakpoint in the function.
Also, it will give you more clues to debug and guess what is going wrong.
The code seems to be ok to me, too.
just a thought, if you right click view source on the browser, do you see the jquery path correctly? my experience tells me you need to resolve javascript urls on master pages (it works fine for css, but not js files)
<script src="<%= ResolveUrl("~") %>jquery-1.3.2.min.js" type="text/javascript"></script>