combining javascript and asp.net 1

[Scally84]

Hi,

This is gonna be a long post but I hope you are so kind to read it.

I've read a lot of threads and websites about this topic but I don't seem to find a decent solution for my problem.
I have a webpage which uses a dropdownlist and some hidden fields to look up and sort data from a database. We'll call this webpage: "DocumentAdministration.aspx". When you select a value from the dropdownlist some results will be displayed. This is how the source code looks like:

'codebehind
Sub Page_Load()
        *fill DropDownList with data from database*

       'this way the page will already display some results when it is loaded
       ShowDocuments(1)
End Sub

Sub DropDownListDepts_SelectedIndexChanged(sender as Object, e as EventArgs)
	ShowDocuments(dropdownlistdepts.selecteditem.value)
End Sub

Public Function ShowDocuments (ID as integer)
        *create an sql statement where the data is looked up from the database with the ID*

        *add sort conditions to the sql statement using the hidden fields*
        
        *run sql statement*
End Function

'html
<asp:DropDownList id="DropDownListDepts" runat="server" OnSelectedIndexChanged="DropDownListDepts_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>

<% *show results* %>

On the following code you can see how I use hidden fields to sort the results:

'javascript
function sortListASC(fieldName)
{
	document.DocAdmin.sortField.value = fieldName;
	document.DocAdmin.sortDirection.value = "ASC";
	document.DocAdmin.FormsAction.value = "SORT";
	document.DocAdmin.submit();
}

function sortListDESC(fieldName)
{
	document.DocAdmin.sortField.value = fieldName;
	document.DocAdmin.sortDirection.value = "DESC";
	document.DocAdmin.FormsAction.value = "SORT";
	document.DocAdmin.submit();
}

function sortList(fieldName)
{
	sortFieldValue = document.DocAdmin.sortField.value;
	if(sortFieldValue == fieldName)
	{
		sortDirectionValue = document.DocAdmin.sortDirection.value;
		if(sortDirectionValue == "ASC")
		{
			sortListDESC(fieldName);
		}
		else
		{
			sortListASC(fieldName);
		}
	}
	else
	{
		sortListASC(fieldName);
	}
}

'html
<form id="DocAdmin" action="DocumentAdministration.aspx" method="post" runat="server">
        <input type="hidden" value="<%=Sort_Direction%>" name="sortDirection" />
        <input type="hidden" value="<%=Sort_Field%>" name="sortField" />

        *some other html code*

        <a style="COLOR: #000080; TEXT-DECORATION: none" href="javascript:sortList('F.USERNAME');"><b>User</b></a> <% If Sort_Field = "F.USERNAME" Then %><a href="javascript:sortList('F.USERNAME');"><img src="images/sorted_<%=Sort_Direction%>.gif" border="0" /></a> <% Else %><img height="10" src="images/sorted_none.gif" width="12" border="0" /> <% End If %></td>

        <% *show results* %>

</form>

So I'm using "a hrefs" above the results to change the sort directions. Everything works fine, except for the sorting. The hidden fields are filled with the right information, but when I select a sort direction the page is reloaded but the results aren't displayed anymore, until I select a new value from the DropDownList. Now I think the problem is that the javascript only reloads the "html" part of the webpage and not the "codebehind" part. Or it reloads only the "Page_load()" function of the codebehind but not the "ShowDocument()" function. So I've tried to add "window.location.reload()" into the javascript. Now the entire page (and codebehind!) is reloaded but the hidden fields aren't filled anymore so the sorting doesn't work either. Is there a possibility to call the function "ShowDocuments" with javascript? So in my javascript I should have something like "call ShowDocuments(value)". Or am I doing something wrong? I hope I didn't explain this too complicated. The main question is simply if it is possible to call an asp.net function with javascript, and if this isn't possible how I can resolve this.

Hope someone can help,

Thanks

 

[ca8msm]

What control are you using to display the results to the user?

--------------------------------------------------------------------------------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.

 

[Scally84]

this is how the results are displayed (with a table):

        <td nowrap="nowrap" bgcolor="<%=Row_Color%>">
                <%=objReaderDocs("USERNAME")%></td>
        <td nowrap="nowrap" bgcolor="<%=Row_Color%>">
        </td>

