SWFUpload - laddar upp flera filer samtidigt

http://www.codeodyssey.se/upload/resource/blog/SWFUpload(1).png

Vi söker efter ett bra sätt att kunna ladda upp flera filer samtidigt till en server. Innan har jag bara hört talas om att det går att göra med komponenter i Java, men nu har jag fått ett nytt tips som verkar väldigt lovande.

Per-Mattias på Paltkoma tipsar om att de själva använder SWFUpload till filuppladdning. Har kollat in demot och det verkar riktigt trevligt.

Det handlar alltså om flash och javascript-baserad uppladdning som visar progress-bar för varje fil man valt. Ifall inte flash finns tillgängligt hos användaren visas istället en klassisk uppladdare i html. SWFUpload är utvecklat av Mammon.

By Jesper Lind

TinyMCE med AJAX och partial update

Uppdatering! Jag har nu gjort ett fullständigt exempel på hur man kan använda TinyMCE med Ajax. Länk finns här.

Har kört ASP.NET AJAX nu i en vecka och testat på UpdatePanels. Jag hade textruta med tillhörande html-editor (TinyMCE) och vid delvis uppdatering så laddades inte editorn igen. Lösningen som funkade för mig hittade jag på Moxiecode.

Först så laddar jag in själva biblioteket vid Page_Load()

//Ladda tinyMCE
HtmlGenericControl IncludeTinyMCE = new HtmlGenericControl("script");
IncludeTinyMCE.Attributes.Add("type", "text/javascript");
IncludeTinyMCE.Attributes.Add("src", "js/tiny_mce/tiny_mce.js");
this.Page.Header.Controls.Add(IncludeTinyMCE);

Efter partial upload på UpdatePanel så kallas följande funktion. Jag fick lägga anropet till den i en specialfunktion för animeringen av min UpdatePanel. Men hos Moxiecode föreslår de följande registrering.

ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "InitTiny();", true);

I funktionen som ritar om text-editor fick jag även lägga till en extra rad som tar bort editorn efter den körs. Annars ritades en ny upp vid varje uppdatering. Det ser kanske konstigt ut att jag kör "mceRemoveControl" precis efter den lagts till men "mceAddControl", men det var det som funkade i mitt fall.

function InitTiny()
{
tinyMCE.execCommand('mceAddControl', false, 'ctl00$mainContentPH$productTabs$tpProductInfo$fvProduct$textBox');
tinyMCE.execCommand('mceRemoveControl', true, 'ctl00$mainContentPH$productTabs$tpProductInfo$fvProduct$textBox');
}

Sökvägen ser ganska lång ut men det beror på att min textarea låg inne i en Tabs-kontroll.

By Jesper Lind

Utvärdering av textarea-editorer

Läste nyligen hos media:screen att Peter Kranz har gjort en utvärdering av textarea-editorer och rangordnat dem enligt hur bra de klarar av att formatera giltig HTML. Totalt åtta olika editorer finns med i testen, sju av dem är så kallade WYSIWYG-editorer och en av dem är en WYSIWYM-editor.

Den senare beteckningen (What You See Is What You Mean) var något nytt för mig men låter definitivt som något att kolla vidare på. Om jag har förstått det rätt så ska denna nya typ av editor generera XHTML och separera innehåll från formatering i större mån. Läs mer om den nya typen av editor eller testa en demo-version av WYMeditor som hör till denna kategori.

Med på Peters test finns TinyMCE som jag installerade i mitt blogg-system nyligen. Den kom bara på tredje plats i testen pga inkorrekt nästlade listor, inget stöd för tabellcaptions och avsaknad av lang-attributet. I nästa version av editor (2.1) kommer dock dessa problem vara lösta meddelar utvecklarna på Moxiecode i en kommentar till testet.

By Jesper Lind

Välj ur select-lista med två knapptryckningar

Långa select-listor kan vara jobbiga för användarna, speciellt om många av valen börjar på samma bokstav. För att snabbhoppa till rätt val kan man ju skriva in ett första tecken. Då får man endast upp det första valet i listan på det tecken man matat in. Sen känns det naturligt att kunna ange ett tecken till, och fortsätta selekteringen. Men det går ju inte... Då hoppar man till en annan sektion av listan som börjar på den nya bokstaven.

Hittade dock en artikel som säger sig ha en lösning: Selecting an option in dropdownlist using more than one Character

By Jesper Lind

Rundade hörn med CSS

Jag har tidigare skrivit om hur man kan göra rundade hörn på html objekt utan att använda bilder. I den posten hänvisade jag till Nifty Corners.

