Yshopnoosa.com

Hur man skapar Ajax aktiverade webbdelar

Hur man skapar Ajax aktiverade webbdelar

Asynchronous JavaScript och XML, eller AJAX, är en kombination av olika programmering tekniker. Dessa språk består av CSS, DOM, XML, XSLT och JavaScript. På grund av dess olika komponenter, kan AJAX integrera med alla typer av Web miljöer skapa tilltalande effekter på någon hemsida. AJAX-applikationer förbättra utformningen av traditionella webbplatser, gör webbsidor begära från servern bara de uppdaterade delarna och inte hela sidan reload.

Instruktioner

1 Öppna Visual Studio 2005. Välj "Nytt" på Arkiv-menyn, och klicka sedan på "Project." Välj "Windows" i projekttyper under Visual Basic- eller C#. Välj "Class Library" i fönstret mallar och mata in "Sample.SayHello" som namn för ditt projekt.

2 Välj "Class1.cs" i Solution Explorer att byta namn på den första klassen. Högerklicka på filen, välja Byt namn och mata in "SayHelloWebPart" som det nya filnamnet. Klicka på "Lägg till referens" på projekt-menyn. Välj "System.Web.Extensions" i dialogrutan Lägg till referens på fliken .NET och klicka "OK". Upprepa de sista två stegen för namnområdet System.Web. Lägg till en hänvisning till System.Web.UI.WebControls i avsnittet referenser i klassfil och bygga två exklusiva variablerna, i förekommande fall, för UI. Här är hur koden ska se ut:

med hjälp av systemet.

använder System.Text;

använder System.Web.UI;

med hjälp av System.Web.UI.WebControls;

använder System.Web.UI.WebControls.WebParts;

namnområdet Sample.SayHello

{

allmän klass SayHelloWebPart: webbdelen

{

private Label displayName;

private TextBox inputName;

}

}

I vissa fall som detta är bara en variabel tillämplig på avsnittet UI.

3 Kopiera och klistra in koden nedan i filen SayHelloWebPart.cs att åsidosätta funktionen CreateChildControls:

skyddade omställning void CreateChildControls()

{

Base. CreateChildControls();

Fix för UpdatePanel postback beteende.

EnsurePanelFix();

LinkButton sayHello = nya LinkButton();

UpdatePanel refreshName = ny UpdatePanel();

ScriptManager scriptHandler = ny ScriptManager();

displayName = nya Label();

inputName = nya TextBox();

Ställa in egenskaper för kontroll.

this.displayName.ID = "displayName";

this.displayName.Text = "Hej!";

this.inputName.ID = "inputName";

sayHello.ID = "sayHello";

sayHello.Text = "Säga hej";

scriptHandler.ID = "scriptHandler";

refreshName.ID = "refreshName";

refreshName.UpdateMode = UpdatePanelUpdateMode.Conditional;

refreshName.ChildrenAsTriggers = sant;

Lägg till EventHandler knappen.

sayHello.Click += nya EventHandler(ClickHandler);

Lägga till förbrukaren gräns flat (UI) kontroller UpdatePanel.

refreshName.ContentTemplateContainer.Controls.Add(this.inputName);

refreshName.ContentTemplateContainer.Controls.Add(sayHello);

refreshName.ContentTemplateContainer.Controls.Add(this.displayName);

Kontrollen ScriptManager måste läggas först.

Detta. Controls.Add(scriptHandler);

Detta. Controls.Add(refreshName);

}

Nu, kopiera och klistra in denna kod i filen SayHelloWebPart.cs att bygga UI och hantering av händelsen funktion:

privata void ClickHandler (objekt avsändare, EventArgs args)

{

this.displayName.Text = "Hej,"

+ this.inputName.Text.ToString() + ".";

}

4 Kopiera och klistra in denna kod i filen SayHelloWebPart.cs till ändra skript för att säkerställa korrekt doPostBack() beteende:

privata void EnsurePanelFix()

{

om (detta. Page.Form! = null)

{

String fixupScript = @"

_spBodyOnLoadFunctionNames.push(""_initFormActionAjax"");

function _initFormActionAjax()

{

if (_spEscapedFormAction == document.forms[0].action)

{

document.forms[0]._initialAction =

document.forms[0].action;

}

}

var RestoreToOriginalFormActionCore =

RestoreToOriginalFormAction;

RestoreToOriginalFormAction = function()

{

if (_spOriginalFormAction != null)

{

RestoreToOriginalFormActionCore();

document.forms[0]._initialAction =

document.forms[0].action;

}

}";

ScriptManager.RegisterStartupScript (detta,

typeof(SayHelloWebPart), "UpdatePanelFixup",

fixupScript, true);

}

}

Tips & varningar

  • Flytta "webpartmanager" i form-taggen att säkerställa korrekt visning av alla dess tillhörande komponenter.
  • Ändra huvud-sektionen i din huvudsida och se till att alla dina tag titlar på samma rad att garantera korrekt visning.