Search Results

Search found 1268 results on 51 pages for 'sticky footer'.

Page 50/51 | < Previous Page | 46 47 48 49 50 51  | Next Page >

  • CSS import or multiple CSS files

    - by David H
    I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!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> <title>The Recipe Site</title> <link rel='stylesheet' href='/css/main.css'> <link rel='stylesheet' href='/css/site_header.css'> <!-- Let google host jQuery for us, maybeb replace with their api --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript" src="/js/main.js"></script> </head> <body> <div id="site_container"> <div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div> <div id="site_content"> Some main content. </div> <div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div> </div> </body> </html> File: /css/main.css /* Reset Default Padding & Margin */ * { margin: 0; padding: 0; border: 0; } /* Set Our Float Classes */ .clear { clear: both; } .right { float: right; } .left { float: left; } /* Setup the main body/site container */ body { background: url(/images/wallpaper.png) repeat; color: #000000; text-align: center; font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif; } site_container { background-color: #FFFFFF; height: 100%; margin-left: auto; margin-right: auto; text-align: left; width: 100%; } /* Some style sheet includes / / @import "/css/site_header.css"; */ /* Default Font Sizes */ h1 { font-size: 2.2em; } h2 { font-size: 2.0em; } h3 { font-size: 1.8em; } h4 { font-size: 1.6em; } h5 { font-size: 1.4em; } p { font-size: 1.2em; } /* Default Form Layout */ input.text { padding: 3px; border: 1px solid #999999; } /* Default Table Reset */ table { border-spacing: 0; border-collapse: collapse; } td{ text-align: left; font-weight: normal; } /* Cause not all browsers know what HTML5 is... */ header { display:block;} footer { display:block;} and now the file: /css/site_header.css: site_header { background-color: #c0c0c0; height: 100px; position: absolute; top: 100px; width: 100%; } Problem: When I use the above code, the site_header div does not have any formatting/background. When I remove the link line from the HTML doc for site_header.css and instead use an @import url("/css/site_header.css"); in my main.css file, the same results -- nothing gets rendered for for the same div. Now when I take the CSS markup from site_header.css and add it to main.css, the div gets rendered fine... So I am wondering if having multiple css files is somehow not working... or maybe having that css markup at the end of my previous css is somehow conflicting, though I cannot find a reason why it would.

    Read the article

  • PHP Form not working IE and Chrome, but fine in FF

    - by RO
    <? if(isset($_POST['accountUser']) && isset($_POST['accountPassword'])) { include("dbase.php"); include("settings.php"); if ($_POST['accountType']=="member") { $database="chatusers"; } else if ($_POST['accountType']=="model") { $database="chatmodels"; } else if ($_POST['accountType']=="studioop") { $database="chatoperators"; } $userExists=false; $result = mysql_query("SELECT id,user,password,status FROM $database WHERE status!='pending' AND status!='rejected' "); while($row = mysql_fetch_array($result)) { $tempUser=$row["user"]; $tempPass=$row["password"]; $tempId=$row["id"]; if ($_POST['accountUser']==$tempUser && md5($_POST['accountPassword'])==$tempPass) { if ($row["status"]=="blocked") { $userExists=true; $errorMsg="Account is blocked, please contact the administrator for more details"; } else { $userExists=true; $currentTime=time(); mysql_query("UPDATE $database SET lastLogIn='$currentTime' WHERE id = '$tempId' LIMIT 1"); setcookie("usertype", $database, time()+3600); setcookie("id", $tempId, time()+3600); header("Location: cp/$database/"); } } } if (!$userExists){ $errorMsg="Wrong Username or password"; } } else if (isset($_GET['from']) && $_GET['from']=="recoverpass"){ $errorMsg="Your new password has been sent to your mail"; } else { $errorMsg="Please complete username and password fields"; } ?> <? include("_main.header.php"); ?> <table width="720" height="200" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><form action="login.php" method="post" enctype="application/x-www-form-urlencoded" name="form1"> <p>&nbsp;</p> <table width="720" border="0" align="center"> <tr> <td colspan="2"><p align="left"> <span class="error"><?php if ( isset($errorMsg) && $errorMsg!=""){ echo $errorMsg; } ?></span> <br> <br> </p></td> </tr> <tr> <td width="210" align="right" valign="top" class="form_definitions"><div align="right">Username:</div></td> <td align="left" valign="top"><input name="accountUser" type="text" id="accountUser" value="<? echo $_GET[user];?>" size="24" maxlength="24"></td> </tr> <tr> <td align="right" valign="top" class="form_definitions"><div align="right">Password:</div></td> <td align="left" valign="top"><input name="accountPassword" type="password" id="accountPassword2" size="24" maxlength="24"></td> </tr> <tr> <td align="right" valign="top" class="form_definitions"><div align="right">Account type:</div></td> <td align="left" valign="top"> <select name="accountType" id="select"> <option value="member" selected>Member</option> <option value="model">Model</option> <option value="studioop">Studio Operator</option> </select> <div align="left"></div></td> </tr> <tr> <td align="right" valign="top" class="form_definitions">&nbsp;</td> <td align="left" valign="top"> <input type="submit" name="Submit" value="Log In to your account"> <div align="left"></div></td> </tr> <tr> <td align="right" valign="top" class="form_definitions">&nbsp;</td> <td align="left" valign="top"><a href="lostpassword.php" class="left">Lost Password? Press Here!</a></td> </tr> </table> </form></td> </tr> </table> <br> <br> <? include("_main.footer.php"); ?>

    Read the article

  • Expression Web 4 - Master Page Error

    - by Eric J.
    I created an ASP.Net Web Application in VS 2010. That in turn creates an example Site.Master, Default.aspx, and several other example files. I then opened Default.aspx in Expression Web 4 and get the error message The Master Page file 'Site.Master' cannot be loaded. Default.aspx can still be displayed fine in VS 2010. Source.Master: <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="SampleWebApp.SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <title></title> <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> <style type="text/css"> .style1 { font-family: Tunga; } </style> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <div class="title"> <h1 class="style1"> My Application Master Page</h1> </div> <div class="loginDisplay"> <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"> <AnonymousTemplate> [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ] </AnonymousTemplate> <LoggedInTemplate> Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>! [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ] </LoggedInTemplate> </asp:LoginView> </div> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"> <asp:MenuItem NavigateUrl="~/Home/NewItem.aspx" Text="New Item" Value="New Item"></asp:MenuItem> <asp:MenuItem NavigateUrl="~/Home/AnotherItem.aspx" Text="Another Item" Value="Another Item"></asp:MenuItem> </asp:MenuItem> <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/> <asp:MenuItem NavigateUrl="~/ContactUs.aspx" Text="ContactUs" Value="ContactUs"> </asp:MenuItem> </Items> </asp:Menu> </div> </div> <div class="main"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> </div> <div class="clear"> </div> </div> <div class="footer"> </div> </form> </body> </html> Default.aspx: <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SampleWebApp._Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <style type="text/css"> .style2 { color: #669900; } .style3 { background-color: #FFFFCC; } </style> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2> Welcome to MY page! </h2> <p> To learn more <span class="style2"><strong><em><span class="style3">about</span></em></strong></span> ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>. </p> <p> You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409" title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>. </p> </asp:Content> Any idea how to get the master page to work properly in Expression Web 4?

    Read the article

  • if isset PHP not working?

    - by Ellie
    Okay, Im trying to set a captcha up, However with this code in, it breaks. if(isset($_POST["captcha"])) if($_SESSION["captcha"]==$_POST["captcha"]) When i do it with out it, the page works, but the captcha is letting incorrect submits through. Parse error: syntax error, unexpected '"', expecting T_STRING or T_VARIABLE or T_NUM_STRING in /hermes/waloraweb085/b2027/moo.lutarinet/jointest.php on line 71 <?php $pagetitle = "Home"; $checkrank = 0; include ($_SERVER['DOCUMENT_ROOT'].'/header.inc.php'); ECHO <<<END <br><br> <b><center><i><u>DO NOT</u> USE YOUR NEOPETS PASSWORD OR PIN NUMBER!!!</b></i></center> <p> ?> <?php session_start() ?> <center><P><FORM ACTION="join.pro.php" enctype="multipart/form-data" METHOD=POST> <table width="393" height="188" border="0" cellpadding="0" cellspacing="0"> <td width="150">Username</td> <td width="243"><input type=text name="name" value="" size=32 maxlength=15></td> </tr> <tr> <td>Password</td> <td><input type=password name="pass1" VALUE="" maxlength=15></td> </tr> <tr> <td>Confirm Password</td> <td><input type=password name="pass2" VALUE="" size=32 maxlength=15></td> </tr> <tr> <td>Security Code (4 Diget Number)</td> <td><input type=password name="security" VALUE="" size=32 maxlength=4></td> </tr> <tr> <td>Email Address</td> <td><INPUT TYPE=text NAME="email" VALUE="" SIZE=32 maxlength=100></td> </tr> <tr> <td height="41" colspan="2" valign="middle"><p><p><center> By registering an account here you agree to all of our <A HREF="$baseurl/tos.php">Terms and Conditions</A>. You can also view our <A HREF="$baseurl/privacy.php">Privacy Policy</A>. </center></p></td> </tr> <tr><td align="center">CAPTCHA:<br> (antispam code, 3 black symbols)<br> <table><tr><td><img src="captcha.php" alt="captcha image"></td><td><input type="text" name="captcha" size="3" maxlength="3"></td></tr></table> </td></tr> <td height="27" colspan="2" valign="middle"> <center><input type=submit name=Submit value="Register"></center> </td> </table> </form> <?php if(isset($_POST["captcha"])) if($_SESSION["captcha"]==$_POST["captcha"]) { //CAPTHCA is valid; proceed the message: save to database, send by e-mail ... echo 'CAPTHCA is valid; proceed the message'; } else { echo 'CAPTHCA is not valid; ignore submission'; } ?> <?php END; include ($_SERVER['DOCUMENT_ROOT'].'/footer.inc.php'); ?> captcha.php <?php session_start(); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-store, no-cache, must-revalidate"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); function _generateRandom($length=6) { $_rand_src = array( array(48,57) //digits , array(97,122) //lowercase chars // , array(65,90) //uppercase chars ); srand ((double) microtime() * 1000000); $random_string = ""; for($i=0;$i<$length;$i++){ $i1=rand(0,sizeof($_rand_src)-1); $random_string .= chr(rand($_rand_src[$i1][0],$_rand_src[$i1][1])); } return $random_string; } $im = @imagecreatefromjpeg("http://sketchedneo.com/images/sitedesigns/captcha.jpg"); $rand = _generateRandom(3); $_SESSION['captcha'] = $rand; ImageString($im, 5, 2, 2, $rand[0]." ".$rand[1]." ".$rand[2]." ", ImageColorAllocate ($im, 0, 0, 0)); $rand = _generateRandom(3); ImageString($im, 5, 2, 2, " ".$rand[0]." ".$rand[1]." ".$rand[2], ImageColorAllocate ($im, 255, 0, 0)); Header ('Content-type: image/jpeg'); imagejpeg($im,NULL,100); ImageDestroy($im); ?> Help please anyone? Line 71: if(isset($_POST["captcha"])) Line 72: if($_SESSION["captcha"]==$_POST["captcha"])

    Read the article

  • Swap image with jquery and show zoom image

    - by Neil Bradley
    Hi there, On my site I have 4 thumbnail product images that when clicked on swap the main image. This part is working okay. However, on the main image I'm also trying to use the jQZoom script. The zoom script works for the most part, except that the zoomed image always displays the zoom of the first image, rather than the one selected. This can be seen in action here; http://www.wearecapital.com/productdetails-new.asp?id=6626 I was wondering if someone might be able to suggest a solution? My code for the page is here; <% if session("qstring") = "" then session("qstring") = "&amp;rf=latest" maxProducts = 6 prodID = request("id") if prodID = "" or not isnumeric(prodid) then response.Redirect("listproducts.asp?err=1" & session("qstring")) else prodId = cint(prodId) end if SQL = "Select * from products,subcategories,labels where subcat_id = prod_subcategory and label_id = prod_label and prod_id = " & prodID set conn = server.CreateObject("ADODB.connection") conn.Open(Application("DATABASE")) set rs = conn.Execute(SQL) if rs.eof then ' product is not valid name = "Error - product id " & prodID & " is not available" else image1 = rs.fields("prod_image1") image1Desc = rs.fields("prod_image1Desc") icon = rs.fields("prod_icon") subcat = rs.fields("prod_subcategory") image2 = rs.fields("prod_image2") image2Desc = rs.fields("prod_image2Desc") image3 = rs.fields("prod_image3") image3Desc = rs.fields("prod_image3Desc") image4 = rs.fields("prod_image4") image4Desc = rs.fields("prod_image4Desc") zoomimg = rs.Fields("prod_zoomimg") zoomimg2 = rs.Fields("prod_zoomimg2") zoomimg3 = rs.Fields("prod_zoomimg3") zoomimg4 = rs.Fields("prod_zoomimg4") thumb1 = rs.fields("prod_preview1").value thumb2 = rs.fields("prod_preview2").value thumb3 = rs.fields("prod_preview3").value thumb4 = rs.fields("prod_preview4").value end if set rs = nothing conn.Close set conn = nothing %> <!-- #include virtual="/includes/head-product.asp" --> <body id="detail"> <!-- #include virtual="/includes/header.asp" --> <script type="text/javascript" language="javascript"> function switchImg(imgName) { var ImgX = document.getElementById("mainimg"); ImgX.src="/images/products/" + imgName; } </script> <script type="text/javascript"> $(document).ready(function(){ var options = { zoomWidth: 466, zoomHeight: 260, xOffset: 34, yOffset: 0, title: false, position: "right" //and MORE OPTIONS }; $(".MYCLASS").jqzoom(options); }); </script> <!-- #include virtual="/includes/nav.asp" --> <div id="column-left"> <div id="main-image"> <% if oldie = false then %><a href="/images/products/<%=zoomimg%>" class="MYCLASS" title="MYTITLE"><img src="/images/products/<%=image1%>" title="IMAGE TITLE" name="mainimg" id="mainimg" style="width:425px; height:638px;" ></a><% end if %> </div> </div> <div id="column-right"> <div id="altviews"> <h3 class="altviews">Alternative Views</h3> <ul> <% if oldie = false then writeThumb thumb1,image1,zoomimg,image1desc writeThumb thumb2,image2,zoomimg2,image2desc writeThumb thumb3,image3,zoomimg3,image3desc writeThumb thumb4,image4,zoomimg4,image4desc end if %> </ul> </div> </div> <!-- #include virtual="/includes/footer-test.asp" --> <% sub writeThumb(thumbfile, imgfile, zoomfile, thumbdesc) response.Write "<li>" if thumbfile <> "65/default_preview.jpg" and thumbfile <> "" and not isnull(thumbfile) then if imgFile <> "" and not isnull(imgfile) then rimgfile = replace(imgfile,"/","//") else rimgfile = "" if thumbdesc <> "" and not isnull(thumbdesc) then rDescription = replace(thumbdesc,"""","&quot;") else rDescription = "" response.write "<img src=""/images/products/"& thumbfile &""" style=""cursor: pointer"" border=""0"" style=""width:65px; height:98px;"" title="""& rDescription &""" onclick=""switchImg('" & rimgfile & "')"" />" & vbcrlf else response.write "<img src=""/images/products/65/default_preview.jpg"" alt="""" />" & vbCrLF end if response.write "</li>" & vbCrLF end sub %>

    Read the article

  • how to define div or table cell height depending on the height of other divs or cells

    - by John
    I want to have a web page that contains 3 parts: A header at the top of the page , a footer (both of which having specific height in px)and the main part of the page which should be a div or table cell with the appropriate height attribute in order to take all the available space between them. I want the page to take 100% of the browser window height, trying to avoid scrollbars. The problems I have are the following: USING DIVs a) If I set the maindiv height to 100%, the page overflows and I get a vertical scrolbar. (the maindiv's height is set to the 100% of the browser window) <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html{ height: 100%; max-height:100%; width: 100%; margin:0; padding:0; } div{padding:0;margin:0;} #containerdiv{height:100%;width:100%;background-color:#FF9;border:0;} #headerdiv{height:150px;width:100%;background-color:#0F0;border:0;} #footerdiv{height:50px;width:100%;background-color:#00F;border:0; } #maindiv{ background-color:#F00; height:100%; } div{border:#000 medium solid;border:0;} </style> <body> <div id="containerdiv"> <div id="headerdiv">headerdiv</div> <div id="maindiv">maindiv</div> <div id="footerdiv">footerdiv</div> </div> </body> </html> b) If I set the maindiv height to auto, the maindiv height is depending on it's content, which is not what I want. USING tables a) If I set the main cell height to 100% it works fine with Firefox but in Internet Explorer 8 I get a vertical scrollbar (you can use the next code block using th style="height:100%" instead of "auto" to see this.) b) If I set the main cell to auto it seems to be working both in IE and FF but then I have the problem that anything I put inside the maincell (table or div) cannot get maincell's full height in IE. <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> <!-- body, html, table{ height: 100%; width: 100%; margin:0; padding:0; } table{border:#000 0px solid} </style> <body> <table style="background:#063" cellpadding="0" cellspacing="0" border="0"> <tr><th style="height:150px;background-color:#FF0"></th></tr> <tr> <th style="height:auto"><table style="background:#0FF;" cellpadding="0" cellspacing="0" border="0"><tr><th style="height:auto">nested cell</th></tr></table> </th> </tr> <tr><th style="height:50px;background-color:#FF0"></th></tr> </table> </body> </html> </html> Any ideas? Maybe there is an easier way to define the size of the main part of the page in px using javascript? (my javascript skills are pretty poor so any help with this is welcome!)

    Read the article

  • Pagination, next page doesn`t display

    - by user1738013
    if I click page 2 that`s error: Not Found The requested URL /rank/GetAll/30 was not found on this server. My link is: http://localhost/rank/GetAll/30 Model: Rank_Model <?php Class Rank_Model extends CI_Model { public function __construct() { parent::__construct(); } public function record_count() { return $this->db->count_all("ranking"); } public function fifa_rank($limit, $start) { $this->db->limit($limit, $start); $query = $this->db->get("ranking"); if ($query->num_rows() > 0) { foreach ($query->result() as $row) { $data[] = $row; } return $data; } return false; } } ?> Controller: Rank <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class rank extends CI_Controller { function __construct() { parent::__construct(); $this->load->helper("url"); $this->load->helper(array('form', 'url')); $this->load->model('Rank_Model','',TRUE); $this->load->library("pagination"); } function GetAll() { $config = array(); $config["base_url"] = base_url() . "rank/GetAll"; $config["total_rows"] = $this->Rank_Model->record_count(); $config["per_page"] = 30; $config["uri_segment"] = 3; $this->pagination->initialize($config); $page = ($this->uri->segment(3)) ? $this->uri->segment(3) : 0; $data["results"] = $this->Rank_Model->fifa_rank($config["per_page"], $page); $data['errors_login'] = array(); $data["links"] = $this->pagination->create_links(); $this->load->view('left_column/open_fifa_rank',$data); } } View Open: open_fifa_rank <?php $this->load->view('mains/header'); $this->load->view('login/loggin'); $this->load->view('mains/menu'); $this->load->view('left_column/left_column_before'); $this->load->view('left_column/menu_left'); $this->load->view('left_column/left_column'); $this->load->view('center/center_column_before'); $this->load->view('left_column/fifa_rank'); $this->load->view('center/center_column'); $this->load->view('right_column/right_column_before'); $this->load->view('login/zaloguj'); $this->load->view('right_column/right_column'); $this->load->view('mains/footer'); ?> and View: fifa_rank <table> <thead> <tr> <td>Pozycja</td> <td>Kraj</td> <td>Punkty</td> <td>Zmiana</td> </tr> </thead> <?php foreach($results as $data) {?&gt; <tbody> <tr> <td><?php print $data->pozycja;?></td> <td><?php print $data->kraj;?></td> <td><?php print $data->punkty;?></td> <td><?php print $data->zmiana;?></td> </tr> <?php } ?> </tbody> </table> <p><?php echo $links; ?></p> Maybe you know where is my problem? Now I know where is my problem. In first page I have link: http://localhost/index.php/rank/GetAll But on the next: http://localhost/rank/GetAll/30 In secend link, I don`t have index.php. How can I fix it?

    Read the article

  • Rounded Corners and Shadows &ndash; Dialogs with CSS

    - by Rick Strahl
    Well, it looks like we’ve finally arrived at a place where at least all of the latest versions of main stream browsers support rounded corners and box shadows. The two CSS properties that make this possible are box-shadow and box-radius. Both of these CSS Properties now supported in all the major browsers as shown in this chart from QuirksMode: In it’s simplest form you can use box-shadow and border radius like this: .boxshadow { -moz-box-shadow: 3px 3px 5px #535353; -webkit-box-shadow: 3px 3px 5px #535353; box-shadow: 3px 3px 5px #535353; } .roundbox { -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; } box-shadow: horizontal-shadow-pixels vertical-shadow-pixels blur-distance shadow-color box-shadow attributes specify the the horizontal and vertical offset of the shadow, the blur distance (to give the shadow a smooth soft look) and a shadow color. The spec also supports multiple shadows separated by commas using the attributes above but we’re not using that functionality here. box-radius: top-left-radius top-right-radius bottom-right-radius bottom-left-radius border-radius takes a pixel size for the radius for each corner going clockwise. CSS 3 also specifies each of the individual corner elements such as border-top-left-radius, but support for these is much less prevalent so I would recommend not using them for now until support improves. Instead use the single box-radius to specify all corners. Browser specific Support in older Browsers Notice that there are two variations: The actual CSS 3 properties (box-shadow and box-radius) and the browser specific ones (-moz, –webkit prefixes for FireFox and Chrome/Safari respectively) which work in slightly older versions of modern browsers before official CSS 3 support was added. The goal is to spread support as widely as possible and the prefix versions extend the range slightly more to those browsers that provided early support for these features. Notice that box-shadow and border-radius are used after the browser specific versions to ensure that the latter versions get precedence if the browser supports both (last assignment wins). Use the .boxshadow and .roundbox Styles in HTML To use these two styles create a simple rounded box with a shadow you can use HTML like this: <!-- Simple Box with rounded corners and shadow --> <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="boxcontenttext"> Simple Rounded Corner Box. </div> </div> which looks like this in the browser: This works across browsers and it’s pretty sweet and simple. Watch out for nested Elements! There are a couple of things to be aware of however when using rounded corners. Specifically, you need to be careful when you nest other non-transparent content into the rounded box. For example check out what happens when I change the inside <div> to have a colored background: <!-- Simple Box with rounded corners and shadow --> <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="boxcontenttext" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> which renders like this:   If you look closely you’ll find that the inside <div>’s corners are not rounded and so ‘poke out’ slightly over the rounded corners. It looks like the rounded corners are ‘broken’ up instead of a solid rounded line around the corner, which his pretty ugly. The bigger the radius the more drastic this effect becomes . To fix this issue the inner <div> also has have rounded corners at the same or slightly smaller radius than the outer <div>. The simple fix for this is to simply also apply the roundbox style to the inner <div> in addition to the boxcontenttext style already applied: <div class="boxcontenttext roundbox" style="background: khaki;"> The fixed display now looks proper: Separate Top and Bottom Elements This gets even a little more tricky if you have an element at the top or bottom only of the rounded box. What if you need to add something like a header or footer <div> that have non-transparent backgrounds which is a pretty common scenario? In those cases you want only the top or bottom corners rounded and not both. To make this work a couple of additional styles to round only the top and bottom corners can be created: .roundbox-top { -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .roundbox-bottom { -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } Notice that radius used for the ‘inside’ rounding is smaller (4px) than the outside radius (6px). This is so the inner radius fills into the outer border – if you use the same size you may have some white space showing between inner and out rounded corners. Experiment with values to see what works – in my experimenting the behavior across browsers here is consistent (thankfully). These styles can be applied in addition to other styles to make only the top or bottom portions of an element rounded. For example imagine I have styles like this: .gridheader, .gridheaderbig, .gridheaderleft, .gridheaderright { padding: 4px 4px 4px 4px; background: #003399 url(images/vertgradient.png) repeat-x; text-align: center; font-weight: bold; text-decoration: none; color: khaki; } .gridheaderleft { text-align: left; } .gridheaderright { text-align: right; } .gridheaderbig { font-size: 135%; } If I just apply say gridheader by itself in HTML like this: <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="gridheaderleft">Box with a Header</div> <div class="boxcontenttext" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> This results in a pretty funky display – again due to the fact that the inner elements render square rather than rounded corners: If you look close again you can see that both the header and the main content have square edges which jumps out at the eye. To fix this you can now apply the roundbox-top and roundbox-bottom to the header and content respectively: <div class="roundbox boxshadow" style="width: 550px; border: solid 2px steelblue"> <div class="gridheaderleft roundbox-top">Box with a Header</div> <div class="boxcontenttext roundbox-bottom" style="background: khaki;"> Simple Rounded Corner Box. </div> </div> Which now gives the proper display with rounded corners both on the top and bottom: All of this is sweet to be supported – at least by the newest browser – without having to resort to images and nasty JavaScripts solutions. While this is still not a mainstream feature yet for the majority of actually installed browsers, the majority of browser users are very likely to have this support as most browsers other than IE are actively pushing users to upgrade to newer versions. Since this is a ‘visual display only feature it degrades reasonably well in non-supporting browsers: You get an uninteresting square and non-shadowed browser box, but the display is still overall functional. The main sticking point – as always is Internet Explorer versions 8.0 and down as well as older versions of other browsers. With those browsers you get a functional view that is a little less interesting to look at obviously: but at least it’s still functional. Maybe that’s just one more incentive for people using older browsers to upgrade to a  more modern browser :-) Creating Dialog Related Styles In a lot of my AJAX based applications I use pop up windows which effectively work like dialogs. Using the simple CSS behaviors above, it’s really easy to create some fairly nice looking overlaid windows with nothing but CSS. Here’s what a typical ‘dialog’ I use looks like: The beauty of this is that it’s plain CSS – no plug-ins or images (other than the gradients which are optional) required. Add jQuery-ui draggable (or ww.jquery.js as shown below) and you have a nice simple inline implementation of a dialog represented by a simple <div> tag. Here’s the HTML for this dialog: <div id="divDialog" class="dialog boxshadow" style="width: 450px;"> <div class="dialog-header"> <div class="closebox"></div> User Sign-in </div> <div class="dialog-content"> <label>Username:</label> <input type="text" name="txtUsername" value=" " /> <label>Password</label> <input type="text" name="txtPassword" value=" " /> <hr /> <input type="button" id="btnLogin" value="Login" /> </div> <div class="dialog-statusbar">Ready</div> </div> Most of this behavior is driven by the ‘dialog’ styles which are fairly basic and easy to understand. They do use a few support images for the gradients which are provided in the sample I’ve provided. Here’s what the CSS looks like: .dialog { background: White; overflow: hidden; border: solid 1px steelblue; -moz-border-radius: 6px 6px 4px 4px; -webkit-border-radius: 6px 6px 4px 4px; border-radius: 6px 6px 3px 3px; } .dialog-header { background-image: url(images/dialogheader.png); background-repeat: repeat-x; text-align: left; color: cornsilk; padding: 5px; padding-left: 10px; font-size: 1.02em; font-weight: bold; position: relative; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .dialog-top { -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .dialog-bottom { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .dialog-content { padding: 15px; } .dialog-statusbar, .dialog-toolbar { background: #eeeeee; background-image: url(images/dialogstrip.png); background-repeat: repeat-x; padding: 5px; padding-left: 10px; border-top: solid 1px silver; border-bottom: solid 1px silver; font-size: 0.8em; } .dialog-statusbar { -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; padding-right: 10px; } .closebox { position: absolute; right: 2px; top: 2px; background-image: url(images/close.gif); background-repeat: no-repeat; width: 14px; height: 14px; cursor: pointer; opacity: 0.60; filter: alpha(opacity="80"); } .closebox:hover { opacity: 1; filter: alpha(opacity="100"); } The main style is the dialog class which is the outer box. It has the rounded border that serves as the outline. Note that I didn’t add the box-shadow to this style because in some situations I just want the rounded box in an inline display that doesn’t have a shadow so it’s still applied separately. dialog-header, then has the rounded top corners and displays a typical dialog heading format. dialog-bottom and dialog-top then provide the same functionality as roundbox-top and roundbox-bottom described earlier but are provided mainly in the stylesheet for consistency to match the dialog’s round edges and making it easier to  remember and find in Intellisense as it shows up in the same dialog- group. dialog-statusbar and dialog-toolbar are two elements I use a lot for floating windows – the toolbar serves for buttons and options and filters typically, while the status bar provides information specific to the floating window. Since the the status bar is always on the bottom of the dialog it automatically handles the rounding of the bottom corners. Finally there’s  closebox style which is to be applied to an empty <div> tag in the header typically. What this does is render a close image that is by default low-lighted with a low opacity value, and then highlights when hovered over. All you’d have to do handle the close operation is handle the onclick of the <div>. Note that the <div> right aligns so typically you should specify it before any other content in the header. Speaking of closable – some time ago I created a closable jQuery plug-in that basically automates this process and can be applied against ANY element in a page, automatically removing or closing the element with some simple script code. Using this you can leave out the <div> tag for closable and just do the following: To make the above dialog closable (and draggable) which makes it effectively and overlay window, you’d add jQuery.js and ww.jquery.js to the page: <script type="text/javascript" src="../../scripts/jquery.min.js"></script> <script type="text/javascript" src="../../scripts/ww.jquery.min.js"></script> and then simply call: <script type="text/javascript"> $(document).ready(function () { $("#divDialog") .draggable({ handle: ".dialog-header" }) .closable({ handle: ".dialog-header", closeHandler: function () { alert("Window about to be closed."); return true; // true closes - false leaves open } }); }); </script> * ww.jquery.js emulates base features in jQuery-ui’s draggable. If jQuery-ui is loaded its draggable version will be used instead and voila you have now have a draggable and closable window – here in mid-drag:   The dragging and closable behaviors are of course optional, but it’s the final touch that provides dialog like window behavior. Relief for older Internet Explorer Versions with CSS Pie If you want to get these features to work with older versions of Internet Explorer all the way back to version 6 you can check out CSS Pie. CSS Pie provides an Internet Explorer behavior file that attaches to specific CSS rules and simulates these behavior using script code in IE (mostly by implementing filters). You can simply add the behavior to each CSS style that uses box-shadow and border-radius like this: .boxshadow {     -moz-box-shadow: 3px 3px 5px #535353;     -webkit-box-shadow: 3px 3px 5px #535353;           box-shadow: 3px 3px 5px #535353;     behavior: url(scripts/PIE.htc);           } .roundbox {      -moz-border-radius: 6px 6px 6px 6px;     -webkit-border-radius: 6px;      border-radius: 6px 6px 6px 6px;     behavior: url(scripts/PIE.htc); } CSS Pie requires the PIE.htc on your server and referenced from each CSS style that needs it. Note that the url() for IE behaviors is NOT CSS file relative as other CSS resources, but rather PAGE relative , so if you have more than one folder you probably need to reference the HTC file with a fixed path like this: behavior: url(/MyApp/scripts/PIE.htc); in the style. Small price to pay, but a royal pain if you have a common CSS file you use in many applications. Once the PIE.htc file has been copied and you have applied the behavior to each style that uses these new features Internet Explorer will render rounded corners and box shadows! Yay! Hurray for box-shadow and border-radius All of this functionality is very welcome natively in the browser. If you think this is all frivolous visual candy, you might be right :-), but if you take a look on the Web and search for rounded corner solutions that predate these CSS attributes you’ll find a boatload of stuff from image files, to custom drawn content to Javascript solutions that play tricks with a few images. It’s sooooo much easier to have this functionality built in and I for one am glad to see that’s it’s finally becoming standard in the box. Still remember that when you use these new CSS features, they are not universal, and are not going to be really soon. Legacy browsers, especially old versions of Internet Explorer that can’t be updated will continue to be around and won’t work with this shiny new stuff. I say screw ‘em: Let them get a decent recent browser or see a degraded and ugly UI. We have the luxury with this functionality in that it doesn’t typically affect usability – it just doesn’t look as nice. Resources Download the Sample The sample includes the styles and images and sample page as well as ww.jquery.js for the draggable/closable example. Online Sample Check out the sample described in this post online. Closable and Draggable Documentation Documentation for the closeable and draggable plug-ins in ww.jquery.js. You can also check out the full documentation for all the plug-ins contained in ww.jquery.js here. © Rick Strahl, West Wind Technologies, 2005-2011Posted in HTML  CSS  

    Read the article

  • Skinny controller in ASP.NET MVC 4

    - by thangchung
    Rails community are always inspire a lot of best ideas. I really love this community by the time. One of these is "Fat models and skinny controllers". I have spent a lot of time on ASP.NET MVC, and really I did some miss-takes, because I made the controller so fat. That make controller is really dirty and very hard to maintain in the future. It is violate seriously SRP principle and KISS as well. But how can we achieve that in ASP.NET MVC? That question is really clear after I read "Manning ASP.NET MVC 4 in Action". It is simple that we can separate it into ActionResult, and try to implementing logic and persistence data inside this. In last 2 years, I have read this from Jimmy Bogard blog, but in that time I never had a consideration about it. That's enough for talking now. I just published a sample on ASP.NET MVC 4, implemented on Visual Studio 2012 RC at here. I used EF framework at here for implementing persistence layer, and also use 2 free templates from internet to make the UI for this sample. In this sample, I try to implementing the simple magazine website that managing all articles, categories and news. It is not finished at all in this time, but no problems, because I just show you about how can we make the controller skinny. And I wanna hear more about your ideas. The first thing, I am abstract the base ActionResult class like this:    public abstract class MyActionResult : ActionResult, IEnsureNotNull     {         public abstract void EnsureAllInjectInstanceNotNull();     }     public abstract class ActionResultBase<TController> : MyActionResult where TController : Controller     {         protected readonly Expression<Func<TController, ActionResult>> ViewNameExpression;         protected readonly IExConfigurationManager ConfigurationManager;         protected ActionResultBase (Expression<Func<TController, ActionResult>> expr)             : this(DependencyResolver.Current.GetService<IExConfigurationManager>(), expr)         {         }         protected ActionResultBase(             IExConfigurationManager configurationManager,             Expression<Func<TController, ActionResult>> expr)         {             Guard.ArgumentNotNull(expr, "ViewNameExpression");             Guard.ArgumentNotNull(configurationManager, "ConfigurationManager");             ViewNameExpression = expr;             ConfigurationManager = configurationManager;         }         protected ViewResult GetViewResult<TViewModel>(TViewModel viewModel)         {             var m = (MethodCallExpression)ViewNameExpression.Body;             if (m.Method.ReturnType != typeof(ActionResult))             {                 throw new ArgumentException("ControllerAction method '" + m.Method.Name + "' does not return type ActionResult");             }             var result = new ViewResult             {                 ViewName = m.Method.Name             };             result.ViewData.Model = viewModel;             return result;         }         public override void ExecuteResult(ControllerContext context)         {             EnsureAllInjectInstanceNotNull();         }     } I also have an interface for validation all inject objects. This interface make sure all inject objects that I inject using Autofac container are not null. The implementation of this as below public interface IEnsureNotNull     {         void EnsureAllInjectInstanceNotNull();     } Afterwards, I am just simple implementing the HomePageViewModelActionResult class like this public class HomePageViewModelActionResult<TController> : ActionResultBase<TController> where TController : Controller     {         #region variables & ctors         private readonly ICategoryRepository _categoryRepository;         private readonly IItemRepository _itemRepository;         private readonly int _numOfPage;         public HomePageViewModelActionResult(Expression<Func<TController, ActionResult>> viewNameExpression)             : this(viewNameExpression,                    DependencyResolver.Current.GetService<ICategoryRepository>(),                    DependencyResolver.Current.GetService<IItemRepository>())         {         }         public HomePageViewModelActionResult(             Expression<Func<TController, ActionResult>> viewNameExpression,             ICategoryRepository categoryRepository,             IItemRepository itemRepository)             : base(viewNameExpression)         {             _categoryRepository = categoryRepository;             _itemRepository = itemRepository;             _numOfPage = ConfigurationManager.GetAppConfigBy("NumOfPage").ToInteger();         }         #endregion         #region implementation         public override void ExecuteResult(ControllerContext context)         {             base.ExecuteResult(context);             var cats = _categoryRepository.GetCategories();             var mainViewModel = new HomePageViewModel();             var headerViewModel = new HeaderViewModel();             var footerViewModel = new FooterViewModel();             var mainPageViewModel = new MainPageViewModel();             headerViewModel.SiteTitle = "Magazine Website";             if (cats != null && cats.Any())             {                 headerViewModel.Categories = cats.ToList();                 footerViewModel.Categories = cats.ToList();             }             mainPageViewModel.LeftColumn = BindingDataForMainPageLeftColumnViewModel();             mainPageViewModel.RightColumn = BindingDataForMainPageRightColumnViewModel();             mainViewModel.Header = headerViewModel;             mainViewModel.DashBoard = new DashboardViewModel();             mainViewModel.Footer = footerViewModel;             mainViewModel.MainPage = mainPageViewModel;             GetViewResult(mainViewModel).ExecuteResult(context);         }         public override void EnsureAllInjectInstanceNotNull()         {             Guard.ArgumentNotNull(_categoryRepository, "CategoryRepository");             Guard.ArgumentNotNull(_itemRepository, "ItemRepository");             Guard.ArgumentMustMoreThanZero(_numOfPage, "NumOfPage");         }         #endregion         #region private functions         private MainPageRightColumnViewModel BindingDataForMainPageRightColumnViewModel()         {             var mainPageRightCol = new MainPageRightColumnViewModel();             mainPageRightCol.LatestNews = _itemRepository.GetNewestItem(_numOfPage).ToList();             mainPageRightCol.MostViews = _itemRepository.GetMostViews(_numOfPage).ToList();             return mainPageRightCol;         }         private MainPageLeftColumnViewModel BindingDataForMainPageLeftColumnViewModel()         {             var mainPageLeftCol = new MainPageLeftColumnViewModel();             var items = _itemRepository.GetNewestItem(_numOfPage);             if (items != null && items.Any())             {                 var firstItem = items.First();                 if (firstItem == null)                     throw new NoNullAllowedException("First Item".ToNotNullErrorMessage());                 if (firstItem.ItemContent == null)                     throw new NoNullAllowedException("First ItemContent".ToNotNullErrorMessage());                 mainPageLeftCol.FirstItem = firstItem;                 if (items.Count() > 1)                 {                     mainPageLeftCol.RemainItems = items.Where(x => x.ItemContent != null && x.Id != mainPageLeftCol.FirstItem.Id).ToList();                 }             }             return mainPageLeftCol;         }         #endregion     }  Final step, I get into HomeController and add some line of codes like this [Authorize]     public class HomeController : BaseController     {         [AllowAnonymous]         public ActionResult Index()         {             return new HomePageViewModelActionResult<HomeController>(x=>x.Index());         }         [AllowAnonymous]         public ActionResult Details(int id)         {             return new DetailsViewModelActionResult<HomeController>(x => x.Details(id), id);         }         [AllowAnonymous]         public ActionResult Category(int id)         {             return new CategoryViewModelActionResult<HomeController>(x => x.Category(id), id);         }     } As you see, the code in controller is really skinny, and all the logic I move to the custom ActionResult class. Some people said, it just move the code out of controller and put it to another class, so it is still hard to maintain. Look like it just move the complicate codes from one place to another place. But if you have a look and think it in details, you have to find out if you have code for processing all logic that related to HttpContext or something like this. You can do it on Controller, and try to delegating another logic  (such as processing business requirement, persistence data,...) to custom ActionResult class. Tell me more your thinking, I am really willing to hear all of its from you guys. All source codes can be find out at here. Tweet !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="http://weblogs.asp.net//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    Read the article

  • Contact Form ASP.net

    - by kwek-kwek
    This is my first time creating a from in ASP.NET I am following a tutorial here It is easy to follow but I get this error. But, if I take out this code : <%@ Page Language="C#" AutoEventWireup="true" CodeFile="contact-form.aspx.cs" Inherits="_Emailer" %> it works like a charm. What am I doing wrong? Here is my code full HTML: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="contact-form.aspx.cs" Inherits="_Emailer" %> <!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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1 " /> <title>&Eacute;cole Marc Favreau</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body id="benevolat"> <asp:label id="lblOutcome" runat="server" /> <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td>Nom du Parent</td> <td><label> <input type="text" name="c_Name" id="c_Name" /> </label></td> </tr> <tr> <td>Nom de votre enfant</td> <td><input type="text" name="c_Enfant" id="c_Enfant" /></td> </tr> <tr> <td>Groupe</td> <td><input type="text" name="c_Groupe" id="c_Groupe" /></td> </tr> <tr> <td>Num&eacute;ro de t&eacute;l&eacute;phone</td> <td><input type="text" name="c_Tel" id="c_Tel" /></td> </tr> <tr> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan="2"><strong>J'aimerais &ecirc;tre bénévole pour:</strong></td> </tr> <tr> <td colspan="2"><table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="5%"><label> <input type="checkbox" name="La biblioth&egrave;que " id="La biblioth&egrave;que " /> </label></td> <td colspan="2">La biblioth&egrave;que </td> </tr> <tr> <td><input type="checkbox" name="Aide en classe " id="Aide en classe " /></td> <td colspan="2">Aide en classe </td> </tr> <tr> <td><input type="checkbox" name="Aide pour les dîners pizza  " id="Aide pour les dîners pizza  " /></td> <td colspan="2">Aide pour les d&icirc;ners pizza&nbsp; </td> </tr> <tr> <td><input type="checkbox" name="Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole" id="Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole" /></td> <td colspan="2">Aide aux devoirs apr&egrave;s l&rsquo;&eacute;cole </td> </tr> <tr> <td><input type="checkbox" name="Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;)" id="Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;)" /></td> <td colspan="2">Am&eacute;nagement paysager (fleurs, arbustes &agrave; tailler&hellip;) </td> </tr> <tr> <td><input type="checkbox" name="Photo scolaire" id="Photo scolaire" /></td> <td colspan="2">Photo scolaire </td> </tr> <tr> <td><input type="checkbox" name="Accompagner les &eacute;l&egrave;ves lors des sorties" id="Accompagner les &eacute;l&egrave;ves lors des sorties" /></td> <td colspan="2">Accompagner les &eacute;l&egrave;ves lors des sorties </td> </tr> <tr> <td><input type="checkbox" name="Venir parler de votre m&eacute;tier dans une classe ou monter un atelier" id="Venir parler de votre m&eacute;tier dans une classe ou monter un atelier" /></td> <td colspan="2">Venir parler de votre m&eacute;tier dans une classe ou monter un atelier </td> </tr> <tr> <td><input type="checkbox" name="Autres" id="Autres" /></td> <td>Autres</td> <td><label> <input type="text" name="c_Autre" id="c_Autre" /> </label></td> </tr> </table></td> </tr> <tr> <td colspan="2"><label> <input type="submit" name="button" id="button" value="Soumettre" /> <input type="submit" name="button2" id="button2" value="Effacer" /> </label></td> </tr> </table> </form> </div> </div> </div> <!-- #include file="footer.aspx"--> </div> </body> </html>

    Read the article

  • CSS drop-down menus pushing page content down

    - by Mason Jones
    This is probably (hopefully) a pretty simple question, but I can't seem to get it to work so I'll turn to the experts here. I'm using a pretty straightforward CSS drop-down menu, with just a little JQuery involved. The issue is that when I hover over the drop-down and it opens, it's pushing everything on the page down below it rather then opening over it. I've tried messing with the z-index but that doesn't seem to be the issue. Any tips would be fantastic, thanks in advance. Here's the HTML; sorry it's not super-pretty, I had to rip out a bunch of stuff to make it simple and generic. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML style="zoom: 100%; "> <HEAD> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> </HEAD> <BODY class="bodyclass" style="background:#BCE2F1; height: 100%;"> <DIV id="maincontainer" style="min-height: 100%;"> <STYLE type="text/css"> #cssdropdown, #cssdropdown ul { font-size: 9pt; background-color: black; list-style: none; } #cssdropdown, #cssdropdown * { padding: 0; margin: 0; } #cssdropdown li.headlink { width: 140px; float: left; margin-left: -1px; border: 1px black solid; background-color: white; text-align: center; } #cssdropdown li.headlink a { display: block; color: #339804; padding: 3px; text-decoration: none; } #cssdropdown li.headlink a:hover { background-color: #F8E0AC; font-weight: bold; } #cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: left; } #cssdropdown li.headlink:hover ul { display: block; text-decoration: none; } #cssdropdown li.headlink ul li a { padding: 5px; height: 15px; } #cssdropdown li.headlink ul li a:hover { background-color: #CCE9F5; text-decoration: none; font-weight: normal; } /* #cssdropdown a { color: #CCE9F5; } */ #cssdropdown ul li a:hover { text-decoration: none; } #cssdropdown li.headlink { background-color: white; } #cssdropdown li.headlink ul { background-color: white; background-position: bottom; padding-bottom: 2px; } </STYLE> <SCRIPT language="JavaScript"> $(document).ready(function(){ $('#cssdropdown li.headlink').hover( function() { $('ul', this).css('display', 'block'); }, function() { $('ul', this).css('display', 'none'); }); }); </SCRIPT> <DIV class="navigation_box" style="border: none;"> <DIV class="innercontent"> <DIV style="background: white; float: left; padding: 5px; border: solid 1px black;"> LOGO </DIV> <DIV class="navmenu" style="float: right; bottom: 0; font-size: 9pt; text-align: right;"> <SPAN>Logged in as [email protected]</SPAN><BR> <UL id="cssdropdown"> <LI class="headlink"> <A href="http://localhost:3000/one">One</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/one">Option One</A></LI> <LI><A href="http://localhost:3000/one">Option Two</A></LI> <LI><A href="http://localhost:3000/one">Option Three</A></LI> <LI><A href="http://localhost:3000/one">Option Four</A></LI> </UL> </LI> <LI class="headlink"> <A href="http://localhost:3000/two">Two</A> <UL style="display: none; "> <LI><A href="http://localhost:3000/two">Option Two-One</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Two</A></LI> <LI><A href="http://localhost:3000/two">Option Two-Three</A></LI> </UL> </LI> <LI class="headlink" style="width: 80px;"> <A href="http://localhost:3000/three">Three</A> </LI> <LI class="headlink" style="width: 300px; padding-top: 2px; height: 19px;"> <FORM action="http://localhost:3000/search" method="post"> <P> Search: <INPUT id="searchwords" name="searchwords" size="20" type="text" value=""> <INPUT name="commit" type="submit" value="Find"> </P> </FORM> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/four">Four</A> </LI> <LI class="headlink" style="width: 60px;"> <A href="http://localhost:3000/logout">Logout</A> </LI> </UL> </DIV> </DIV> </DIV> <DIV id="contentwrapper" style="clear:both"> <DIV class="innercontent" style="margin: 0px 20px 20px 20px;"> <H1>Some test content here to fill things out a little bit.</H1> </DIV> </DIV> </DIV> <DIV id="footer" style="clear: both; float: bottom;"> <DIV class="innercontent" style="font-size: 10px;"> Copyright 2008-2010 </DIV> </DIV> </BODY>

    Read the article

  • Flex Canvas child Randomly resizes

    - by BS_C3
    Hi! I have an application with a viewstack that contains all the components that need to be displayed. The navigation is defined in the main application. All the components are based on canvas. The main application looks like that: <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:components="components.*"> <mx:VBox width="1024" height="100%" horizontalCenter="0" verticalGap="0" backgroundColor="#FFFFFF"> <mx:Image id="header" verticalAlign="top" /> <mx:ViewStack id="body" horizontalCenter="0" verticalCenter="0" width="100%" height="100%"> <components:HomePage id="hp" width="100%"/> <components:CollectionSelection id="cs" width="100%"/> <components:SearchEngine id="se" width="100%"/> <components:SearchResult id="sr" width="100%"/> <components:Tray id="tr" width="100%"/> <components:Order id="or" width="100%"/> </mx:ViewStack> <mx:Image id="footer" verticalAlign="bottom" maintainAspectRatio="false" width="100%"/> </mx:VBox> </mx:Application> I'm getting a strange behaviour from the TRAY component. Here's the code for component Tray (I've only left the display info): <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Image id="bg" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" maintainAspectRatio="false"/> <mx:HBox width="100%"> <mx:Button x="20" y="20" label="BACK"/> <mx:Spacer width="100%"/> <mx:LinkBar itemClick="linkbar_itemClick(event)" styleName="GLBLinkBTN" separatorColor="#FFFFFF" separatorWidth="1" > <mx:dataProvider> <mx:Object label="CLEAR"/> <mx:Object label="LOGOUT"/> </mx:dataProvider> </mx:LinkBar> </mx:HBox> <mx:VBox id="mainBox" horizontalCenter="0" verticalCenter="0" verticalGap="0"> <mx:HBox width="100%" height="50" backgroundColor="#60524D" verticalAlign="bottom" paddingBottom="5"> <mx:Label styleName="TRTitle" paddingLeft="15"/> <mx:Spacer width="100%"/> <mx:Label styleName="TRItems" paddingRight="15"/> </mx:HBox> <mx:HorizontalList id="hlist" dataProvider="{TrayData.instance.itemsCollection}" columnCount="{TrayData.instance.hlistColumns}" rowCount="1" itemRenderer="components.TrayItem" horizontalScrollPolicy="off" rollOverColor="#FFFFFF" selectionColor="#FFFFFF" horizontalCenter="0" verticalCenter="0" borderStyle="none" horizontalScrollPosition="{TrayData.instance.hsPosition}" /> <mx:HBox width="100%" backgroundColor="#E7DDDB" height="40" verticalAlign="middle" paddingLeft="20" paddingRight="20"> <mx:Box width="25" verticalAlign="middle" horizontalAlign="left"> <mx:Button id="leftBtn" /> </mx:Box> <mx:Spacer width="100%"/> <mx:Box width="25" verticalAlign="middle" horizontalAlign="right"> <mx:Button id="rightBtn" /> </mx:Box> </mx:HBox> </mx:VBox> </mx:Canvas> All the components are displaying properly. However, sometimes, randomly, the vbox "mainBox" in the tray component is not displaying as it should: the horizontallist shrinks and instead of fully displaying its items, I get horizontal and vertical scrollbars for each item... I'm currently trying to reproduce this behaviour (to get a print screen) but right know, it's working fine... -_-' As soon as I get it work as it shouldn't, I'll upload an image. Here's the code for the itemRenderer (just in case...): <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:HBox width="100%" paddingTop="0" paddingBottom="0" paddingRight="3"> <mx:Spacer width="100%"/> <mx:Box width="14" height="14" verticalAlign="middle" horizontalAlign="center"> <mx:Button width="8" height="8"/> </mx:Box> </mx:HBox> <mx:VBox paddingLeft="20" paddingRight="20" verticalGap="15" paddingBottom="15"> <mx:Canvas id="thumbnail"> <mx:Image id="thumbnailBG" /> <mx:Image id="thumbnailIM" /> </mx:Canvas > <mx:VBox width="100%" verticalGap="7"> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label paddingBottom="5"/> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74"opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> <mx:HBox width="100%" height="13"> <mx:Label width="74" opaqueBackground="#ECE5E2"/> <mx:Label /> </mx:HBox> </mx:VBox> <mx:Button /> </mx:VBox> </mx:VBox> Your help would really be appreciated. Regards, BS_C3

    Read the article

  • jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    - by Brendan Vogt
    I am using ASP.NET MVC3 with the jQuery Datatable plug in. I am having an issues with my CSS layout when the datatable is on a page. If there is no datatable then everything displays fine. When the datatable is on the screen then it overlaps the footer of my website. I can't seem to get this to display correctly. I have a grid layout using the YUI3, and this is what I all use from YUI3 (in this order): cssreset-min cssfonts-min cssgrids-min cssbase-min This works fine in the latest version of FireFox. I am only testing on IE8, this is a requirement and most of the people at my work uses IE8. I have minified my HTML so that only the bare minimum is available. This is my HTML: <!DOCTYPE html> <html> <head> <title>My Website</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <link href="/Assets/Stylesheets/hef2.css" rel="stylesheet" /> <link href="/Assets/Stylesheets/jQuery-DataTables/css/jquery.dataTables.css" rel="stylesheet" /> </head> <body> <div id="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> <div id="bd"> <div class="yui3-g"> <div class="yui3-u" id="nav"> <div id="nav-container"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> </div> </div> <div class="yui3-u" id="main"> <div id="main-container"> <div class="content"> <h1>Banks Dashboard</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <div id="banks-datatable-wrapper"> <div id="banks-datatable-container"></div> <div style="clear:both;"></div> </div> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</p> </div> </div> </div> </div> </div> <div id="ft">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.</div> <script src="/Assets/JavaScripts/jQuery/jquery-1.7.2.min.js"></script> <script src="/Assets/JavaScripts/jQuery-DataTables/jquery.dataTables.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#banks-datatable-container').html('<table class="display" id="banks-datatable"></table>'); $('#banks-datatable').dataTable({ "aoColumns": [ { "sTitle": "Engine" }, { "sTitle": "Browser" }, { "sTitle": "Platform" }, { "sTitle": "Version", "sClass": "center" }, { "sTitle": "Grade" } ], "bAutoWidth": false, "bFilter": false, "bLengthChange": false, "bProcessing": true, //"bServerSide": true, "bSort": false, "iDisplayLength": 11, "sAjaxSource": '/Administration/Bank/List2' }); }); </script> </body> </html> This is the only CSS that I currently use together with the CSS of YUI3: body { margin: auto; width: 1025px; } #nav { width: 300px; } #main { width: 725px; } Can someone please help me get this sorted out? I have tried tried adding clear:both but it didn't work. Is the an online service like jsbin where I can paste/upload my HTML/CSS code/files? Code can viewed at: http://live.datatables.net/efosuj/3/edit. It displays correctly in the available viewer but when run separate in IE8 then it gives issues. UPDATE 2012-06-12 I managed to add the following and it works, but I would like to add it in a style, tried it but it didn't work: if (navigator.userAgent.toString().indexOf('MSIE') >= 0) { jQuery('#main-container').css('overflow', 'auto'); } This was added after the grid was loaded. Is this the only way to do this?

    Read the article

  • Implementation of Nib project to Storyboard, Xcode

    - by Blake Loizides
    I have made a tabbed bar application in storyboard in xcode. I,m new to xcode. I got a Sample TableView XIB project from apple that I edited to my needs,The project has a UITableView that I Customized with Images, And with help of a certain forum member I was able to link up each image to a New View Controller. I tried to port or integrate My Nib Project Code to my StoryBoard Tabbed Bar Application.I thought I had everything right had to comment out a few things to get no errors, But the project only goes to a Blank Table View. Below are 2 links, 1 to my StoryBoard Tabbed Bar Application with the Table Code that I tried to integrate and the other My Successful Nib Project. Also is some code and pictures. If anybody has some free time and does not mind to help I would be extremely grateful for any input given. link1 - Storyboard link2 - XIB DecorsViewController_iPhone.m // // TableViewsViewController.m // TableViews // // Created by Axit Patel on 9/2/10. // Copyright Bayside High School 2010. All rights reserved. // #import "DecorsViewController_iPhone.h" #import "SelectedCellViewController.h" @implementation DecorsViewController_iPhone #pragma mark - Synthesizers @synthesize sitesArray; @synthesize imagesArray; #pragma mark - View lifecycle // Implement viewDidLoad to do additional setup after loading the view, typically from a nib. - (void)viewDidLoad { // Load up the sitesArray with a dummy array : sites NSArray *sites = [[NSArray alloc] initWithObjects:@"a", @"b", @"c", @"d", @"e", @"f", @"g", @"h", nil]; self.sitesArray = sites; //[sites release]; UIImage *PlumTree = [UIImage imageNamed:@"a.png"]; UIImage *CherryRoyale = [UIImage imageNamed:@"b.png"]; UIImage *MozambiqueWenge = [UIImage imageNamed:@"c.png"]; UIImage *RoyaleMahogany = [UIImage imageNamed:@"d.png"]; UIImage *Laricina = [UIImage imageNamed:@"e.png"]; UIImage *BurntOak = [UIImage imageNamed:@"f.png"]; UIImage *AutrianOak = [UIImage imageNamed:@"g.png"]; UIImage *SilverAcacia = [UIImage imageNamed:@"h.png"]; NSArray *images = [[NSArray alloc] initWithObjects: PlumTree, CherryRoyale, MozambiqueWenge, RoyaleMahogany, Laricina, BurntOak, AutrianOak, SilverAcacia, nil]; self.imagesArray = images; //[images release]; [super viewDidLoad]; } #pragma mark - Table View datasource methods // Required Methods // Return the number of rows in a section - (NSInteger)tableView:(UITableView *)table numberOfRowsInSection:(NSInteger)section { return [sitesArray count]; } // Returns cell to render for each row - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *CellIdentifier = @"CellIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; // Configure cell NSUInteger row = [indexPath row]; // Sets the text for the cell //cell.textLabel.text = [sitesArray objectAtIndex:row]; // Sets the imageview for the cell cell.imageView.image = [imagesArray objectAtIndex:row]; // Sets the accessory for the cell cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; // Sets the detailtext for the cell (subtitle) //cell.detailTextLabel.text = [NSString stringWithFormat:@"This is row: %i", row + 1]; return cell; } // Optional // Returns the number of section in a table view -(NSInteger) numberOfSectionsInTableView:(UITableView *)tableView { return 1; } #pragma mark - #pragma mark Table View delegate methods // Return the height for each cell -(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 78; } // Sets the title for header in the tableview -(NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section { return @"Decors"; } // Sets the title for footer -(NSString *) tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section { return @"Decors"; } // Sets the indentation for rows -(NSInteger) tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { return 0; } // Method that gets called from the "Done" button (From the @selector in the line - [viewControllerToShow.navigationItem setRightBarButtonItem:[[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(dismissView)] autorelease]];) - (void)dismissView { [self dismissViewControllerAnimated:YES completion:NULL]; } // This method is run when the user taps the row in the tableview - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { [tableView deselectRowAtIndexPath:indexPath animated:YES]; SelectedCellViewController *viewControllerToShow = [[SelectedCellViewController alloc] initWithNibName:@"SelectedCellViewController" bundle:[NSBundle mainBundle]]; [viewControllerToShow setLabelText:[NSString stringWithFormat:@"You selected cell: %d - %@", indexPath.row, [sitesArray objectAtIndex:indexPath.row]]]; [viewControllerToShow setImage:(UIImage *)[imagesArray objectAtIndex:indexPath.row]]; [viewControllerToShow setModalPresentationStyle:UIModalPresentationFormSheet]; [viewControllerToShow setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal]; [viewControllerToShow.navigationItem setRightBarButtonItem:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(dismissView)]]; UINavigationController *navController = [[UINavigationController alloc] initWithRootViewController:viewControllerToShow]; viewControllerToShow = nil; [self presentViewController:navController animated:YES completion:NULL]; navController = nil; // UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Tapped row!" // message:[NSString stringWithFormat:@"You tapped: %@", [sitesArray objectAtIndex:indexPath.row]] // delegate:nil // cancelButtonTitle:@"Yes, I did!" // otherButtonTitles:nil]; // [alert show]; // [alert release]; } #pragma mark - Memory management - (void)didReceiveMemoryWarning { NSLog(@"Memory Warning!"); [super didReceiveMemoryWarning]; } - (void)viewDidUnload { self.sitesArray = nil; self.imagesArray = nil; [super viewDidUnload]; } //- (void)dealloc { //[sitesArray release]; //[imagesArray release]; // [super dealloc]; //} //@end //- (void)viewDidUnload //{ // [super viewDidUnload]; // Release any retained subviews of the main view. //} - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) { return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown); } else { return YES; } } @end DecorsViewController_iPhone.h #import <UIKit/UIKit.h> @interface DecorsViewController_iPhone : UIViewController <UITableViewDelegate, UITableViewDataSource> { NSArray *sitesArray; NSArray *imagesArray; } @property (nonatomic, retain) NSArray *sitesArray; @property (nonatomic, retain) NSArray *imagesArray; @end SelectedCellViewController.m #import "SelectedCellViewController.h" @implementation SelectedCellViewController @synthesize labelText; @synthesize image; - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil { if ((self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) { } return self; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } #pragma mark - View lifecycle - (void)viewDidLoad { [super viewDidLoad]; [label setText:self.labelText]; [imageView setImage:self.image]; } - (void)viewDidUnload { self.labelText = nil; self.image = nil; // [label release]; // [imageView release]; [super viewDidUnload]; } - (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation { return (interfaceOrientation == UIInterfaceOrientationPortrait); } @end SelectedCellViewController.h @interface SelectedCellViewController : UIViewController { NSString *labelText; UIImage *image; IBOutlet UILabel *label; IBOutlet UIImageView *imageView; } @property (nonatomic, copy) NSString *labelText; @property (nonatomic, retain) UIImage *image; @end

    Read the article

  • Using javascript to limit survey choices to three unique values

    - by leanne
    I'm required to use a limited survey application, and have to adapt the provided code to meet more advanced functionality. I need to create a weighted ranking question, so users can select their top three choices and the data will go into the survey application and be accessible in the survey reports. The application only supports 2 types of questions (text fill & multiple choice) but I can alter the code, as long as it still sends the form data back to the survey application. The code is set up so it will show a drop-down menu of 0-3 for each option. Now I want to limit the user's choices so they can only select one "1" "2" or "3", three choices total. Ideally, if the user already had "2" selected for one option and they tried to select it for another option, it would set the first "2" as "0" or blank. Is this possible to do with javascript? If so, does anyone know of a site that might show code like this, or provide similar enough examples that I could adapt it? Current code here: <html> <head><title>Survey</title></head> <!-- Changes - remove br to put dropdown next to text for each item. Switch text & dropdown order for each item. - add comments to separate each question - removed blue title font - add instructions Goals - limit choices to one 1 one 2 and one 3, three choices total. --> <link href="---" rel="stylesheet" type="text/css"> <body bgcolor="#3c76a3"> <!-- TRANSITIONAL DIALOG BOX --> <table border="0" align="center" cellpadding="0" cellspacing="0" style="background-attachment: scroll; background-color: #3c76a3; background-repeat: no-repeat; background-position: left top;" bgcolor="#3c76a3" topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%"> <tr> <td> <table border="0" align="center" cellpadding="0" cellspacing="0" id="survey"> <tr> <td><p>&nbsp;</p> <!-- HEADER END --> <!-- FORM START TAG --><form name="survey" action="---" method="POST"> <FONT face="Verdana, Arial, Helvetica, sans-serif"> <b>survey</b><hr> <!-- 1 --> <input type=hidden name="Buy R.J. a DeLorean_multiple_answers" value="one"> <font size=2><select name="Buy R.J. a DeLorean" SIZE=1> <option value=""> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 </select></font> <input type="hidden" name="Buy R.J. a DeLorean_help" value=""> <b><font size=2>Buy R.J. a DeLorean</font></b> <hr size=1> <!-- 2 --> <input type=hidden name="Fill Lisa's office with marshmallows._multiple_answers" value="one"> <font size=2><select name="Fill Lisa's office with marshmallows." SIZE=1> <option value=""> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 </select></font> <input type="hidden" name="Fill Lisa's office with marshmallows._help" value=""> <b><font size=2>Fill Lisa's office with marshmallows.</font></b> <hr size=1> <!-- 3 --> <input type=hidden name="Install a beer fridge in everyone's filing cabinets._multiple_answers" value="one"> <font size=2><select name="Install a beer fridge in everyone's filing cabinets." SIZE=1> <option value=""> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 </select></font> <input type="hidden" name="Install a beer fridge in everyone's filing cabinets._help" value=""> <b><font size=2>Install a beer fridge in everyone's filing cabinets.</font></b> <hr size=1> <!-- 4 --> <input type=hidden name="Buy a company Cessna_multiple_answers" value="one"> <font size=2><select name="Buy a company Cessna" SIZE=1> <option value=""> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 </select></font> <input type="hidden" name="Buy a company Cessna_help" value=""> <b><font size=2>Buy a company Cessna</font></b><br> <hr size=1> <!-- 5 --> <input type=hidden name="Replace Conf2's chairs with miniature ponies._multiple_answers" value="one"> <font size=2><select name="Replace Conf2's chairs with miniature ponies." SIZE=1> <option value=""> <option value="0">0 <option value="1">1 <option value="2">2 <option value="3">3 </select></font> <input type="hidden" name="Replace Conf2's chairs with miniature ponies._help" value=""> <b><font size=2>Replace Conf2's chairs with miniature ponies.</font></b> <hr size=1> <input type="hidden" name="question_names" value="{Buy R.J. a DeLorean} {Fill Lisa's office with marshmallows.} {Install a beer fridge in everyone's filing cabinets.} {Buy a company Cessna} {Replace Conf2's chairs with miniature ponies.}"> <p align="right"><input type="image" BORDER=0 title="Save Changes" alt="Save Changes" src="---" name="button_save_changes"> <input type="hidden" name="showconfirm" value="T"> <input type="hidden" name="showresults" value="F"> <input type="hidden" name="preventdupesmemberid" value="T"> <input type="hidden" name="preventdupesip" value="F"> <input type="hidden" name="numberquestions" value="F"> <input type="hidden" name="destinationurl" value=""> <input type="hidden" name="original_survey_id" value="62"> <!-- FORM END TAG --></form> <!-- FOOTER START --> </td> </tr> </table> </td> </tr> </table> <!-- END HEADER --> </body> </html>

    Read the article

  • error echo id when i want to echo id for edit

    - by Prasanta Baidya
    I have a entry and edit page of a branch, I want echo id, when I mouse over into edit link in edit button, its show error,: branchedit.php?id=Note:Undefined index:id in line 101, but it work properly in localhost. error picture page link : https://www.dropbox.com/s/i1vu62lz3pezia0/id%20error.JPG My code: <?php include 'include/config.php'; include 'include/opendb.php'; include 'loginheader.php'; ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Branch</title> <!--Requered Validation --> <link rel="stylesheet" type="text/css" media="screen" href="jqueryvalidation/demo/css/screen.css" /> <script src="jqueryvalidation/jquery.js" type="text/javascript"></script> <script src="jqueryvalidation/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("#commentForm").validate(); }); </script> <!--End Requered Validation --> <style type="text/css"> <!-- body { background-color: #cccccc; } --> </style> <style type="text/css"> <!-- --> </style> <link href="css/usercss.css" rel="stylesheet" type="text/css" /> <style type="text/css"> <!-- .style7 { color: #000000; font-weight: bold; } .style8 {color: #FFFFFF} --> </style> </head> <body> <div id="container"> <table width="453" border="0" align="left" cellpadding="0" cellspacing="1"> <tr> <td width="451"><form name="cmxform" id="commentForm" method="post" action="insert_ac.php"> <table width="100%" border="0" cellspacing="1" cellpadding="3"> <tr> <td colspan="3" class="style2">Insert Branch into Database </td> </tr> <tr> <td width="100" height="46">Branch Code</td> <td width="18">:</td> <td width="309"><input name="branch_code" type="text" id="branch_code" minlength="3" class="required"></td> </tr> <tr> <td height="51">Branch Name</td> <td>:</td> <td><input name="branch_name" type="text" id="branch_name" class="required" ></td> </tr> <tr> <td height="47" colspan="3" align="center"> <div align="right"> <input name="Submit" type="submit" class="submit_button" value="Submit" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div></td> </tr> </table> </form></td> </tr> </table> <!--Branch List --> <?php $sql="SELECT * FROM dc_master"; $result=mysql_query($sql); ?> <table width="436" border="1" cellpadding="2" cellspacing="0" class="table" id="list"> <tr> <td colspan="4"><div align="center" class="style7">List of Branches </div></td> </tr> <tr class="style4" > <td width="87" align="center"><span class="style8">Branch Code</span></td> <td width="176" align="center" ><span class="style8">Branch Name</span></td> <td width="70" align="center" ><span class="style8">Edit</span></td> <td width="77" align="center" ><span class="style8">Delete</span></td> </tr> <?php while($rows=mysql_fetch_array($result)){ ?> <tr> <td height="28"><div align="center" class="style3"><?php echo $rows['branch_code']; ?></div></td> <td class="style3">&nbsp;&nbsp;&nbsp;<?php echo $rows['dc_name']; ?></td> <!--link to update.php and send value of id --> <td align="center"><a href="branchedit.php?id=<?php echo $rows['id']; ?>" class="style3 style5 style5">Edit</a></td> <td align="center"><a href="delete.php?id=<?php echo $rows['id']; ?>" class="style3 style5 style5" onclick="return confirm('Are you sure, you want to delete? (After delete you can not undo or get it again) <?php ?>')">Delete</a></td> </tr> <?php } ?> </table> <span class="footer">Programmer : Prasanta Baidya / Mobile : 09830980840 / Email id : [email protected]</span></div> <?php mysql_close(); ?> </body> </html>

    Read the article

  • php form validation with javascript

    - by Jon Hanson
    hi guys i need help trying to figure out why the alert box doesnt show up when i run this. im also new at programming. html i due just fine. im currently taking a php class, and the teacher thought it would be fun to have us create a form and validate it. my problem is i am trying to call the function which then would validate it. My problem is its not calling it, and i cant quite figure out why. please help? jons viladating <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <link rel="stylesheet" href="decor.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jons viladating</title> <script type="text/javascript"> <!-- <![CDATA[ function showjonsForm() { var errors = ""; // check for any empty strings if (document.forms[0].fname.value == "") errors += "fname\n"; if (document.forms[0].lname.value == "") errors += "lName\n"; if (document.forms[0].addrs1.value == "") errors += "Address\n"; if (document.forms[0].city.value == "") errors += "City\n"; if (document.forms[0].state.value == "") errors += "State\n"; if (document.forms[0].zip.value == "") errors += "Zip\n"; if (document.forms[0].phone.value == "") errors += "Phone\n"; if (document.forms[0].email.value == "") errors += "Email\n"; if (document.forms[0].pw2.value == "") errors += "Confirm password\n"; if (document.forms[0].dob.value == "") errors += "Date of birth\n"; if (document.forms[0].sex.value == "") errors += "sex\n"; // don't need to check checkboxes if (errors != "") { //something was wrong})) alert ("Please fix these errors\n" + errors) ; return false; } var stringx; stringx = "fName:" + document.forms(0).fname.value; stringx = "lName:" + document.forms(0).lname.value; stringx += "\nAddress: " + document.forms(0).addrs1.value; stringx += "\nCity: " + document.forms(0).city.value; stringx += " \nState: " + document.forms(0).state.value; stringx += " Zip: "+ document.forms(0).zip.value; stringx += "\nPhone: " + document.forms(0).phone.value; stringx += "\nE-mail:" + document.forms(0).email.value; stringx += "\nConfirm password " + document.forms(0).pw2.value; stringx += "\nDate of birth: " + document.forms(0).dob.value; stringx += "\nSex: " + document.forms(0).sex.value; alert(stringx); return false //set to false to not submit } // ]]> --> </script> <h1>jons validations test</h1> </head> <body> <div id="rightcolumn"> <img src="hula.gif" align="right"/> </div> <text align="left"> <form name="jon" action="formoutput.php" onsubmit="return showjonsForm()" Method="post"> <fieldset style="width:250px"> <label> first name</label> <input type="text" name="fname" size="15" maxlength="22" onBlur="checkRequired( this,'fname')"/><br /> <label>last name</label> <input type="text" name="lname" size="10" maxlength="22"> <br /> </fieldset> <fieldset style="width:250px"> <label>address</label> <input type="text" name="adrs1" size="10" maxlength="30"><br /> <span class="msg_container" id="adrs2"></span><br /> <label>city</label> <input type="text" name="city" size="10" maxlength="15"><br /> <span class="msg_container" id="city"></span><br /> <label>state</label> <input type="text" name="state" size="10" maxlength="2"><br /> <span class="msg_container" id="state"></span><br /> <label>zip</label> <input type="text" name="zip" size="10" maxlength="5"><br /> </fieldset> <fieldset style="width:250px"> <label>phone</label> <input type="text" name="phone" size="10" maxlength="10"><br /> <div>please input phone number in this format 1234567892 thank you </div> <label>email</label> <input type="text" name="email" size="10" maxlength="22"><br /> <div> password must have 1 number upper case and minimum of 6 charcters</div> <label>password</label> <input type="text" name="pw2" size="10" maxlength="12"><br /> <label>select gender type</label> <select name="sex" size="1" <br /> <option>male</option> <option>female</option> <option>timelord</option> </select> <label>date of birth</label> <input type="text name="dob" size="8" maxlength="8"/> <div> would you like to know know more</div> <label> yes</label> <input type="checkbox" checked="checked" name="check" /> </fieldset> <input type="submit"/></form> </form> <div id="footer"> <img src="laps2.jpg"> <img src="orange.jpg"><img src="ok.jpg"> </div> </body> </html>

    Read the article

  • when rendering the page on different browsers layout changes

    - by user1776590
    I have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it this is my master page code <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head runat="server"> <title></title> <link href="~/Styles/UM.css" rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="Form1" runat="server"> <div class="page"> <div class="header"> <div class="title"> <h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"> <Items> <asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/> </Items> </asp:Menu> </div> </div> </div></h1> <div class="main" runat="server"> <asp:ContentPlaceHolder ID="MainContent" runat="server"/> </div> </form> </body> </html> the below is the css /* DEFAULTS ----------------------------------------------------------*/ body { background: #b6b7bc; font-size: .80em; font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; margin: 0px; padding: 0px; color: #696969; height: 192px; } a:link, a:visited { color: #034af3; } a:hover { color: #1d60ff; text-decoration: none; } a:active { color: #034af3; } p { margin-bottom: 10px; line-height: 1.6em; } /* HEADINGS ----------------------------------------------------------*/ h1, h2, h3, h4, h5, h6 { font-size: 1.5em; color: #666666; font-variant: small-caps; text-transform: none; font-weight: 200; margin-bottom: 0px; } h1 { font-size: 1.6em; padding-bottom: 0px; margin-bottom: 0px; } h2 { font-size: 1.5em; font-weight: 600; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5, h6 { font-size: 1em; } /* this rule styles <h1> and <h2> tags that are the first child of the left and right table columns */ .rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { margin-top: 0px; } /* PRIMARY LAYOUT ELEMENTS ----------------------------------------------------------*/ .page { width: 950px; height:auto; background-color: #fff; margin: 10px auto 5px auto; border: 1px solid #496077; } .header { position:relative; margin: 0px; padding: 0px; background: #E30613; width: 100%; top: 0px; left: 0px; height: 90px; } .header h1 { font-weight: 700; margin: 0px; padding: 0px 0px 0px 0px; color: #E30613; border: none; line-height: 2em; font-size: 2em; } .main { padding: 0px 12px; margin: 0px 0px 0px 0px; min-height: 630px; width:auto; background-image:url('UMBackground.png'); } .leftCol { padding: 6px 0px; margin: 0px 0px 0px 0px; width: 200px; min-height: 200px; width:auto; } .footer { color: #4e5766; padding: 0px 0px 0px 0px; margin: 0px auto; text-align: center; line-height: normal; } /* TAB MENU ----------------------------------------------------------*/ div.hideSkiplink { background-color:#E30613; width: 950px; height: 35px; margin-top: 0px; } div.menu { padding: 1px 0px 1px 2px; } div.menu ul { list-style: none; margin: 0px; padding: 5px; width: auto; } div.menu ul li a, div.menu ul li a:visited { background-color: #E30613; border: 1.25px #00BFFF solid; color: #F5FFFA; display:inline; line-height: 1.35em; padding: 10px 30px; text-decoration: none; white-space: nowrap; } div.menu ul li a:hover { background-color: #000000; color: #F5FFFA; text-decoration: none; } div.menu ul li a:active { background-color: #E30613; color: #cfdbe6; text-decoration: none; } /* FORM ELEMENTS ----------------------------------------------------------*/ fieldset { margin: 1em 0px; padding: 1em; border: 1px solid #ccc; } fieldset p { margin: 2px 12px 10px 10px; } fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; } fieldset label.inline { display: inline; } legend { font-size: 1.1em; font-weight: 600; padding: 2px 4px 8px 4px; } input.textEntry { width: 320px; border: 1px solid #ccc; } input.passwordEntry { width: 320px; border: 1px solid #ccc; } div.accountInfo { width: 42%; } /* MISC ----------------------------------------------------------*/ .clear { clear: both; } .title { display: block; float: left; text-align: left; width: 947px; height: 132px; } .loginDisplay { font-size: 1.1em; display: block; text-align: right; padding: 10px; color: White; } .loginDisplay a:link { color: white; } .loginDisplay a:visited { color: white; } .loginDisplay a:hover { color: white; } .failureNotification { font-size: 1.2em; color: Red; } .bold { font-weight: bold; } .submitButton { text-align: right; padding-right: 10px; }

    Read the article

  • Table sorting & pagination with jQuery and Razor in ASP.NET MVC

    - by hajan
    Introduction jQuery enjoys living inside pages which are built on top of ASP.NET MVC Framework. The ASP.NET MVC is a place where things are organized very well and it is quite hard to make them dirty, especially because the pattern enforces you on purity (you can still make it dirty if you want so ;) ). We all know how easy is to build a HTML table with a header row, footer row and table rows showing some data. With ASP.NET MVC we can do this pretty easy, but, the result will be pure HTML table which only shows data, but does not includes sorting, pagination or some other advanced features that we were used to have in the ASP.NET WebForms GridView. Ok, there is the WebGrid MVC Helper, but what if we want to make something from pure table in our own clean style? In one of my recent projects, I’ve been using the jQuery tablesorter and tablesorter.pager plugins that go along. You don’t need to know jQuery to make this work… You need to know little CSS to create nice design for your table, but of course you can use mine from the demo… So, what you will see in this blog is how to attach this plugin to your pure html table and a div for pagination and make your table with advanced sorting and pagination features.   Demo Project Resources The resources I’m using for this demo project are shown in the following solution explorer window print screen: Content/images – folder that contains all the up/down arrow images, pagination buttons etc. You can freely replace them with your own, but keep the names the same if you don’t want to change anything in the CSS we will built later. Content/Site.css – The main css theme, where we will add the theme for our table too Controllers/HomeController.cs – The controller I’m using for this project Models/Person.cs – For this demo, I’m using Person.cs class Scripts – jquery-1.4.4.min.js, jquery.tablesorter.js, jquery.tablesorter.pager.js – required script to make the magic happens Views/Home/Index.cshtml – Index view (razor view engine) the other items are not important for the demo. ASP.NET MVC 1. Model In this demo I use only one Person class which defines Person entity with several properties. You can use your own model, maybe one which will access data from database or any other resource. Person.cs public class Person {     public string Name { get; set; }     public string Surname { get; set; }     public string Email { get; set; }     public int? Phone { get; set; }     public DateTime? DateAdded { get; set; }     public int? Age { get; set; }     public Person(string name, string surname, string email,         int? phone, DateTime? dateadded, int? age)     {         Name = name;         Surname = surname;         Email = email;         Phone = phone;         DateAdded = dateadded;         Age = age;     } } 2. View In our example, we have only one Index.chtml page where Razor View engine is used. Razor view engine is my favorite for ASP.NET MVC because it’s very intuitive, fluid and keeps your code clean. 3. Controller Since this is simple example with one page, we use one HomeController.cs where we have two methods, one of ActionResult type (Index) and another GetPeople() used to create and return list of people. HomeController.cs public class HomeController : Controller {     //     // GET: /Home/     public ActionResult Index()     {         ViewBag.People = GetPeople();         return View();     }     public List<Person> GetPeople()     {         List<Person> listPeople = new List<Person>();                  listPeople.Add(new Person("Hajan", "Selmani", "[email protected]", 070070070,DateTime.Now, 25));                     listPeople.Add(new Person("Straight", "Dean", "[email protected]", 123456789, DateTime.Now.AddDays(-5), 35));         listPeople.Add(new Person("Karsen", "Livia", "[email protected]", 46874651, DateTime.Now.AddDays(-2), 31));         listPeople.Add(new Person("Ringer", "Anne", "[email protected]", null, DateTime.Now, null));         listPeople.Add(new Person("O'Leary", "Michael", "[email protected]", 32424344, DateTime.Now, 44));         listPeople.Add(new Person("Gringlesby", "Anne", "[email protected]", null, DateTime.Now.AddDays(-9), 18));         listPeople.Add(new Person("Locksley", "Stearns", "[email protected]", 2135345, DateTime.Now, null));         listPeople.Add(new Person("DeFrance", "Michel", "[email protected]", 235325352, DateTime.Now.AddDays(-18), null));         listPeople.Add(new Person("White", "Johnson", null, null, DateTime.Now.AddDays(-22), 55));         listPeople.Add(new Person("Panteley", "Sylvia", null, 23233223, DateTime.Now.AddDays(-1), 32));         listPeople.Add(new Person("Blotchet-Halls", "Reginald", null, 323243423, DateTime.Now, 26));         listPeople.Add(new Person("Merr", "South", "[email protected]", 3232442, DateTime.Now.AddDays(-5), 85));         listPeople.Add(new Person("MacFeather", "Stearns", "[email protected]", null, DateTime.Now, null));         return listPeople;     } }   TABLE CSS/HTML DESIGN Now, lets start with the implementation. First of all, lets create the table structure and the main CSS. 1. HTML Structure @{     Layout = null;     } <!DOCTYPE html> <html> <head>     <title>ASP.NET & jQuery</title>     <!-- referencing styles, scripts and writing custom js scripts will go here --> </head> <body>     <div>         <table class="tablesorter">             <thead>                 <tr>                     <th> value </th>                 </tr>             </thead>             <tbody>                 <tr>                     <td>value</td>                 </tr>             </tbody>             <tfoot>                 <tr>                     <th> value </th>                 </tr>             </tfoot>         </table>         <div id="pager">                      </div>     </div> </body> </html> So, this is the main structure you need to create for each of your tables where you want to apply the functionality we will create. Of course the scripts are referenced once ;). As you see, our table has class tablesorter and also we have a div with id pager. In the next steps we will use both these to create the needed functionalities. The complete Index.cshtml coded to get the data from controller and display in the page is: <body>     <div>         <table class="tablesorter">             <thead>                 <tr>                     <th>Name</th>                     <th>Surname</th>                     <th>Email</th>                     <th>Phone</th>                     <th>Date Added</th>                 </tr>             </thead>             <tbody>                 @{                     foreach (var p in ViewBag.People)                     {                                 <tr>                         <td>@p.Name</td>                         <td>@p.Surname</td>                         <td>@p.Email</td>                         <td>@p.Phone</td>                         <td>@p.DateAdded</td>                     </tr>                     }                 }             </tbody>             <tfoot>                 <tr>                     <th>Name</th>                     <th>Surname</th>                     <th>Email</th>                     <th>Phone</th>                     <th>Date Added</th>                 </tr>             </tfoot>         </table>         <div id="pager" style="position: none;">             <form>             <img src="@Url.Content("~/Content/images/first.png")" class="first" />             <img src="@Url.Content("~/Content/images/prev.png")" class="prev" />             <input type="text" class="pagedisplay" />             <img src="@Url.Content("~/Content/images/next.png")" class="next" />             <img src="@Url.Content("~/Content/images/last.png")" class="last" />             <select class="pagesize">                 <option selected="selected" value="5">5</option>                 <option value="10">10</option>                 <option value="20">20</option>                 <option value="30">30</option>                 <option value="40">40</option>             </select>             </form>         </div>     </div> </body> So, mainly the structure is the same. I have added @Razor code to create table with data retrieved from the ViewBag.People which has been filled with data in the home controller. 2. CSS Design The CSS code I’ve created is: /* DEMO TABLE */ body {     font-size: 75%;     font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;     color: #232323;     background-color: #fff; } table { border-spacing:0; border:1px solid gray;} table.tablesorter thead tr .header {     background-image: url(images/bg.png);     background-repeat: no-repeat;     background-position: center right;     cursor: pointer; } table.tablesorter tbody td {     color: #3D3D3D;     padding: 4px;     background-color: #FFF;     vertical-align: top; } table.tablesorter tbody tr.odd td {     background-color:#F0F0F6; } table.tablesorter thead tr .headerSortUp {     background-image: url(images/asc.png); } table.tablesorter thead tr .headerSortDown {     background-image: url(images/desc.png); } table th { width:150px;            border:1px outset gray;            background-color:#3C78B5;            color:White;            cursor:pointer; } table thead th:hover { background-color:Yellow; color:Black;} table td { width:150px; border:1px solid gray;} PAGINATION AND SORTING Now, when everything is ready and we have the data, lets make pagination and sorting functionalities 1. jQuery Scripts referencing <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script> 2. jQuery Sorting and Pagination script   <script type="text/javascript">     $(function () {         $("table.tablesorter").tablesorter({ widthFixed: true, sortList: [[0, 0]] })         .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });     }); </script> So, with only two lines of code, I’m using both tablesorter and tablesorterPager plugins, giving some options to both these. Options added: tablesorter - widthFixed: true – gives fixed width of the columns tablesorter - sortList[[0,0]] – An array of instructions for per-column sorting and direction in the format: [[columnIndex, sortDirection], ... ] where columnIndex is a zero-based index for your columns left-to-right and sortDirection is 0 for Ascending and 1 for Descending. A valid argument that sorts ascending first by column 1 and then column 2 looks like: [[0,0],[1,0]] (source: http://tablesorter.com/docs/) tablesorterPager – container: $(“#pager”) – tells the pager container, the div with id pager in our case. tablesorterPager – size: the default size of each page, where I get the default value selected, so if you put selected to any other of the options in your select list, you will have this number of rows as default per page for the table too. END RESULTS 1. Table once the page is loaded (default results per page is 5 and is automatically sorted by 1st column as sortList is specified) 2. Sorted by Phone Descending 3. Changed pagination to 10 items per page 4. Sorted by Phone and Name (use SHIFT to sort on multiple columns) 5. Sorted by Date Added 6. Page 3, 5 items per page   ADDITIONAL ENHANCEMENTS We can do additional enhancements to the table. We can make search for each column. I will cover this in one of my next blogs. Stay tuned. DEMO PROJECT You can download demo project source code from HERE.CONCLUSION Once you finish with the demo, run your page and open the source code. You will be amazed of the purity of your code.Working with pagination in client side can be very useful. One of the benefits is performance, but if you have thousands of rows in your tables, you will get opposite result when talking about performance. Hence, sometimes it is nice idea to make pagination on back-end. So, the compromise between both approaches would be best to combine both of them. I use at most up to 500 rows on client-side and once the user reach the last page, we can trigger ajax postback which can get the next 500 rows using server-side pagination of the same data. I would like to recommend the following blog post http://weblogs.asp.net/gunnarpeipman/archive/2010/09/14/returning-paged-results-from-repositories-using-pagedresult-lt-t-gt.aspx, which will help you understand how to return page results from repository. I hope this was helpful post for you. Wait for my next posts ;). Please do let me know your feedback. Best Regards, Hajan

    Read the article

  • What&rsquo;s New in ASP.NET 4.0 Part Two: WebForms and Visual Studio Enhancements

    - by Rick Strahl
    In the last installment I talked about the core changes in the ASP.NET runtime that I’ve been taking advantage of. In this column, I’ll cover the changes to the Web Forms engine and some of the cool improvements in Visual Studio that make Web and general development easier. WebForms The WebForms engine is the area that has received most significant changes in ASP.NET 4.0. Probably the most widely anticipated features are related to managing page client ids and of ViewState on WebForm pages. Take Control of Your ClientIDs Unique ClientID generation in ASP.NET has been one of the most complained about “features” in ASP.NET. Although there’s a very good technical reason for these unique generated ids - they guarantee unique ids for each and every server control on a page - these unique and generated ids often get in the way of client-side JavaScript development and CSS styling as it’s often inconvenient and fragile to work with the long, generated ClientIDs. In ASP.NET 4.0 you can now specify an explicit client id mode on each control or each naming container parent control to control how client ids are generated. By default, ASP.NET generates mangled client ids for any control contained in a naming container (like a Master Page, or a User Control for example). The key to ClientID management in ASP.NET 4.0 are the new ClientIDMode and ClientIDRowSuffix properties. ClientIDMode supports four different ClientID generation settings shown below. For the following examples, imagine that you have a Textbox control named txtName inside of a master page control container on a WebForms page. <%@Page Language="C#"      MasterPageFile="~/Site.Master"     CodeBehind="WebForm2.aspx.cs"     Inherits="WebApplication1.WebForm2"  %> <asp:Content ID="content"  ContentPlaceHolderID="content"               runat="server"               ClientIDMode="Static" >       <asp:TextBox runat="server" ID="txtName" /> </asp:Content> The four available ClientIDMode values are: AutoID This is the existing behavior in ASP.NET 1.x-3.x where full naming container munging takes place. <input name="ctl00$content$txtName" type="text"        id="ctl00_content_txtName" /> This should be familiar to any ASP.NET developer and results in fairly unpredictable client ids that can easily change if the containership hierarchy changes. For example, removing the master page changes the name in this case, so if you were to move a block of script code that works against the control to a non-Master page, the script code immediately breaks. Static This option is the most deterministic setting that forces the control’s ClientID to use its ID value directly. No naming container naming at all is applied and you end up with clean client ids: <input name="ctl00$content$txtName"         type="text" id="txtName" /> Note that the name property which is used for postback variables to the server still is munged, but the ClientID property is displayed simply as the ID value that you have assigned to the control. This option is what most of us want to use, but you have to be clear on that because it can potentially cause conflicts with other controls on the page. If there are several instances of the same naming container (several instances of the same user control for example) there can easily be a client id naming conflict. Note that if you assign Static to a data-bound control, like a list child control in templates, you do not get unique ids either, so for list controls where you rely on unique id for child controls, you’ll probably want to use Predictable rather than Static. I’ll write more on this a little later when I discuss ClientIDRowSuffix. Predictable The previous two values are pretty self-explanatory. Predictable however, requires some explanation. To me at least it’s not in the least bit predictable. MSDN defines this value as follows: This algorithm is used for controls that are in data-bound controls. The ClientID value is generated by concatenating the ClientID value of the parent naming container with the ID value of the control. If the control is a data-bound control that generates multiple rows, the value of the data field specified in the ClientIDRowSuffix property is added at the end. For the GridView control, multiple data fields can be specified. If the ClientIDRowSuffix property is blank, a sequential number is added at the end instead of a data-field value. Each segment is separated by an underscore character (_). The key that makes this value a bit confusing is that it relies on the parent NamingContainer’s ClientID to build its own ClientID value. This effectively means that the value is not predictable at all but rather very tightly coupled to the parent naming container’s ClientIDMode setting. For my simple textbox example, if the ClientIDMode property of the parent naming container (Page in this case) is set to “Predictable” you’ll get this: <input name="ctl00$content$txtName" type="text"         id="content_txtName" /> which gives an id that based on walking up to the currently active naming container (the MasterPage content container) and starting the id formatting from there downward. Think of this as a semi unique name that’s guaranteed unique only for the naming container. If, on the other hand, the Page is set to “AutoID” you get the following with Predictable on txtName: <input name="ctl00$content$txtName" type="text"         id="ctl00_content_txtName" /> The latter is effectively the same as if you specified AutoID because it inherits the AutoID naming from the Page and Content Master Page control of the page. But again - predictable behavior always depends on the parent naming container and how it generates its id, so the id may not always be exactly the same as the AutoID generated value because somewhere in the NamingContainer chain the ClientIDMode setting may be set to a different value. For example, if you had another naming container in the middle that was set to Static you’d end up effectively with an id that starts with the NamingContainers id rather than the whole ctl000_content munging. The most common use for Predictable is likely to be for data-bound controls, which results in each data bound item getting a unique ClientID. Unfortunately, even here the behavior can be very unpredictable depending on which data-bound control you use - I found significant differences in how template controls in a GridView behave from those that are used in a ListView control. For example, GridView creates clean child ClientIDs, while ListView still has a naming container in the ClientID, presumably because of the template container on which you can’t set ClientIDMode. Predictable is useful, but only if all naming containers down the chain use this setting. Otherwise you’re right back to the munged ids that are pretty unpredictable. Another property, ClientIDRowSuffix, can be used in combination with ClientIDMode of Predictable to force a suffix onto list client controls. For example: <asp:GridView runat="server" ID="gvItems"              AutoGenerateColumns="false"             ClientIDMode="Static"              ClientIDRowSuffix="Id">     <Columns>     <asp:TemplateField>         <ItemTemplate>             <asp:Label runat="server" id="txtName"                        Text='<%# Eval("Name") %>'                   ClientIDMode="Predictable"/>         </ItemTemplate>     </asp:TemplateField>     <asp:TemplateField>         <ItemTemplate>         <asp:Label runat="server" id="txtId"                     Text='<%# Eval("Id") %>'                     ClientIDMode="Predictable" />         </ItemTemplate>     </asp:TemplateField>     </Columns>  </asp:GridView> generates client Ids inside of a column in the master page described earlier: <td>     <span id="txtName_0">Rick</span> </td> where the value after the underscore is the ClientIDRowSuffix field - in this case “Id” of the item data bound to the control. Note that all of the child controls require ClientIDMode=”Predictable” in order for the ClientIDRowSuffix to be applied, and the parent GridView controls need to be set to Static either explicitly or via Naming Container inheritance to give these simple names. It’s a bummer that ClientIDRowSuffix doesn’t work with Static to produce this automatically. Another real problem is that other controls process the ClientIDMode differently. For example, a ListView control processes the Predictable ClientIDMode differently and produces the following with the Static ListView and Predictable child controls: <span id="ctrl0_txtName_0">Rick</span> I couldn’t even figure out a way using ClientIDMode to get a simple ID that also uses a suffix short of falling back to manually generated ids using <%= %> expressions instead. Given the inconsistencies inside of list controls using <%= %>, ids for the ListView might not be a bad idea anyway. Inherit The final setting is Inherit, which is the default for all controls except Page. This means that controls by default inherit the parent naming container’s ClientIDMode setting. For more detailed information on ClientID behavior and different scenarios you can check out a blog post of mine on this subject: http://www.west-wind.com/weblog/posts/54760.aspx. ClientID Enhancements Summary The ClientIDMode property is a welcome addition to ASP.NET 4.0. To me this is probably the most useful WebForms feature as it allows me to generate clean IDs simply by setting ClientIDMode="Static" on either the page or inside of Web.config (in the Pages section) which applies the setting down to the entire page which is my 95% scenario. For the few cases when it matters - for list controls and inside of multi-use user controls or custom server controls) - I can use Predictable or even AutoID to force controls to unique names. For application-level page development, this is easy to accomplish and provides maximum usability for working with client script code against page controls. ViewStateMode Another area of large criticism for WebForms is ViewState. ViewState is used internally by ASP.NET to persist page-level changes to non-postback properties on controls as pages post back to the server. It’s a useful mechanism that works great for the overall mechanics of WebForms, but it can also cause all sorts of overhead for page operation as ViewState can very quickly get out of control and consume huge amounts of bandwidth in your page content. ViewState can also wreak havoc with client-side scripting applications that modify control properties that are tracked by ViewState, which can produce very unpredictable results on a Postback after client-side updates. Over the years in my own development, I’ve often turned off ViewState on pages to reduce overhead. Yes, you lose some functionality, but you can easily implement most of the common functionality in non-ViewState workarounds. Relying less on heavy ViewState controls and sticking with simpler controls or raw HTML constructs avoids getting around ViewState problems. In ASP.NET 3.x and prior, it wasn’t easy to control ViewState - you could turn it on or off and if you turned it off at the page or web.config level, you couldn’t turn it back on for specific controls. In short, it was an all or nothing approach. With ASP.NET 4.0, the new ViewStateMode property gives you more control. It allows you to disable ViewState globally either on the page or web.config level and then turn it back on for specific controls that might need it. ViewStateMode only works when EnableViewState="true" on the page or web.config level (which is the default). You can then use ViewStateMode of Disabled, Enabled or Inherit to control the ViewState settings on the page. If you’re shooting for minimal ViewState usage, the ideal situation is to set ViewStateMode to disabled on the Page or web.config level and only turn it back on particular controls: <%@Page Language="C#"      CodeBehind="WebForm2.aspx.cs"     Inherits="Westwind.WebStore.WebForm2"        ClientIDMode="Static"                ViewStateMode="Disabled"     EnableViewState="true"  %> <!-- this control has viewstate  --> <asp:TextBox runat="server" ID="txtName"  ViewStateMode="Enabled" />       <!-- this control has no viewstate - it inherits  from parent container --> <asp:TextBox runat="server" ID="txtAddress" /> Note that the EnableViewState="true" at the Page level isn’t required since it’s the default, but it’s important that the value is true. ViewStateMode has no effect if EnableViewState="false" at the page level. The main benefit of ViewStateMode is that it allows you to more easily turn off ViewState for most of the page and enable only a few key controls that might need it. For me personally, this is a perfect combination as most of my WebForm apps can get away without any ViewState at all. But some controls - especially third party controls - often don’t work well without ViewState enabled, and now it’s much easier to selectively enable controls rather than the old way, which required you to pretty much turn off ViewState for all controls that you didn’t want ViewState on. Inline HTML Encoding HTML encoding is an important feature to prevent cross-site scripting attacks in data entered by users on your site. In order to make it easier to create HTML encoded content, ASP.NET 4.0 introduces a new Expression syntax using <%: %> to encode string values. The encoding expression syntax looks like this: <%: "<script type='text/javascript'>" +     "alert('Really?');</script>" %> which produces properly encoded HTML: &lt;script type=&#39;text/javascript&#39; &gt;alert(&#39;Really?&#39;);&lt;/script&gt; Effectively this is a shortcut to: <%= HttpUtility.HtmlEncode( "<script type='text/javascript'>" + "alert('Really?');</script>") %> Of course the <%: %> syntax can also evaluate expressions just like <%= %> so the more common scenario applies this expression syntax against data your application is displaying. Here’s an example displaying some data model values: <%: Model.Address.Street %> This snippet shows displaying data from your application’s data store or more importantly, from data entered by users. Anything that makes it easier and less verbose to HtmlEncode text is a welcome addition to avoid potential cross-site scripting attacks. Although I listed Inline HTML Encoding here under WebForms, anything that uses the WebForms rendering engine including ASP.NET MVC, benefits from this feature. ScriptManager Enhancements The ASP.NET ScriptManager control in the past has introduced some nice ways to take programmatic and markup control over script loading, but there were a number of shortcomings in this control. The ASP.NET 4.0 ScriptManager has a number of improvements that make it easier to control script loading and addresses a few of the shortcomings that have often kept me from using the control in favor of manual script loading. The first is the AjaxFrameworkMode property which finally lets you suppress loading the ASP.NET AJAX runtime. Disabled doesn’t load any ASP.NET AJAX libraries, but there’s also an Explicit mode that lets you pick and choose the library pieces individually and reduce the footprint of ASP.NET AJAX script included if you are using the library. There’s also a new EnableCdn property that forces any script that has a new WebResource attribute CdnPath property set to a CDN supplied URL. If the script has this Attribute property set to a non-null/empty value and EnableCdn is enabled on the ScriptManager, that script will be served from the specified CdnPath. [assembly: WebResource(    "Westwind.Web.Resources.ww.jquery.js",    "application/x-javascript",    CdnPath =  "http://mysite.com/scripts/ww.jquery.min.js")] Cool, but a little too static for my taste since this value can’t be changed at runtime to point at a debug script as needed, for example. Assembly names for loading scripts from resources can now be simple names rather than fully qualified assembly names, which make it less verbose to reference scripts from assemblies loaded from your bin folder or the assembly reference area in web.config: <asp:ScriptManager runat="server" id="Id"          EnableCdn="true"         AjaxFrameworkMode="disabled">     <Scripts>         <asp:ScriptReference          Name="Westwind.Web.Resources.ww.jquery.js"         Assembly="Westwind.Web" />     </Scripts>        </asp:ScriptManager> The ScriptManager in 4.0 also supports script combining via the CompositeScript tag, which allows you to very easily combine scripts into a single script resource served via ASP.NET. Even nicer: You can specify the URL that the combined script is served with. Check out the following script manager markup that combines several static file scripts and a script resource into a single ASP.NET served resource from a static URL (allscripts.js): <asp:ScriptManager runat="server" id="Id"          EnableCdn="true"         AjaxFrameworkMode="disabled">     <CompositeScript          Path="~/scripts/allscripts.js">         <Scripts>             <asp:ScriptReference                    Path="~/scripts/jquery.js" />             <asp:ScriptReference                    Path="~/scripts/ww.jquery.js" />             <asp:ScriptReference            Name="Westwind.Web.Resources.editors.js"                 Assembly="Westwind.Web" />         </Scripts>     </CompositeScript> </asp:ScriptManager> When you render this into HTML, you’ll see a single script reference in the page: <script src="scripts/allscripts.debug.js"          type="text/javascript"></script> All you need to do to make this work is ensure that allscripts.js and allscripts.debug.js exist in the scripts folder of your application - they can be empty but the file has to be there. This is pretty cool, but you want to be real careful that you use unique URLs for each combination of scripts you combine or else browser and server caching will easily screw you up royally. The script manager also allows you to override native ASP.NET AJAX scripts now as any script references defined in the Scripts section of the ScriptManager trump internal references. So if you want custom behavior or you want to fix a possible bug in the core libraries that normally are loaded from resources, you can now do this simply by referencing the script resource name in the Name property and pointing at System.Web for the assembly. Not a common scenario, but when you need it, it can come in real handy. Still, there are a number of shortcomings in this control. For one, the ScriptManager and ClientScript APIs still have no common entry point so control developers are still faced with having to check and support both APIs to load scripts so that controls can work on pages that do or don’t have a ScriptManager on the page. The CdnUrl is static and compiled in, which is very restrictive. And finally, there’s still no control over where scripts get loaded on the page - ScriptManager still injects scripts into the middle of the HTML markup rather than in the header or optionally the footer. This, in turn, means there is little control over script loading order, which can be problematic for control developers. MetaDescription, MetaKeywords Page Properties There are also a number of additional Page properties that correspond to some of the other features discussed in this column: ClientIDMode, ClientTarget and ViewStateMode. Another minor but useful feature is that you can now directly access the MetaDescription and MetaKeywords properties on the Page object to set the corresponding meta tags programmatically. Updating these values programmatically previously required either <%= %> expressions in the page markup or dynamic insertion of literal controls into the page. You can now just set these properties programmatically on the Page object in any Control derived class on the page or the Page itself: Page.MetaKeywords = "ASP.NET,4.0,New Features"; Page.MetaDescription = "This article discusses the new features in ASP.NET 4.0"; Note, that there’s no corresponding ASP.NET tag for the HTML Meta element, so the only way to specify these values in markup and access them is via the @Page tag: <%@Page Language="C#"      CodeBehind="WebForm2.aspx.cs"     Inherits="Westwind.WebStore.WebForm2"      ClientIDMode="Static"                MetaDescription="Article that discusses what's                      new in ASP.NET 4.0"     MetaKeywords="ASP.NET,4.0,New Features" %> Nothing earth shattering but quite convenient. Visual Studio 2010 Enhancements for Web Development For Web development there are also a host of editor enhancements in Visual Studio 2010. Some of these are not Web specific but they are useful for Web developers in general. Text Editors Throughout Visual Studio 2010, the text editors have all been updated to a new core engine based on WPF which provides some interesting new features for various code editors including the nice ability to zoom in and out with Ctrl-MouseWheel to quickly change the size of text. There are many more API options to control the editor and although Visual Studio 2010 doesn’t yet use many of these features, we can look forward to enhancements in add-ins and future editor updates from the various language teams that take advantage of the visual richness that WPF provides to editing. On the negative side, I’ve noticed that occasionally the code editor and especially the HTML and JavaScript editors will lose the ability to use various navigation keys like arrows, back and delete keys, which requires closing and reopening the documents at times. This issue seems to be well documented so I suspect this will be addressed soon with a hotfix or within the first service pack. Overall though, the code editors work very well, especially given that they were re-written completely using WPF, which was one of my big worries when I first heard about the complete redesign of the editors. Multi-Targeting Visual Studio now targets all versions of the .NET framework from 2.0 forward. You can use Visual Studio 2010 to work on your ASP.NET 2, 3.0 and 3.5 applications which is a nice way to get your feet wet with the new development environment without having to make changes to existing applications. It’s nice to have one tool to work in for all the different versions. Multi-Monitor Support One cool feature of Visual Studio 2010 is the ability to drag windows out of the Visual Studio environment and out onto the desktop including onto another monitor easily. Since Web development often involves working with a host of designers at the same time - visual designer, HTML markup window, code behind and JavaScript editor - it’s really nice to be able to have a little more screen real estate to work on each of these editors. Microsoft made a welcome change in the environment. IntelliSense Snippets for HTML and JavaScript Editors The HTML and JavaScript editors now finally support IntelliSense scripts to create macro-based template expansions that have been in the core C# and Visual Basic code editors since Visual Studio 2005. Snippets allow you to create short XML-based template definitions that can act as static macros or real templates that can have replaceable values that can be embedded into the expanded text. The XML syntax for these snippets is straight forward and it’s pretty easy to create custom snippets manually. You can easily create snippets using XML and store them in your custom snippets folder (C:\Users\rstrahl\Documents\Visual Studio 2010\Code Snippets\Visual Web Developer\My HTML Snippets and My JScript Snippets), but it helps to use one of the third-party tools that exist to simplify the process for you. I use SnippetEditor, by Bill McCarthy, which makes short work of creating snippets interactively (http://snippeteditor.codeplex.com/). Note: You may have to manually add the Visual Studio 2010 User specific Snippet folders to this tool to see existing ones you’ve created. Code snippets are some of the biggest time savers and HTML editing more than anything deals with lots of repetitive tasks that lend themselves to text expansion. Visual Studio 2010 includes a slew of built-in snippets (that you can also customize!) and you can create your own very easily. If you haven’t done so already, I encourage you to spend a little time examining your coding patterns and find the repetitive code that you write and convert it into snippets. I’ve been using CodeRush for this for years, but now you can do much of the basic expansion natively for HTML and JavaScript snippets. jQuery Integration Is Now Native jQuery is a popular JavaScript library and recently Microsoft has recently stated that it will become the primary client-side scripting technology to drive higher level script functionality in various ASP.NET Web projects that Microsoft provides. In Visual Studio 2010, the default full project template includes jQuery as part of a new project including the support files that provide IntelliSense (-vsdoc files). IntelliSense support for jQuery is now also baked into Visual Studio 2010, so unlike Visual Studio 2008 which required a separate download, no further installs are required for a rich IntelliSense experience with jQuery. Summary ASP.NET 4.0 brings many useful improvements to the platform, but thankfully most of the changes are incremental changes that don’t compromise backwards compatibility and they allow developers to ease into the new features one feature at a time. None of the changes in ASP.NET 4.0 or Visual Studio 2010 are monumental or game changers. The bigger features are language and .NET Framework changes that are also optional. This ASP.NET and tools release feels more like fine tuning and getting some long-standing kinks worked out of the platform. It shows that the ASP.NET team is dedicated to paying attention to community feedback and responding with changes to the platform and development environment based on this feedback. If you haven’t gotten your feet wet with ASP.NET 4.0 and Visual Studio 2010, there’s no reason not to give it a shot now - the ASP.NET 4.0 platform is solid and Visual Studio 2010 works very well for a brand new release. Check it out. © Rick Strahl, West Wind Technologies, 2005-2010Posted in ASP.NET  

    Read the article

  • What's New in ASP.NET 4

    - by Navaneeth
    The .NET Framework version 4 includes enhancements for ASP.NET 4 in targeted areas. Visual Studio 2010 and Microsoft Visual Web Developer Express also include enhancements and new features for improved Web development. This document provides an overview of many of the new features that are included in the upcoming release. This topic contains the following sections: ASP.NET Core Services ASP.NET Web Forms ASP.NET MVC Dynamic Data ASP.NET Chart Control Visual Web Developer Enhancements Web Application Deployment with Visual Studio 2010 Enhancements to ASP.NET Multi-Targeting ASP.NET Core Services ASP.NET 4 introduces many features that improve core ASP.NET services such as output caching and session state storage. Extensible Output Caching Since the time that ASP.NET 1.0 was released, output caching has enabled developers to store the generated output of pages, controls, and HTTP responses in memory. On subsequent Web requests, ASP.NET can serve content more quickly by retrieving the generated output from memory instead of regenerating the output from scratch. However, this approach has a limitation — generated content always has to be stored in memory. On servers that experience heavy traffic, the memory requirements for output caching can compete with memory requirements for other parts of a Web application. ASP.NET 4 adds extensibility to output caching that enables you to configure one or more custom output-cache providers. Output-cache providers can use any storage mechanism to persist HTML content. These storage options can include local or remote disks, cloud storage, and distributed cache engines. Output-cache provider extensibility in ASP.NET 4 lets you design more aggressive and more intelligent output-caching strategies for Web sites. For example, you can create an output-cache provider that caches the "Top 10" pages of a site in memory, while caching pages that get lower traffic on disk. Alternatively, you can cache every vary-by combination for a rendered page, but use a distributed cache so that the memory consumption is offloaded from front-end Web servers. You create a custom output-cache provider as a class that derives from the OutputCacheProvider type. You can then configure the provider in the Web.config file by using the new providers subsection of the outputCache element For more information and for examples that show how to configure the output cache, see outputCache Element for caching (ASP.NET Settings Schema). For more information about the classes that support caching, see the documentation for the OutputCache and OutputCacheProvider classes. By default, in ASP.NET 4, all HTTP responses, rendered pages, and controls use the in-memory output cache. The defaultProvider attribute for ASP.NET is AspNetInternalProvider. You can change the default output-cache provider used for a Web application by specifying a different provider name for defaultProvider attribute. In addition, you can select different output-cache providers for individual control and for individual requests and programmatically specify which provider to use. For more information, see the HttpApplication.GetOutputCacheProviderName(HttpContext) method. The easiest way to choose a different output-cache provider for different Web user controls is to do so declaratively by using the new providerName attribute in a page or control directive, as shown in the following example: <%@ OutputCache Duration="60" VaryByParam="None" providerName="DiskCache" %> Preloading Web Applications Some Web applications must load large amounts of data or must perform expensive initialization processing before serving the first request. In earlier versions of ASP.NET, for these situations you had to devise custom approaches to "wake up" an ASP.NET application and then run initialization code during the Application_Load method in the Global.asax file. To address this scenario, a new application preload manager (autostart feature) is available when ASP.NET 4 runs on IIS 7.5 on Windows Server 2008 R2. The preload feature provides a controlled approach for starting up an application pool, initializing an ASP.NET application, and then accepting HTTP requests. It lets you perform expensive application initialization prior to processing the first HTTP request. For example, you can use the application preload manager to initialize an application and then signal a load-balancer that the application was initialized and ready to accept HTTP traffic. To use the application preload manager, an IIS administrator sets an application pool in IIS 7.5 to be automatically started by using the following configuration in the applicationHost.config file: <applicationPools> <add name="MyApplicationPool" startMode="AlwaysRunning" /> </applicationPools> Because a single application pool can contain multiple applications, you specify individual applications to be automatically started by using the following configuration in the applicationHost.config file: <sites> <site name="MySite" id="1"> <application path="/" serviceAutoStartEnabled="true" serviceAutoStartProvider="PrewarmMyCache" > <!-- Additional content --> </application> </site> </sites> <!-- Additional content --> <serviceAutoStartProviders> <add name="PrewarmMyCache" type="MyNamespace.CustomInitialization, MyLibrary" /> </serviceAutoStartProviders> When an IIS 7.5 server is cold-started or when an individual application pool is recycled, IIS 7.5 uses the information in the applicationHost.config file to determine which Web applications have to be automatically started. For each application that is marked for preload, IIS7.5 sends a request to ASP.NET 4 to start the application in a state during which the application temporarily does not accept HTTP requests. When it is in this state, ASP.NET instantiates the type defined by the serviceAutoStartProvider attribute (as shown in the previous example) and calls into its public entry point. You create a managed preload type that has the required entry point by implementing the IProcessHostPreloadClient interface, as shown in the following example: public class CustomInitialization : System.Web.Hosting.IProcessHostPreloadClient { public void Preload(string[] parameters) { // Perform initialization. } } After your initialization code runs in the Preload method and after the method returns, the ASP.NET application is ready to process requests. Permanently Redirecting a Page Content in Web applications is often moved over the lifetime of the application. This can lead to links to be out of date, such as the links that are returned by search engines. In ASP.NET, developers have traditionally handled requests to old URLs by using the Redirect method to forward a request to the new URL. However, the Redirect method issues an HTTP 302 (Found) response (which is used for a temporary redirect). This results in an extra HTTP round trip. ASP.NET 4 adds a RedirectPermanent helper method that makes it easy to issue HTTP 301 (Moved Permanently) responses, as in the following example: RedirectPermanent("/newpath/foroldcontent.aspx"); Search engines and other user agents that recognize permanent redirects will store the new URL that is associated with the content, which eliminates the unnecessary round trip made by the browser for temporary redirects. Session State Compression By default, ASP.NET provides two options for storing session state across a Web farm. The first option is a session state provider that invokes an out-of-process session state server. The second option is a session state provider that stores data in a Microsoft SQL Server database. Because both options store state information outside a Web application's worker process, session state has to be serialized before it is sent to remote storage. If a large amount of data is saved in session state, the size of the serialized data can become very large. ASP.NET 4 introduces a new compression option for both kinds of out-of-process session state providers. By using this option, applications that have spare CPU cycles on Web servers can achieve substantial reductions in the size of serialized session state data. You can set this option using the new compressionEnabled attribute of the sessionState element in the configuration file. When the compressionEnabled configuration option is set to true, ASP.NET compresses (and decompresses) serialized session state by using the .NET Framework GZipStreamclass. The following example shows how to set this attribute. <sessionState mode="SqlServer" sqlConnectionString="data source=dbserver;Initial Catalog=aspnetstate" allowCustomSqlDatabase="true" compressionEnabled="true" /> ASP.NET Web Forms Web Forms has been a core feature in ASP.NET since the release of ASP.NET 1.0. Many enhancements have been in this area for ASP.NET 4, such as the following: The ability to set meta tags. More control over view state. Support for recently introduced browsers and devices. Easier ways to work with browser capabilities. Support for using ASP.NET routing with Web Forms. More control over generated IDs. The ability to persist selected rows in data controls. More control over rendered HTML in the FormView and ListView controls. Filtering support for data source controls. Enhanced support for Web standards and accessibility Setting Meta Tags with the Page.MetaKeywords and Page.MetaDescription Properties Two properties have been added to the Page class: MetaKeywords and MetaDescription. These two properties represent corresponding meta tags in the HTML rendered for a page, as shown in the following example: <head id="Head1" runat="server"> <title>Untitled Page</title> <meta name="keywords" content="keyword1, keyword2' /> <meta name="description" content="Description of my page" /> </head> These two properties work like the Title property does, and they can be set in the @ Page directive. For more information, see Page.MetaKeywords and Page.MetaDescription. Enabling View State for Individual Controls A new property has been added to the Control class: ViewStateMode. You can use this property to disable view state for all controls on a page except those for which you explicitly enable view state. View state data is included in a page's HTML and increases the amount of time it takes to send a page to the client and post it back. Storing more view state than is necessary can cause significant decrease in performance. In earlier versions of ASP.NET, you could reduce the impact of view state on a page's performance by disabling view state for specific controls. But sometimes it is easier to enable view state for a few controls that need it instead of disabling it for many that do not need it. For more information, see Control.ViewStateMode. Support for Recently Introduced Browsers and Devices ASP.NET includes a feature that is named browser capabilities that lets you determine the capabilities of the browser that a user is using. Browser capabilities are represented by the HttpBrowserCapabilities object which is stored in the HttpRequest.Browser property. Information about a particular browser's capabilities is defined by a browser definition file. In ASP.NET 4, these browser definition files have been updated to contain information about recently introduced browsers and devices such as Google Chrome, Research in Motion BlackBerry smart phones, and Apple iPhone. Existing browser definition files have also been updated. For more information, see How to: Upgrade an ASP.NET Web Application to ASP.NET 4 and ASP.NET Web Server Controls and Browser Capabilities. The browser definition files that are included with ASP.NET 4 are shown in the following list: •blackberry.browser •chrome.browser •Default.browser •firefox.browser •gateway.browser •generic.browser •ie.browser •iemobile.browser •iphone.browser •opera.browser •safari.browser A New Way to Define Browser Capabilities ASP.NET 4 includes a new feature referred to as browser capabilities providers. As the name suggests, this lets you build a provider that in turn lets you write custom code to determine browser capabilities. In ASP.NET version 3.5 Service Pack 1, you define browser capabilities in an XML file. This file resides in a machine-level folder or an application-level folder. Most developers do not need to customize these files, but for those who do, the provider approach can be easier than dealing with complex XML syntax. The provider approach makes it possible to simplify the process by implementing a common browser definition syntax, or a database that contains up-to-date browser definitions, or even a Web service for such a database. For more information about the new browser capabilities provider, see the What's New for ASP.NET 4 White Paper. Routing in ASP.NET 4 ASP.NET 4 adds built-in support for routing with Web Forms. Routing is a feature that was introduced with ASP.NET 3.5 SP1 and lets you configure an application to use URLs that are meaningful to users and to search engines because they do not have to specify physical file names. This can make your site more user-friendly and your site content more discoverable by search engines. For example, the URL for a page that displays product categories in your application might look like the following example: http://website/products.aspx?categoryid=12 By using routing, you can use the following URL to render the same information: http://website/products/software The second URL lets the user know what to expect and can result in significantly improved rankings in search engine results. the new features include the following: The PageRouteHandler class is a simple HTTP handler that you use when you define routes. You no longer have to write a custom route handler. The HttpRequest.RequestContext and Page.RouteData properties make it easier to access information that is passed in URL parameters. The RouteUrl expression provides a simple way to create a routed URL in markup. The RouteValue expression provides a simple way to extract URL parameter values in markup. The RouteParameter class makes it easier to pass URL parameter values to a query for a data source control (similar to FormParameter). You no longer have to change the Web.config file to enable routing. For more information about routing, see the following topics: ASP.NET Routing Walkthrough: Using ASP.NET Routing in a Web Forms Application How to: Define Routes for Web Forms Applications How to: Construct URLs from Routes How to: Access URL Parameters in a Routed Page Setting Client IDs The new ClientIDMode property makes it easier to write client script that references HTML elements rendered for server controls. Increasing use of Microsoft Ajax makes the need to do this more common. For example, you may have a data control that renders a long list of products with prices and you want to use client script to make a Web service call and update individual prices in the list as they change without refreshing the entire page. Typically you get a reference to an HTML element in client script by using the document.GetElementById method. You pass to this method the value of the id attribute of the HTML element you want to reference. In the case of elements that are rendered for ASP.NET server controls earlier versions of ASP.NET could make this difficult or impossible. You were not always able to predict what id values ASP.NET would generate, or ASP.NET could generate very long id values. The problem was especially difficult for data controls that would generate multiple rows for a single instance of the control in your markup. ASP.NET 4 adds two new algorithms for generating id attributes. These algorithms can generate id attributes that are easier to work with in client script because they are more predictable and that are easier to work with because they are simpler. For more information about how to use the new algorithms, see the following topics: ASP.NET Web Server Control Identification Walkthrough: Making Data-Bound Controls Easier to Access from JavaScript Walkthrough: Making Controls Located in Web User Controls Easier to Access from JavaScript How to: Access Controls from JavaScript by ID Persisting Row Selection in Data Controls The GridView and ListView controls enable users to select a row. In previous versions of ASP.NET, row selection was based on the row index on the page. For example, if you select the third item on page 1 and then move to page 2, the third item on page 2 is selected. In most cases, is more desirable not to select any rows on page 2. ASP.NET 4 supports Persisted Selection, a new feature that was initially supported only in Dynamic Data projects in the .NET Framework 3.5 SP1. When this feature is enabled, the selected item is based on the row data key. This means that if you select the third row on page 1 and move to page 2, nothing is selected on page 2. When you move back to page 1, the third row is still selected. This is a much more natural behavior than the behavior in earlier versions of ASP.NET. Persisted selection is now supported for the GridView and ListView controls in all projects. You can enable this feature in the GridView control, for example, by setting the EnablePersistedSelection property, as shown in the following example: <asp:GridView id="GridView2" runat="server" PersistedSelection="true"> </asp:GridView> FormView Control Enhancements The FormView control is enhanced to make it easier to style the content of the control with CSS. In previous versions of ASP.NET, the FormView control rendered it contents using an item template. This made styling more difficult in the markup because unexpected table row and table cell tags were rendered by the control. The FormView control supports RenderOuterTable, a property in ASP.NET 4. When this property is set to false, as show in the following example, the table tags are not rendered. This makes it easier to apply CSS style to the contents of the control. <asp:FormView ID="FormView1" runat="server" RenderTable="false"> For more information, see FormView Web Server Control Overview. ListView Control Enhancements The ListView control, which was introduced in ASP.NET 3.5, has all the functionality of the GridView control while giving you complete control over the output. This control has been made easier to use in ASP.NET 4. The earlier version of the control required that you specify a layout template that contained a server control with a known ID. The following markup shows a typical example of how to use the ListView control in ASP.NET 3.5. <asp:ListView ID="ListView1" runat="server"> <LayoutTemplate> <asp:PlaceHolder ID="ItemPlaceHolder" runat="server"></asp:PlaceHolder> </LayoutTemplate> <ItemTemplate> <% Eval("LastName")%> </ItemTemplate> </asp:ListView> In ASP.NET 4, the ListView control does not require a layout template. The markup shown in the previous example can be replaced with the following markup: <asp:ListView ID="ListView1" runat="server"> <ItemTemplate> <% Eval("LastName")%> </ItemTemplate> </asp:ListView> For more information, see ListView Web Server Control Overview. Filtering Data with the QueryExtender Control A very common task for developers who create data-driven Web pages is to filter data. This traditionally has been performed by building Where clauses in data source controls. This approach can be complicated, and in some cases the Where syntax does not let you take advantage of the full functionality of the underlying database. To make filtering easier, a new QueryExtender control has been added in ASP.NET 4. This control can be added to EntityDataSource or LinqDataSource controls in order to filter the data returned by these controls. Because the QueryExtender control relies on LINQ, but you do not to need to know how to write LINQ queries to use the query extender. The QueryExtender control supports a variety of filter options. The following lists QueryExtender filter options. Term Definition SearchExpression Searches a field or fields for string values and compares them to a specified string value. RangeExpression Searches a field or fields for values in a range specified by a pair of values. PropertyExpression Compares a specified value to a property value in a field. If the expression evaluates to true, the data that is being examined is returned. OrderByExpression Sorts data by a specified column and sort direction. CustomExpression Calls a function that defines custom filter in the page. For more information, see QueryExtenderQueryExtender Web Server Control Overview. Enhanced Support for Web Standards and Accessibility Earlier versions of ASP.NET controls sometimes render markup that does not conform to HTML, XHTML, or accessibility standards. ASP.NET 4 eliminates most of these exceptions. For details about how the HTML that is rendered by each control meets accessibility standards, see ASP.NET Controls and Accessibility. CSS for Controls that Can be Disabled In ASP.NET 3.5, when a control is disabled (see WebControl.Enabled), a disabled attribute is added to the rendered HTML element. For example, the following markup creates a Label control that is disabled: <asp:Label id="Label1" runat="server"   Text="Test" Enabled="false" /> In ASP.NET 3.5, the previous control settings generate the following HTML: <span id="Label1" disabled="disabled">Test</span> In HTML 4.01, the disabled attribute is not considered valid on span elements. It is valid only on input elements because it specifies that they cannot be accessed. On display-only elements such as span elements, browsers typically support rendering for a disabled appearance, but a Web page that relies on this non-standard behavior is not robust according to accessibility standards. For display-only elements, you should use CSS to indicate a disabled visual appearance. Therefore, by default ASP.NET 4 generates the following HTML for the control settings shown previously: <span id="Label1" class="aspNetDisabled">Test</span> You can change the value of the class attribute that is rendered by default when a control is disabled by setting the DisabledCssClass property. CSS for Validation Controls In ASP.NET 3.5, validation controls render a default color of red as an inline style. For example, the following markup creates a RequiredFieldValidator control: <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"   ErrorMessage="Required Field" ControlToValidate="RadioButtonList1" /> ASP.NET 3.5 renders the following HTML for the validator control: <span id="RequiredFieldValidator1"   style="color:Red;visibility:hidden;">RequiredFieldValidator</span> By default, ASP.NET 4 does not render an inline style to set the color to red. An inline style is used only to hide or show the validator, as shown in the following example: <span id="RequiredFieldValidator1"   style"visibility:hidden;">RequiredFieldValidator</span> Therefore, ASP.NET 4 does not automatically show error messages in red. For information about how to use CSS to specify a visual style for a validation control, see Validating User Input in ASP.NET Web Pages. CSS for the Hidden Fields Div Element ASP.NET uses hidden fields to store state information such as view state and control state. These hidden fields are contained by a div element. In ASP.NET 3.5, this div element does not have a class attribute or an id attribute. Therefore, CSS rules that affect all div elements could unintentionally cause this div to be visible. To avoid this problem, ASP.NET 4 renders the div element for hidden fields with a CSS class that you can use to differentiate the hidden fields div from others. The new classvalue is shown in the following example: <div class="aspNetHidden"> CSS for the Table, Image, and ImageButton Controls By default, in ASP.NET 3.5, some controls set the border attribute of rendered HTML to zero (0). The following example shows HTML that is generated by the Table control in ASP.NET 3.5: <table id="Table2" border="0"> The Image control and the ImageButton control also do this. Because this is not necessary and provides visual formatting information that should be provided by using CSS, the attribute is not generated in ASP.NET 4. CSS for the UpdatePanel and UpdateProgress Controls In ASP.NET 3.5, the UpdatePanel and UpdateProgress controls do not support expando attributes. This makes it impossible to set a CSS class on the HTMLelements that they render. In ASP.NET 4 these controls have been changed to accept expando attributes, as shown in the following example: <asp:UpdatePanel runat="server" class="myStyle"> </asp:UpdatePanel> The following HTML is rendered for this markup: <div id="ctl00_MainContent_UpdatePanel1" class="expandoclass"> </div> Eliminating Unnecessary Outer Tables In ASP.NET 3.5, the HTML that is rendered for the following controls is wrapped in a table element whose purpose is to apply inline styles to the entire control: FormView Login PasswordRecovery ChangePassword If you use templates to customize the appearance of these controls, you can specify CSS styles in the markup that you provide in the templates. In that case, no extra outer table is required. In ASP.NET 4, you can prevent the table from being rendered by setting the new RenderOuterTable property to false. Layout Templates for Wizard Controls In ASP.NET 3.5, the Wizard and CreateUserWizard controls generate an HTML table element that is used for visual formatting. In ASP.NET 4 you can use a LayoutTemplate element to specify the layout. If you do this, the HTML table element is not generated. In the template, you create placeholder controls to indicate where items should be dynamically inserted into the control. (This is similar to how the template model for the ListView control works.) For more information, see the Wizard.LayoutTemplate property. New HTML Formatting Options for the CheckBoxList and RadioButtonList Controls ASP.NET 3.5 uses HTML table elements to format the output for the CheckBoxList and RadioButtonList controls. To provide an alternative that does not use tables for visual formatting, ASP.NET 4 adds two new options to the RepeatLayout enumeration: UnorderedList. This option causes the HTML output to be formatted by using ul and li elements instead of a table. OrderedList. This option causes the HTML output to be formatted by using ol and li elements instead of a table. For examples of HTML that is rendered for the new options, see the RepeatLayout enumeration. Header and Footer Elements for the Table Control In ASP.NET 3.5, the Table control can be configured to render thead and tfoot elements by setting the TableSection property of the TableHeaderRow class and the TableFooterRow class. In ASP.NET 4 these properties are set to the appropriate values by default. CSS and ARIA Support for the Menu Control In ASP.NET 3.5, the Menu control uses HTML table elements for visual formatting, and in some configurations it is not keyboard-accessible. ASP.NET 4 addresses these problems and improves accessibility in the following ways: The generated HTML is structured as an unordered list (ul and li elements). CSS is used for visual formatting. The menu behaves in accordance with ARIA standards for keyboard access. You can use arrow keys to navigate menu items. (For information about ARIA, see Accessibility in Visual Studio and ASP.NET.) ARIA role and property attributes are added to the generated HTML. (Attributes are added by using JavaScript instead of included in the HTML, to avoid generating HTML that would cause markup validation errors.) Styles for the Menu control are rendered in a style block at the top of the page, instead of inline with the rendered HTML elements. If you want to use a separate CSS file so that you can modify the menu styles, you can set the Menu control's new IncludeStyleBlock property to false, in which case the style block is not generated. Valid XHTML for the HtmlForm Control In ASP.NET 3.5, the HtmlForm control (which is created implicitly by the <form runat="server"> tag) renders an HTML form element that has both name and id attributes. The name attribute is deprecated in XHTML 1.1. Therefore, this control does not render the name attribute in ASP.NET 4. Maintaining Backward Compatibility in Control Rendering An existing ASP.NET Web site might have code in it that assumes that controls are rendering HTML the way they do in ASP.NET 3.5. To avoid causing backward compatibility problems when you upgrade the site to ASP.NET 4, you can have ASP.NET continue to generate HTML the way it does in ASP.NET 3.5 after you upgrade the site. To do so, you can set the controlRenderingCompatibilityVersion attribute of the pages element to "3.5" in the Web.config file of an ASP.NET 4 Web site, as shown in the following example: <system.web>   <pages controlRenderingCompatibilityVersion="3.5"/> </system.web> If this setting is omitted, the default value is the same as the version of ASP.NET that the Web site targets. (For information about multi-targeting in ASP.NET, see .NET Framework Multi-Targeting for ASP.NET Web Projects.) ASP.NET MVC ASP.NET MVC helps Web developers build compelling standards-based Web sites that are easy to maintain because it decreases the dependency among application layers by using the Model-View-Controller (MVC) pattern. MVC provides complete control over the page markup. It also improves testability by inherently supporting Test Driven Development (TDD). Web sites created using ASP.NET MVC have a modular architecture. This allows members of a team to work independently on the various modules and can be used to improve collaboration. For example, developers can work on the model and controller layers (data and logic), while the designer work on the view (presentation). For tutorials, walkthroughs, conceptual content, code samples, and a complete API reference, see ASP.NET MVC 2. Dynamic Data Dynamic Data was introduced in the .NET Framework 3.5 SP1 release in mid-2008. This feature provides many enhancements for creating data-driven applications, such as the following: A RAD experience for quickly building a data-driven Web site. Automatic validation that is based on constraints defined in the data model. The ability to easily change the markup that is generated for fields in the GridView and DetailsView controls by using field templates that are part of your Dynamic Data project. For ASP.NET 4, Dynamic Data has been enhanced to give developers even more power for quickly building data-driven Web sites. For more information, see ASP.NET Dynamic Data Content Map. Enabling Dynamic Data for Individual Data-Bound Controls in Existing Web Applications You can use Dynamic Data features in existing ASP.NET Web applications that do not use scaffolding by enabling Dynamic Data for individual data-bound controls. Dynamic Data provides the presentation and data layer support for rendering these controls. When you enable Dynamic Data for data-bound controls, you get the following benefits: Setting default values for data fields. Dynamic Data enables you to provide default values at run time for fields in a data control. Interacting with the database without creating and registering a data model. Automatically validating the data that is entered by the user without writing any code. For more information, see Walkthrough: Enabling Dynamic Data in ASP.NET Data-Bound Controls. New Field Templates for URLs and E-mail Addresses ASP.NET 4 introduces two new built-in field templates, EmailAddress.ascx and Url.ascx. These templates are used for fields that are marked as EmailAddress or Url using the DataTypeAttribute attribute. For EmailAddress objects, the field is displayed as a hyperlink that is created by using the mailto: protocol. When users click the link, it opens the user's e-mail client and creates a skeleton message. Objects typed as Url are displayed as ordinary hyperlinks. The following example shows how to mark fields. [DataType(DataType.EmailAddress)] public object HomeEmail { get; set; } [DataType(DataType.Url)] public object Website { get; set; } Creating Links with the DynamicHyperLink Control Dynamic Data uses the new routing feature that was added in the .NET Framework 3.5 SP1 to control the URLs that users see when they access the Web site. The new DynamicHyperLink control makes it easy to build links to pages in a Dynamic Data site. For information, see How to: Create Table Action Links in Dynamic Data Support for Inheritance in the Data Model Both the ADO.NET Entity Framework and LINQ to SQL support inheritance in their data models. An example of this might be a database that has an InsurancePolicy table. It might also contain CarPolicy and HousePolicy tables that have the same fields as InsurancePolicy and then add more fields. Dynamic Data has been modified to understand inherited objects in the data model and to support scaffolding for the inherited tables. For more information, see Walkthrough: Mapping Table-per-Hierarchy Inheritance in Dynamic Data. Support for Many-to-Many Relationships (Entity Framework Only) The Entity Framework has rich support for many-to-many relationships between tables, which is implemented by exposing the relationship as a collection on an Entity object. New field templates (ManyToMany.ascx and ManyToMany_Edit.ascx) have been added to provide support for displaying and editing data that is involved in many-to-many relationships. For more information, see Working with Many-to-Many Data Relationships in Dynamic Data. New Attributes to Control Display and Support Enumerations The DisplayAttribute has been added to give you additional control over how fields are displayed. The DisplayNameAttribute attribute in earlier versions of Dynamic Data enabled you to change the name that is used as a caption for a field. The new DisplayAttribute class lets you specify more options for displaying a field, such as the order in which a field is displayed and whether a field will be used as a filter. The attribute also provides independent control of the name that is used for the labels in a GridView control, the name that is used in a DetailsView control, the help text for the field, and the watermark used for the field (if the field accepts text input). The EnumDataTypeAttribute class has been added to let you map fields to enumerations. When you apply this attribute to a field, you specify an enumeration type. Dynamic Data uses the new Enumeration.ascx field template to create UI for displaying and editing enumeration values. The template maps the values from the database to the names in the enumeration. Enhanced Support for Filters Dynamic Data 1.0 had built-in filters for Boolean columns and foreign-key columns. The filters did not let you specify the order in which they were displayed. The new DisplayAttribute attribute addresses this by giving you control over whether a column appears as a filter and in what order it will be displayed. An additional enhancement is that filtering support has been rewritten to use the new QueryExtender feature of Web Forms. This lets you create filters without requiring knowledge of the data source control that the filters will be used with. Along with these extensions, filters have also been turned into template controls, which lets you add new ones. Finally, the DisplayAttribute class mentioned earlier allows the default filter to be overridden, in the same way that UIHint allows the default field template for a column to be overridden. For more information, see Walkthrough: Filtering Rows in Tables That Have a Parent-Child Relationship and QueryableFilterRepeater. ASP.NET Chart Control The ASP.NET chart server control enables you to create ASP.NET pages applications that have simple, intuitive charts for complex statistical or financial analysis. The chart control supports the following features: Data series, chart areas, axes, legends, labels, titles, and more. Data binding. Data manipulation, such as copying, splitting, merging, alignment, grouping, sorting, searching, and filtering. Statistical formulas and financial formulas. Advanced chart appearance, such as 3-D, anti-aliasing, lighting, and perspective. Events and customizations. Interactivity and Microsoft Ajax. Support for the Ajax Content Delivery Network (CDN), which provides an optimized way for you to add Microsoft Ajax Library and jQuery scripts to your Web applications. For more information, see Chart Web Server Control Overview. Visual Web Developer Enhancements The following sections provide information about enhancements and new features in Visual Studio 2010 and Visual Web Developer Express. The Web page designer in Visual Studio 2010 has been enhanced for better CSS compatibility, includes additional support for HTML and ASP.NET markup snippets, and features a redesigned version of IntelliSense for JScript. Improved CSS Compatibility The Visual Web Developer designer in Visual Studio 2010 has been updated to improve CSS 2.1 standards compliance. The designer better preserves HTML source code and is more robust than in previous versions of Visual Studio. HTML and JScript Snippets In the HTML editor, IntelliSense auto-completes tag names. The IntelliSense Snippets feature auto-completes whole tags and more. In Visual Studio 2010, IntelliSense snippets are supported for JScript, alongside C# and Visual Basic, which were supported in earlier versions of Visual Studio. Visual Studio 2010 includes over 200 snippets that help you auto-complete common ASP.NET and HTML tags, including required attributes (such as runat="server") and common attributes specific to a tag (such as ID, DataSourceID, ControlToValidate, and Text). You can download additional snippets, or you can write your own snippets that encapsulate the blocks of markup that you or your team use for common tasks. For more information on HTML snippets, see Walkthrough: Using HTML Snippets. JScript IntelliSense Enhancements In Visual 2010, JScript IntelliSense has been redesigned to provide an even richer editing experience. IntelliSense now recognizes objects that have been dynamically generated by methods such as registerNamespace and by similar techniques used by other JavaScript frameworks. Performance has been improved to analyze large libraries of script and to display IntelliSense with little or no processing delay. Compatibility has been significantly increased to support almost all third-party libraries and to support diverse coding styles. Documentation comments are now parsed as you type and are immediately leveraged by IntelliSense. Web Application Deployment with Visual Studio 2010 For Web application projects, Visual Studio now provides tools that work with the IIS Web Deployment Tool (Web Deploy) to automate many processes that had to be done manually in earlier versions of ASP.NET. For example, the following tasks can now be automated: Creating an IIS application on the destination computer and configuring IIS settings. Copying files to the destination computer. Changing Web.config settings that must be different in the destination environment. Propagating changes to data or data structures in SQL Server databases that are used by the Web application. For more information about Web application deployment, see ASP.NET Deployment Content Map. Enhancements to ASP.NET Multi-Targeting ASP.NET 4 adds new features to the multi-targeting feature to make it easier to work with projects that target earlier versions of the .NET Framework. Multi-targeting was introduced in ASP.NET 3.5 to enable you to use the latest version of Visual Studio without having to upgrade existing Web sites or Web services to the latest version of the .NET Framework. In Visual Studio 2008, when you work with a project targeted for an earlier version of the .NET Framework, most features of the development environment adapt to the targeted version. However, IntelliSense displays language features that are available in the current version, and property windows display properties available in the current version. In Visual Studio 2010, only language features and properties available in the targeted version of the .NET Framework are shown. For more information about multi-targeting, see the following topics: .NET Framework Multi-Targeting for ASP.NET Web Projects ASP.NET Side-by-Side Execution Overview How to: Host Web Applications That Use Different Versions of the .NET Framework on the Same Server How to: Deploy Web Site Projects Targeted for Earlier Versions of the .NET Framework

    Read the article

  • Why can I query with an int but not a string here? PHP MySQL Datatypes

    - by CT
    I am working on an Asset Database problem. I receive $id from $_GET["id"]; I then query the database and display the results. This works if my id is an integer like "93650" but if it has other characters like "wci1001", it displays this MySQL error: Unknown column 'text' in 'where clause' All fields in tables are of type: VARCHAR(50) What would I need to do to be able to use this query to search by id that includes other characters? Thank you. <?php <?php /* * ASSET DB FUNCTIONS SCRIPT * */ # connect to database function ConnectDB(){ mysql_connect("localhost", "asset_db", "asset_db") or die(mysql_error()); mysql_select_db("asset_db") or die(mysql_error()); } # find asset type returns $type function GetAssetType($id){ $sql = "SELECT asset.type From asset WHERE asset.id = $id"; $result = mysql_query($sql) or die(mysql_error()); $row = mysql_fetch_assoc($result); $type = $row['type']; return $type; } # query server returns $result (sql query array) function QueryServer($id){ $sql = " SELECT asset.id ,asset.company ,asset.location ,asset.purchaseDate ,asset.purchaseOrder ,asset.value ,asset.type ,asset.notes ,server.manufacturer ,server.model ,server.serialNumber ,server.esc ,server.warranty ,server.user ,server.prevUser ,server.cpu ,server.memory ,server.hardDrive FROM asset LEFT JOIN server ON server.id = asset.id WHERE asset.id = $id "; $result = mysql_query($sql); return $result; } # get server data returns $serverArray function GetServerData($result){ while($row = mysql_fetch_assoc($result)) { $id = $row['id']; $company = $row['company']; $location = $row['location']; $purchaseDate = $row['purchaseDate']; $purchaseOrder = $row['purchaseOrder']; $value = $row['value']; $type = $row['type']; $notes = $row['notes']; $manufacturer = $row['manufacturer']; $model = $row['model']; $serialNumber = $row['serialNumber']; $esc = $row['esc']; $warranty = $row['warranty']; $user = $row['user']; $prevUser = $row['prevUser']; $cpu = $row['cpu']; $memory = $row['memory']; $hardDrive = $row['hardDrive']; $serverArray = array($id, $company, $location, $purchaseDate, $purchaseOrder, $value, $type, $notes, $manufacturer, $model, $serialNumber, $esc, $warranty, $user, $prevUser, $cpu, $memory, $hardDrive); } return $serverArray; } # print server table function PrintServerTable($serverArray){ $id = $serverArray[0]; $company = $serverArray[1]; $location = $serverArray[2]; $purchaseDate = $serverArray[3]; $purchaseOrder = $serverArray[4]; $value = $serverArray[5]; $type = $serverArray[6]; $notes = $serverArray[7]; $manufacturer = $serverArray[8]; $model = $serverArray[9]; $serialNumber = $serverArray[10]; $esc = $serverArray[11]; $warranty = $serverArray[12]; $user = $serverArray[13]; $prevUser = $serverArray[14]; $cpu = $serverArray[15]; $memory = $serverArray[16]; $hardDrive = $serverArray[17]; echo "<table width=\"100%\" border=\"0\"><tr><td style=\"vertical-align:top\"><table width=\"100%\" border=\"0\"><tr><td colspan=\"2\"><h2>General Info</h2></td></tr><tr id=\"hightlight\"><td>Asset ID:</td><td>"; echo $id; echo "</td></tr><tr><td>Company:</td><td>"; echo $company; echo "</td></tr><tr id=\"hightlight\"><td>Location:</td><td>"; echo $location; echo "</td></tr><tr><td>Purchase Date:</td><td>"; echo $purchaseDate; echo "</td></tr><tr id=\"hightlight\"><td>Purchase Order #:</td><td>"; echo $purchaseOrder; echo "</td></tr><tr><td>Value:</td><td>"; echo $value; echo "</td></tr><tr id=\"hightlight\"><td>Type:</td><td>"; echo $type; echo "</td></tr><tr><td>Notes:</td><td>"; echo $notes; echo "</td></tr></table></td><td style=\"vertical-align:top\"><table width=\"100%\" border=\"0\"><tr><td colspan=\"2\"><h2>Server Info</h2></td></tr><tr id=\"hightlight\"><td>Manufacturer:</td><td>"; echo $manufacturer; echo "</td></tr><tr><td>Model:</td><td>"; echo $model; echo "</td></tr><tr id=\"hightlight\"><td>Serial Number:</td><td>"; echo $serialNumber; echo "</td></tr><tr><td>ESC:</td><td>"; echo $esc; echo "</td></tr><tr id=\"hightlight\"><td>Warranty:</td><td>"; echo $warranty; echo "</td></tr><tr><td colspan=\"2\">&nbsp;</td></tr><tr><td colspan=\"2\"><h2>User Info</h2></td></tr><tr id=\"hightlight\"><td>User:</td><td>"; echo $user; echo "</td></tr><tr><td>Previous User:</td><td>"; echo $prevUser; echo "</td></tr></table></td><td style=\"vertical-align:top\"><table width=\"100%\" border=\"0\"><tr><td colspan=\"2\"><h2>Specs</h2></td></tr><tr id=\"hightlight\"><td>CPU:</td><td>"; echo $cpu; echo "</td></tr><tr><td>Memory:</td><td>"; echo $memory; echo "</td></tr><tr id=\"hightlight\"><td>Hard Drive:</td><td>"; echo $hardDrive; echo "</td></tr><tr><td colspan=\"2\">&nbsp;</td></tr><tr><td colspan=\"2\">&nbsp;</td></tr><tr><td colspan=\"2\"><h2>Options</h2></td></tr><tr><td colspan=\"2\"><a href=\"#\">Edit Asset</a></td></tr><tr><td colspan=\"2\"><a href=\"#\">Delete Asset</a></td></tr></table></td></tr></table>"; } ?> __ /* * View Asset * */ # include functions script include "functions.php"; $id = $_GET["id"]; if (empty($id)):$id="000"; endif; ConnectDB(); $type = GetAssetType($id); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Wagman IT Asset</title> </head> <body> <div id="page"> <div id="header"> <img src="images/logo.png" /> </div> </div> <div id="content"> <div id="container"> <div id="main"> <div id="menu"> <ul> <table width="100%" border="0"> <tr> <td width="15%"></td> <td width="30%%"><li><a href="index.php">Search Assets</a></li></td> <td width="30%"><li><a href="addAsset.php">Add Asset</a></li></td> <td width="25%"></td> </tr> </table> </ul> </div> <div id="text"> <ul> <li> <h1>View Asset</h1> </li> </ul> <?php if (empty($type)):echo "<ul><li><h2>Asset ID does not match any database entries.</h2></li></ul>"; else: switch ($type){ case "Server": $result = QueryServer($id); $ServerArray = GetServerData($result); PrintServerTable($ServerArray); break; case "Desktop"; break; case "Laptop"; break; } endif; ?> </div> </div> </div> <div class="clear"></div> <div id="footer" align="center"> <p>&nbsp;</p> </div> </div> <div id="tagline"> Wagman Construction - Bridging Generations since 1902 </div> </body> </html>

    Read the article

  • Problem with richfaces ajax datatable + buttons

    - by Schyzotrop
    Hello i have another problem with RichFaces this is my application and it shows how i want it to work : http://www.screencast.com/users/Schyzotrop/folders/Jing/media/a299dc1e-7a10-440e-8c39-96b1ec6e85a4 this is video of some glitch that i can't solve http://screencast.com/t/MDFiMGMzY the problem is that when i am trying to press any buttons on others than 1st category it won't do anything IF 1st category has less rows than the one i am calling it from from 1st category it works always i am using follwoing code in jsp for collumns : <h:form id="categoryAttributeList"> <rich:panel> <f:facet name="header"> <h:outputText value="Category Attribute List" /> </f:facet> <rich:dataTable id="table" value="#{categoryAttributeBean.allCategoryAttribute}" var="cat" width="100%" rows="10" columnClasses="col1,col2,col2,col3"> <f:facet name="header"> <rich:columnGroup> <h:column>Name</h:column> <h:column>Description</h:column> <h:column>Category</h:column> <h:column>Actions</h:column> </rich:columnGroup> </f:facet> <rich:column filterMethod="#{categoryAttributeFilteringBean.filterNames}"> <f:facet name="header"> <h:inputText value="#{categoryAttributeFilteringBean.filterNameValue}" id="input"> <a4j:support event="onkeyup" reRender="table , ds" ignoreDupResponses="true" requestDelay="700" oncomplete="setCaretToEnd(event);" /> </h:inputText> </f:facet> <h:outputText value="#{cat.name}" /> </rich:column> <rich:column filterMethod="#{categoryAttributeFilteringBean.filterDescriptions}"> <f:facet name="header"> <h:inputText value="#{categoryAttributeFilteringBean.filterDescriptionValue}" id="input2"> <a4j:support event="onkeyup" reRender="table , ds" ignoreDupResponses="true" requestDelay="700" oncomplete="setCaretToEnd(event);" /> </h:inputText> </f:facet> <h:outputText value="#{cat.description}" /> </rich:column> <rich:column filterMethod="#{categoryAttributeFilteringBean.filterCategories}"> <f:facet name="header"> <h:selectOneMenu value="#{categoryAttributeFilteringBean.filterCategoryValue}"> <f:selectItems value="#{categoryAttributeFilteringBean.categories}" /> <a4j:support event="onchange" reRender="table, ds" /> </h:selectOneMenu> </f:facet> <h:outputText value="#{cat.categoryID.name}" /> </rich:column> <h:column> <a4j:commandButton value="Edit" reRender="pnl" action="#{categoryAttributeBean.editCategoryAttributeSetup}"> <a4j:actionparam name="categoryAttributeID" value="#{cat.categoryAttributeID}" assignTo="#{categoryAttributeBean.id}" /> <a4j:actionparam name="state" value="edit" /> <a4j:actionparam name="editId" value="#{cat.categoryAttributeID}" /> </a4j:commandButton> <a4j:commandButton reRender="categoryAttributeList" value="Delete" action="#{categoryAttributeBean.deleteCategoryAttribute}"> <a4j:actionparam name="categoryAttributeID" value="#{cat.categoryAttributeID}" assignTo="#{categoryAttributeBean.id}" /> </a4j:commandButton> </h:column> <f:facet name="footer"> <rich:datascroller id="ds" renderIfSinglePage="false"></rich:datascroller> </f:facet> </rich:dataTable> <rich:panel id="msg"> <h:messages errorStyle="color:red" infoStyle="color:green"></h:messages> </rich:panel> </rich:panel> </h:form> and here is code of my backing bean @EJB private CategoryBeanLocal categoryBean; private CategoryAttribute categoryAttribute = new CategoryAttribute(); private ArrayList<SelectItem> categories = new ArrayList<SelectItem>(); private int id; private int categoryid; // Actions public void newCategoryAttribute() { categoryAttribute.setCategoryID(categoryBean.findCategoryByID(categoryid)); categoryBean.addCategoryAttribute(categoryAttribute); FacesContext.getCurrentInstance().addMessage("newCategoryAttribute", new FacesMessage("CategoryAttribute " + categoryAttribute.getName() + " created.")); this.categoryAttribute = new CategoryAttribute(); } public void editCategoryAttributeSetup() { categoryAttribute = categoryBean.findCategoryAttributeByID(id); } public void editCategoryAttribute() { categoryAttribute.setCategoryID(categoryBean.findCategoryByID(categoryid)); categoryBean.updateCategoryAttribute(categoryAttribute); FacesContext.getCurrentInstance().addMessage("newCategoryAttribute", new FacesMessage("CategoryAttribute " + categoryAttribute.getName() + " edited.")); this.categoryAttribute = new CategoryAttribute(); } public void deleteCategoryAttribute() { categoryAttribute = categoryBean.findCategoryAttributeByID(id); categoryBean.removeCategoryAttribute(categoryAttribute); FacesContext.getCurrentInstance().addMessage("categoryAttributeList", new FacesMessage("CategoryAttribute " + categoryAttribute.getName() + " deleted.")); this.categoryAttribute = new CategoryAttribute(); } // Getters public CategoryAttribute getCategoryAttribute() { return categoryAttribute; } public List<CategoryAttribute> getAllCategoryAttribute() { return categoryBean.findAllCategoryAttributes(); } public ArrayList<SelectItem> getCategories() { categories.clear(); List<Category> allCategory = categoryBean.findAllCategory(); Iterator it = allCategory.iterator(); while (it.hasNext()) { Category cat = (Category) it.next(); SelectItem select = new SelectItem(); select.setLabel(cat.getName()); select.setValue(cat.getCategoryID()); categories.add(select); } return categories; } public int getId() { return id; } public int getCategoryid() { return categoryid; } // Setters public void setCategoryAttribute(CategoryAttribute categoryAttribute) { this.categoryAttribute = categoryAttribute; } public void setId(int id) { this.id = id; } public void setCategoryid(int categoryid) { this.categoryid = categoryid; } and here is filtering bean : @EJB private CategoryBeanLocal categoryBean; private String filterNameValue = ""; private String filterDescriptionValue = ""; private int filterCategoryValue = 0; private ArrayList<SelectItem> categories = new ArrayList<SelectItem>(); public boolean filterNames(Object current) { CategoryAttribute currentName = (CategoryAttribute) current; if (filterNameValue.length() == 0) { return true; } if (currentName.getName().toLowerCase().contains(filterNameValue.toLowerCase())) { return true; } else { System.out.println("name"); return false; } } public boolean filterDescriptions(Object current) { CategoryAttribute currentDescription = (CategoryAttribute) current; if (filterDescriptionValue.length() == 0) { return true; } if (currentDescription.getDescription().toLowerCase().contains(filterDescriptionValue.toLowerCase())) { return true; } else { System.out.println("desc"); return false; } } public boolean filterCategories(Object current) { if (filterCategoryValue == 0) { getCategories(); filterCategoryValue = new Integer(categories.get(0).getValue().toString()); } CategoryAttribute currentCategory = (CategoryAttribute) current; if (currentCategory.getCategoryID().getCategoryID() == filterCategoryValue) { return true; } else { System.out.println(currentCategory.getCategoryID().getCategoryID() + "cate" + filterCategoryValue); return false; } } public ArrayList<SelectItem> getCategories() { categories.clear(); List<Category> allCategory = categoryBean.findAllCategory(); Iterator it = allCategory.iterator(); while (it.hasNext()) { Category cat = (Category) it.next(); SelectItem select = new SelectItem(); select.setLabel(cat.getName()); select.setValue(cat.getCategoryID()); categories.add(select); } return categories; } public String getFilterDescriptionValue() { return filterDescriptionValue; } public String getFilterNameValue() { return filterNameValue; } public int getFilterCategoryValue() { return filterCategoryValue; } public void setFilterDescriptionValue(String filterDescriptionValue) { this.filterDescriptionValue = filterDescriptionValue; } public void setFilterNameValue(String filterNameValue) { this.filterNameValue = filterNameValue; } public void setFilterCategoryValue(int filterCategoryValue) { this.filterCategoryValue = filterCategoryValue; } unfortunetly i can't even imagine what could cause this problem that's why i even made videos to help u understand my problem thanks for help!

    Read the article

  • PHP self form validation

    - by Jordan Pagaduan
    <?php function VerifyForm(&$values, &$errors) { if (strlen($values['fname']) == 0) $errors['fname'] = 'Enter First Name'; if (strlen($values['lname']) == 0) $errors['lname'] = 'Enter Last Name'; if (strlen($values['mname']) == 0) $errors['mname'] = 'Enter Middle Name'; if (strlen($values['address']) == 0) $errors['address'] = 'Enter Address'; if (strlen($values['terms']) == 0) $errors['terms'] = 'Please Read Terms and Agreement and Check the box.'; if (!ereg('.*@.*\..{2,4}', $values['email'])) $errors['email'] = 'Email address invalid'; else if (strlen($values['email']) < 0) $errors['email'] = 'Enter Email Address'; return (count($errors) == 0); } function DisplayForm($values, $errors) { ?> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GIA Soap » Products » Customer Informations</title> <link href="stylesheet/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js_files/jquery.js"></script> <script type="text/javascript" src="js_files/sliding_effect.js"></script> <script type="text/javascript" src="js_files/slideshow.js"></script> </head> <body> <div class="bg_top"> <div class="bg_bottom"> <div class="wrapper"> <div class="header"> <div class="logo"> </div> <div class="logo_text"> <div class="logo_head_text">Gia Soap Making</div> <div class="logo_sub_text">Sub text here</div> </div> </div> <div class="h_nav"> <div class="h_nav_dash"> </div> </div> <div class="container"> <div class="content_term"> <div class="content_terms"> <br /> <h1><p>Customer Information</p></h1><br /> <p>Please the following correctly.</p> <div class="customer_info"> <?php if (count($errors) > 0) echo "<p>There were some errors in your submitted form, please correct them and try again.</p>"; ?> <form method="post" action="<?= $_SERVER['PHP_SELF'] ?>"> <!-- hidden values --> <input type="hidden" value="<?php echo $papaya; ?>" name="papaya" /> <input type="hidden" value="<?php echo $carrot; ?>" name="carrot" /> <input type="hidden" value="<?php echo $guava; ?>" name="guava" /> <label for="customer_fname">First Name (<i>Required</i>)</label> <input type="text" class="textbox" id="customer_fname" name="customer_fname" value="<?= htmlentities($values['fname']) ?>" /> <span class="error_msg"><?= $errors['fname'] ?></span> <label for="customer_lname">Last Name (<i>Required</i>)</label> <input type="text" class="textbox" id="customer_fname" name="customer_fname" value="<?= htmlentities($values['lname']) ?>" /> <span class="error_msg"><?= $errors['lname'] ?></span> <label for="customer_mname">Middle Name (<i>Required</i>)</label> <input type="text" class="textbox" id="customer_fname" name="customer_fname" value="<?= htmlentities($values['mname']) ?>" /> <span class="error_msg"><?= $errors['mname'] ?></span> <label for="customer_add">Address (<i>Required : Complete Address Please</i>)</label> <input type="text" class="textbox" id="customer_add" name="customer_add1" value="<?= htmlentities($values['address']) ?>" /><br /> <input type="text" class="textbox" id="customer_add" name="customer_add2" /><br /> <input type="text" class="textbox" id="customer_add" name="customer_add3" /> <span class="error_msg"><?= $errors['address'] ?></span> <label for="customer_email">Email Address (<i>Required</i>)</label> <input type="text" class="textbox" id="customer_email" name="customer_email" value="<?= htmlentities($values['email']) ?>" /> <span class="error_msg"><?= $errors['email'] ?></span> <label for="customer_phone">Phone Number </label> <input type="text" class="textbox" id="customer_phone" name="customer_phone" /> <label for="customer_mobile">Mobile Number </label> <input type="text" class="textbox" id="customer_mobile" name="customer_mobile" /> <br /><br /> <div class="terms"> <center> <h1>Terms and Agreement</h1><br /> <p>Please read the following.</p><br /> </div> <br /> <input type="checkbox" name="terms" value="<?= htmlentities($values['terms']) ?>" /> I Read the Terms and Agreement<br /><br /> <span class="error_msg"><?= $errors['terms'] ?></span> <input type="submit" value="Send Order" class="prod_subbtn" /> </center> </form> </div> </div> </div> <div class="clear"></div> </div> <?php include ('includes/footer.php'); ?> </div> </div> </div> </body> </html> <?php } function ProcessForm($values) { $papaya = $_POST['papaya']; $carrot = $_POST['carrot']; $guava = $_POST['guava']; $fname = $_POST['fname']; $lname = $_POST['lname']; $mname = $_POST['mname']; $address = $_POST['address']; } if ($_SERVER['REQUEST_METHOD'] == 'POST') { $formValues = $_POST; $formErrors = array(); if (!VerifyForm($formValues, $formErrors)) DisplayForm($formValues, $formErrors); else ProcessForm($formValues); } else DisplayForm(null, null); ?> The output is: [link text]1 Problem the value that I put is can be seen by users.

    Read the article

  • Big task - problems with page refresh and ajax

    - by user1830414
    I have a navigation which load dynamically content via ajax. But if I refresh the page or visit another url and go back the current content is away and I see the old content under the first menu tab. Now I have to solve this problem. The index.php include the elements header_registrated.inc.php, navigation.inc.php and main_container.inc.php index.php: <?php include("inc/incfiles/header_registrated.inc.php"); ?> <?php if (!isset($_SESSION["userLogin"])) { echo "<meta http-equiv=\"refresh\" content=\"0; url=http://localhost/project\">"; } else { echo ""; } ?> <?php include("inc/incfiles/navigation.inc.php"); ?> <?php include("inc/incfiles/main_container.inc.php"); ?> <?php include("inc/incfiles/footer.inc.php"); ?> header_registrated.inc.php: <?php include ("inc/scripts/mysql_connect.inc.php"); session_start(); $user = $_SESSION["userLogin"]; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>title</title> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="js/framework/jquery.js"></script> <script language="JavaScript" src="js/dropdown/window.js"></script> <script language="JavaScript" src="js/navigation/navigation.js"></script> </head> <body> </body> navigation.inc.php: <div class="navigation"> <ul> <li id="1"> <div id="menuImage1" class="menuImage"></div> <div class="menuText"><p>Punkt 1</p></div> <div class="navigationDart"></div> </li> <li id="2"> <div id="menuImage2" class="menuImage"></div> <div class="menuText"><p>Punkt 2</p></div> </li> <li id="3"> <div id="menuImage3" class="menuImage"></div> <div class="menuText"><p>Punkt 3</p></div> </li> <li id="4"> <div id="menuImage4" class="menuImage"></div> <div class="menuText"><p>Punkt 4</p></div> </li> <li id="5"> <div id="menuImage5" class="menuImage"></div> <div class="menuText"><p>Punkt 5</p></div> </li> <li id="6"> <div id="menuImage6" class="menuImage"></div> <div class="menuText"><p>Punkt 6</p></div> </li> </ul> </div> main_container.inc.php: <div class="mainContainer"> <div class="containerHeader"> <div class="contentHeader"> </div> </div> <div class="contentContainer"> <div class="content"> </div> <div class="advertisement"> </div> </div> </div> Now the divs content, cnotentHeader and advertisement (in file main_content.inc.php) is filled via ajax. Also the navigation has some jquery effects which also have to be the same after page refresh. navigation.js: $(document).ready(function() { $.get('inc/incfiles/content_container/header/1.php', function(data) { $('.contentHeader').html(data); }); $.get('inc/incfiles/content_container/content/1.php', function(data) { $('.content').html(data); }); $.get('inc/incfiles/content_container/advertisement/1.php', function(data) { $('.advertisement').html(data); }); var current = '1.php'; $(".navigation li").click(function() { var quelle = $(this).attr('id') + ".php"; // the current content doesn't load again if(current === quelle) { return; } current = quelle; // content $(".content").fadeOut(function() { $(this).load("inc/incfiles/content_container/content/" + quelle).fadeIn('normal'); }) // advertisement $(".advertisement").fadeOut(function() { $(this).load("inc/incfiles/content_container/advertisement/" + quelle).fadeIn('normal'); }) // header $(".contentHeader").fadeOut(function() { $(this).load("inc/incfiles/content_container/header/" + quelle).fadeIn('normal'); }) }); $(".navigation li").click(function() { $(".menuImage").removeClass("menuImageActive1"); $(".menuImage").removeClass("menuImageActive2"); $(".menuImage").removeClass("menuImageActive3"); $(".menuImage").removeClass("menuImageActive4"); $(".menuImage").removeClass("menuImageActive5"); $(".menuImage").removeClass("menuImageActive6"); }); $("#1").mousedown(function() { $("#menuImage1").addClass("menuImageClick1"); // new class on mouse button press }); $("#1").mouseup(function() { $("#menuImage1").removeClass("menuImageClick1"); //remove class after mouse button release }); $("#1").click(function() { $("#menuImage1").addClass("menuImageActive1"); }); $("#2").mousedown(function() { $("#menuImage2").addClass("menuImageClick2"); // new class on mouse button press }); $("#2").mouseup(function() { $("#menuImage2").removeClass("menuImageClick2"); //remove class after mouse button release }); $("#2").click(function() { $("#menuImage2").addClass("menuImageActive2"); }); $("#3").mousedown(function() { $("#menuImage3").addClass("menuImageClick3"); // new class on mouse button press }); $("#3").mouseup(function() { $("#menuImage3").removeClass("menuImageClick3"); //remove class after mouse button release }); $("#3").click(function() { $("#menuImage3").addClass("menuImageActive3"); }); $("#4").mousedown(function() { $("#menuImage4").addClass("menuImageClick4"); // new class on mouse button press }); $("#4").mouseup(function() { $("#menuImage4").removeClass("menuImageClick4"); //remove class after mouse button release }); $("#4").click(function() { $("#menuImage4").addClass("menuImageActive4"); }); $("#5").mousedown(function() { $("#menuImage5").addClass("menuImageClick5"); // new class on mouse button press }); $("#5").mouseup(function() { $("#menuImage5").removeClass("menuImageClick5"); //remove class after mouse button release }); $("#5").click(function() { $("#menuImage5").addClass("menuImageActive5"); }); $("#6").mousedown(function() { $("#menuImage6").addClass("menuImageClick6"); // new class on mouse button press }); $("#6").mouseup(function() { $("#menuImage6").removeClass("menuImageClick6"); //remove class after mouse button release }); $("#6").click(function() { $("#menuImage6").addClass("menuImageActive6"); }); $("#1").click(function(){ $(".navigationDart").animate({ top: "16px" }, 500 ); }); $("#2").click(function(){ $(".navigationDart").animate({ top: "88px" }, 500 ); }); $("#3").click(function(){ $(".navigationDart").animate({ top: "160px" }, 500 ); }); $("#4").click(function(){ $(".navigationDart").animate({ top: "232px" }, 500 ); }); $("#5").click(function(){ $(".navigationDart").animate({ top: "304px" }, 500 ); }); $("#6").click(function(){ $(".navigationDart").animate({ top: "376px" }, 500 ); }); }); My idea was it to work with if(isset($_SESSION['ajaxresponse'])) but I don't no how to do this. Please help me. I have the feeling that I've searched the whole web to find an answer.

    Read the article

< Previous Page | 46 47 48 49 50 51  | Next Page >