[Asp.Net] ajax webapplicatie blijft fullpage refresh doen * - Softwareontwikkeling

zondag 26 augustus 2007 16:48

Acties:

Flits!

Topicstarter

Ik ben momenteel bezig met mijn nieuwe site.
Hiervoor wil ik Ajax gebruiken, om de gebruikerservaring te verbeteren.

Momenteel loop ik echter tegen het probleem aan dat mijn pagina steeds een volledige refresh blijft doen. Terwijl ik een partial update wil.

In een directory op de server ga ik na welke directory's hier binnen zitten. Deze directory's stellen elk een album voor met foto's daarbinnen.
In List_Albums() wordt deze lijst aangemaakt. En als menuitems in de lijst albumlist geplaatst. Ze krijgen allemaal een onclick event mee die het stukje javascript op pagina oproept.

Zodra de gebruiker op het menuitem klikt. Wordt Get_Album_Thumbs(name) opgeroepen. Waar name de naam is van de directory is op de server (en dus ook het album met foto's).
Dit stukje javascript moet een partial update verzorgen. En roept UpdatePanel1_Load(object sender, EventArgs e) op de server aan.Welke op zijn beurt weer View_Album(string albumname) aanroept. Waarbij het argument albumname dus bekend moet zijn.

Dit werkt allemaal. Echter krijg ik steeds een fullpage refresh lijkt het. Terwijl ik een partialupdate wil.

Default.aspx:

HTML:

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

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<!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 runat="server">
    <title>Kleurtjes.Net</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="lightbox.css" rel="stylesheet" type="text/css" media="screen"/>
    
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <script type="text/javascript" src="js/effects.js"></script>
    
    <script type="text/javascript" language="javascript">
    <!--
    function Get_Album_Thumbs(name)
    {
        x = document.getElementById("TextBox1");
        x.value = name; //De naam van het album wordt in de textbox geplaatst, zodat we deze kunnen gebruiken aan de serverside
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm._doPostBack('UpdatePanel1','');             
    }
    //-->
    </script>    
</head>


<body onload="initLightbox()">
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <!-- Normale Menu -->
        <div id="menu" runat="server">
            <ul id="menulist" runat="server">
                <li><a href="Default.aspx">Portfolio</a></li>
                <li><a href="Contact.aspx">Contact</a></li>
            </ul>
        </div>
        
        <!-- Album Menu -->
        <div id="albums" runat="server">
            <ul id="albumlist" runat="server">
                <!-- Inhoud hiervan wordt serverside gegenereerd -->
            </ul>
        </div>
        
        <!-- Thumbnail weergave -->
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">    
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>    
                <div id="content" runat="server">                    
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        
    </form>
</body>
</html>

Default.aspx.cs

C#:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.IO;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page 
{

    protected void Page_Load(object sender, EventArgs e)
    {
        List_Albums();
    }

    protected void UpdatePanel1_Load(object sender, EventArgs e)
    {
        View_Album(TextBox1.Text); //TextBox1.Text bevat de naam van het album wat geladen moet worden
    }

    protected void List_Albums()
    {
        //Alle folders binnen de map Photos zijn albums
        DirectoryInfo myDir = new DirectoryInfo(AppDomain.CurrentDomain.BaseDirectory + "\\Photos");
        DirectoryInfo[] myAlbums = myDir.GetDirectories();
        foreach (DirectoryInfo album in myAlbums) {
            albumlist.InnerHtml += "<li><a href='' onclick='Get_Album_Thumbs(\"" + album.ToString() + "\") '>" + album.ToString() + "</a></li>";
        }
    }

    protected void View_Album(string albumname)
    {
        content.InnerHtml += "<p>" + albumname + "</p>"; //content zit binnen de updatepanel.
        //Code om de thumbnails te laden komt hier. Deze is afhankelijk van albumname
    }
}

De site is hier te zien: http://kleurtjes.net/betasite/

Heb je liever vooraf, of achteraf, dat ik zeg dat ik geen flauw idee heb wat ik doe?

zondag 26 augustus 2007 17:49

Acties:

ThunderNet

Flits!

Topicstarter

Goed ik voel me nu heel dom
De fout zit in List_Albums()

C#:

1	albumlist.InnerHtml += "<li><a href='' onclick='Get_Album_Thumbs(\"" + album.ToString() + "\") '>" + album.ToString() + "</a></li>";

moest dus zonder href=''

Heb je liever vooraf, of achteraf, dat ik zeg dat ik geen flauw idee heb wat ik doe?

maandag 27 augustus 2007 09:50

Acties:

sopsop

[v] [;,,;] [v]

Heb je een specifieke reden waarom je niet van asp.net Ajax gebruik maakt?

't is nog vroeg. dat doe je wel..

[ Voor 18% gewijzigd door sopsop op 27-08-2007 09:51 ]

maandag 27 augustus 2007 09:52

Acties:

marko77

ThunderNet schreef op zondag 26 augustus 2007 @ 17:49:
Goed ik voel me nu heel dom
De fout zit in List_Albums()
C#:
1
albumlist.InnerHtml += "<li><a href='' onclick='Get_Album_Thumbs(\"" + album.ToString() + "\") '>" + album.ToString() + "</a></li>"; 
moest dus zonder href=''

de href weglaten werkt volgens mij niet in alle browsers. Netter is om de onclick een 'false' return te laten genereren.

Mijn rig

maandag 27 augustus 2007 10:10

Acties:

riezebosch

marko77 schreef op maandag 27 augustus 2007 @ 09:52:
[...]

de href weglaten werkt volgens mij niet in alle browsers. Netter is om de onclick een 'false' return te laten genereren.

Als je toch gebruik maakt van de onclick, waarom maak je dan gebruik van een <a>? Je kan ook de onclick van een div of span gebruiken en dan alles instellen in CSS.

Canon EOS 400D + 18-55mm F3.5-5.6 + 50mm F1.8 II + 24-105 F4L + 430EX Speedlite + Crumpler Pretty Boy Back Pack

maandag 27 augustus 2007 10:30

Acties:

crisp

Devver

Pixelated

Een <a> is hier toch wel degelijk handig, je kan de href namelijk gebruiken voor een non-JS fallback (link naar het plaatje zelf). Door vanuit de onclick handler false te returnen cancel je de default actie van het a-element.

Zonder href is het inderdaad nutteloos om hier een anchor voor te gebruiken.

Intentionally left blank

maandag 27 augustus 2007 15:03

Acties:

ThunderNet

Flits!

Topicstarter

Met href doet hij niet dus niet. Zonder wel. En ik wil dus dat er een stukje javascript wordt gerunt zodra ik op de link klik. En niet dat er een volledige postback gedaan wordt.

Heb je liever vooraf, of achteraf, dat ik zeg dat ik geen flauw idee heb wat ik doe?

dinsdag 28 augustus 2007 14:00

Acties:

DPLuS

code:

1	<a href="javascript:void(0)" onclick="myfunction(param1, param2)">linkje</a>

dinsdag 28 augustus 2007 14:34

Acties:

--MeAngry--

aka Qonstrukt

DPLuS schreef op dinsdag 28 augustus 2007 @ 14:00:
[...]

Ja, dit is dus net zo'n slecht voorbeeld. Aangezien we toch aan het voorkauwen zijn:

code:

1	<a href="LinkNaarStaticPagina.aspx" onclick="doeJeJavaScriptDing(); return false;">Clique</a>

[ Voor 15% gewijzigd door --MeAngry-- op 28-08-2007 14:35 ]

Tesla Model Y RWD (2024)

dinsdag 28 augustus 2007 15:59

Acties:

4of9

en als je een updatepanel wilt refreshen vanuit javascript moet je wel de juiste reference mee geven van de updatepanel

code:

1	__doPostBack('<%=UpdatePanel1.ClientID%>','');

oh en de doPostback van het Ajax framework is met 2 underscores.

Aspirant Got Pappa Lid | De toekomst is niet meer wat het geweest is...