Nu har Alessandro Fulciniti som ligger bakom tekniken släppt en ny uppdaterad version som han kallar Nifty Corners Tube. Nu kan man även skapa kolumner knappar och hela layouter med scriptet. Funktionaliteten finns i ett javascript som man kan ladda ner gratis och är släppt under GNU GPL licens.

Jag tycker Nifty Corners Tube är ett väldigt bra skript som jag själv har testat. Det finns dock mängder av andra tekniker och SmileCat.com har sammanställt en fin lista på andra sätt att göra rundade hörn.

By Jesper Lind

Inkludera Javascript i head med Asp.Net

Så här gör man för att inkludera Javascript inuti head-taggen genom kod i Asp.Net.

HtmlGenericControl Include = new HtmlGenericControl("script"); Include.Attributes.Add("type", "text/javascript"); Include.Attributes.Add("src","FilSomSkaInkluderas.js"); this.Page.Header.Controls.Add(Include);

Eller för att lägga till en kodsnutt.

HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attributes.Add("type", "text/javascript");
Include2.InnerHtml = "alert('JavaScript inuti Page Header');"; this.Page.Header.Controls.Add(Include2);

Glöm inte att skriva in runat-attributet på head-taggen

<head runat="server">

Hittade även en artikel om hur man kan få Visual Studio att gruppera javascriptfiler under .aspx-filen i Solution Explorer. Krävs dock ett tillägg i register-nycklarna. Snälla VS utvecklare - lägg till detta direkt i programmet.

By Jesper Lind

Behålla position på scrollbars

Det jag sökte var att kunna behålla positionen på scrollbars efter postback, men bara på vissa knappar. I Asp.Net kan man ju använda SmartNavigation till detta men det fungerar bara i IE (när jag provade senast) och ger en del oväntade buggar som bieffekt. Sen finns det också MaintainScrollPositionOnPostback, som man kan lägga i @Page-direktivet men då sker ompositionering på alla länkar och knappar som utlöser postback. Ibland vill man bara att vissa typer av postningar ska göra det.

Lösningen som använder javascript och två gömda input-fält hittade jag i detta forumet skrivet av Fredrik Normén

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<title>Scrollbar position</title>
<script language="javascript">
function SetScrollerPosition()
{
if (document.getElementById("XPos").value != "")
{
var x = document.getElementById("XPos").value;
var y = document.getElementById("YPos").value;
window.scrollTo(x, y);
}

document.getElementById("XPos").value = "0";
document.getElementById("YPos").value = "0";
}

function GetScollerPosition()
{
var scrollX, scrollY;

if (document.all)
{
if (!document.documentElement.scrollLeft)
scrollX = document.body.scrollLeft;
else
scrollX = document.documentElement.scrollLeft;

if (!document.documentElement.scrollTop)
scrollY = document.body.scrollTop;
else
scrollY = document.documentElement.scrollTop;
}
else
{
scrollX = window.pageXOffset;
scrollY = window.pageYOffset;
}

document.getElementById("XPos").value = scrollX;
document.getElementById("YPos").value = scrollY;
}
</script>
</head>
<body onload="SetScrollerPosition();">
<form id="form1" runat="server">
<div>
<asp:GridView …>
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton
OnClientClick="GetScollerPosition();"
ID="LinkButton1"
runat="server"
CommandName="Edit"
Text="Edit"></asp:LinkButton>
<asp:LinkButton
ID="LinkButton2"
runat="server"
CommandName="Select"
Text="Select"></asp:LinkButton>
<asp:LinkButton
ID="LinkButton3"
runat="server"
CommandName="Delete"
Text="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<input type="hidden" id="XPos" runat="server" />
<input type="hidden" id="YPos" runat="server" />
</form>
</body>
</html>

Under mitt googlande efter detta hittade jag även ett annat intressanta demo på samma ämne. Detta rullar ner en div med overflow till nedersta positionen så fort man lägger till någon i den. Perfekt om man ska göra en AJAX-chatt eller liknande. Detta kommer jag igång att jag försökt lösa tidigare utan lycka.

By Jesper Lind

Dubbla textrutor, knappar och submit

Jag kommer här skriva lite om automatisk postback vid entertryckning. Detta blir lite snabbare anteckningar så att jag ska kunna skriva om inlägget bättre senare.
public partial class TheClass: System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //Om du vill kunna ha fler än en textruta och submitknapp så måste först en bugg i asp.net forceras. //Lösning - lägg till en hiddenfield längst upp på sidan. string script = "", RegisterStartupScript("submitHack",script); //En sökruta ska trigga en javascript event på enter, fast inte submitta huvudknappen i loginformuläret som ligger längre ner. tbSearch.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13){ custom_search();return false;}"); } }
By Jesper Lind