as you can see the results are stored is a DataReader which is called when displaying, the code for the DataReader is:

'codebehind
Public Function ShowDocuments(ID as integer)
        
        Forms_Query = " *sql statement* "
        
        objCommandDocs = New OleDbCommand(Forms_Query, objConnection)
End Function

'html
 <% i = 1 %><%objReaderDocs = objCommandDocs.ExecuteReader()
                                Do While objReaderDocs.Read()%>
								<%If i MOD 2 = 0 Then
									Row_Color = "FFFFFF"
								Else
									Row_Color = LIGHT_BLUE
								End If
								%>

 

[ca8msm]

Hmmm...this is a very "classic ASP" way of coding.

In ASP.NET the idea is that you seperate your coding from your display and don't use the ASP method of imbedding statements within your HTML such as <% If this then do that ...%>.

For the correct method of coding (in this case to show results to a user) check out the server controls available to you such as Repeaters, DataLists & DataGrids. In this scenario I would suggest using a DataGrid as it comes with functionaility that will take care of sorting (and paging as well if you need it). A really good example walkthrough of how to use the control can be found at:

http://aspnet.4guysfromrolla.com/articles/040502-1.aspx

--------------------------------------------------------------------------------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.

 

[Scally84]

yes I know but that's the tricky part... I'm re-using a classic ASP page and I can't just put everything in ASP.NET. I MUST definitely re-use some of the ASP stuff. I've used datagrids in the past and I'd use one if I could, but I can't. So I must repeat my question: can you call an asp.net function in javascript? Or is there another way I can reload a function when calling javascript code?

 

[ca8msm]

I don't understand why you say you are "re-using" classic asp pages and why you "must" re-use your old ASP code.

You are using aspx .NET pages so you shouldn't be mixing old ASP code in with them. The solution I gave above is one of the foundations of .NET (i.e. using server controls) but if you are choosing to ignore these and use ASP code then there is nothing I can recommend, as I don't agree with the direction in which you are going.

--------------------------------------------------------------------------------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.

 

[Scally84]

ok I get the point. I'll try to leave all the ASP code out. But do I have to use a datagrid? I found an (ASP.NET?) control which replaces the "html" table. Example:

'codebehind
        do while objReader.Read()
    
            Dim r As New TableRow()
            Dim c As New TableCell()
            Dim c2 as New TableCell()
            c.Controls.Add(New LiteralControl("  " & objreader("name")))
            c2.Controls.Add(New LiteralControl("€" & objReader("valuta")))
            
            r.Cells.Add(c)
            r.Cells.Add(c2)
    
            Table1.Rows.Add(r)
    
        loop

'html
<asp:Table id="Table1" Width="573px" runat="server" Font-Names="Verdana" Font-Size="8pt" CellSpacing="0" CellPadding="0"></asp:Table>

Can't I use this? Because I'm afraid to lose some of the layout of my older "html" table when I use a datagrid. Doesn't a datagrid has other functionalities as a table?

Thanks

 

[ca8msm]

The reason that I suggested the DataGrid is because it already has built-in capabilities for sorting/paging but you don't have to use this control (although if you don't you will have to build your own functionality in to do this).

If you decide not to use the DataGrid then the other alternatives are a DataList, a Repeater (probably my second preferred option) or a Table (which you have just used in your last example).

--------------------------------------------------------------------------------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.

 

[Scally84]

thank you very much. I used a datagrid and everything works fine now, the sorting is now much easier, the source code is much more simple and I was able to add some additional features.

 

[Scally84]

(btw, is there a way to edit a post or reaction afterwards?)

sorry I forget to mention that I still have one little problem: in my "old" page I used images combined with text as my "table" header. How can I do so with my datagrid. I know how to use text as a header, and how to use an image as a header, but I don't know how to use both at the same time.

 

[ca8msm]

You should be able to use an image and text by using the HeaderText and HeaderImageUrl properties respectively.

There is no way to edit your post once it has been submitted (but if you have a problem with anything that has been entered , you can use the 'Red Flag' link under each post to contact management and let them know).

--------------------------------------------------------------------------------------------------------------------------------------------

Need help finding an answer?

Try the search facility (

http://www.tek-tips.com/search.cfm)

or read FAQ222-2244 on how to get better results.