i am using this way to bind ASP.NET GridView Without postback.
i want to know what are the problems of this way?
what are the alternative ways?
here is my code :
<input id="btnLoadDIV" type="button" value="button" />
<div id="somediv">
</div>
<script>
$(document).ready(function () {
$("#btnLoadDIV").click(function (e) {
e.preventDefault();
var url;
url = "test.aspx?type=test1";
$("#somediv").load(url);
});
});
</script>
Test.aspx BehindCode Code :
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Request.QueryString("type") = "test1" Then
bindgrid()
End If
End Sub
Test.Aspx markup code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</form>
</body>
</html>
thanks. regards.
Some basic things you ought to be aware of:
The page will fully execute it's life cycle even if only part of the page is being updated.
Grid views have a horrible footprint and I haven't used them in a long time because of it.
Potential alternatives:
Use a generic handler (.ashx) for running your ajax requests.
If you really want to use ajax on a grid view you might want to read this: http://mattberseth.com/blog/2007/05/7_simple_steps_to_ajaxenable_y.html
Your way is fine. The only thing I would do differently is I would pass the URL's parameters as second argument to $.load. I just feel it is neater:
$("#somediv").load("test.aspx", {type: "test1"});
Related
When I change the selection of my dropdown, the Change event does not fire. I put a breakpoint in the method and the program does not stop.
This is my markup:
<form id="form1" runat="server">
<div style='text-align:center;'>
<a style='text-decoration:none;font-size:16px;color:blue;background-color:white;width:200px;padding:4px;' href='LocationDetails.aspx?Location_ID=0' target='detailPanel'> Add Location
</a></div>
 
<div style='text-align:left;'>
<asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
<asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="FacilityTypeDDL_SelectedIndexChanged">
</asp:DropDownList>
</div>
<hr/>
<%ListLocations()%>
</form>
This is my Page_Load method to populate the list and it works fine.
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
GetServiceTypes()
FacilityTypeDDL.DataSource = dtServiceTypes
FacilityTypeDDL.DataTextField = dtServiceTypes.Columns("Title").ToString()
FacilityTypeDDL.DataValueField = dtServiceTypes.Columns("ID").ToString()
FacilityTypeDDL.DataBind()
End If
End Sub
This is my change event:
Protected Sub FacilityTypeDDL_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles FacilityTypeDDL.SelectedIndexChanged
strFacilityValue = FacilityTypeDDL.SelectedValue
ListLocations()
End Sub
I put a breakpoint at the first line of code and after changing the dropdown selection it does not stop at this event.
What am I doing wrong?
UPDATE
This is my entire markup. Can there be something wrong this it?
<%# Page Language="VB" AutoEventWireup="true" CodeFile="Locations.aspx.vb" Inherits="Editor_Locations" %>
<!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 id="LocationHead" runat="server">
<title>Locations</title>
<meta http-equiv="Content-Language" content="en-us"/>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
</head>
<body>
<form id="form1" runat="server">
<div style='text-align:left;'>
<asp:Label ID="FacilityTypeLbl" runat="server">Facility Type:</asp:Label>
<asp:DropDownList ID="FacilityTypeDDL" runat="server" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="FacilityTypeDDL_SelectedIndexChanged">
<asp:ListItem>Test1</asp:ListItem>
<asp:ListItem>test2</asp:ListItem>
<asp:ListItem>Test34</asp:ListItem>
</asp:DropDownList>
</div>
<hr/>
</form>
</body>
</html>
UPDATE
This application is a web site, not a web application. (I didn't know there was a difference but now I do.) In trying to figure out way the SelectedIndexChange event will not fire, I added a button and a click event. When I change the selection in the dropdown list, no event fires. When I click the button, the click event fires, then the selectedindexchange event fires.
I don't think the event SelectedIndexChanged is going to work.
Is there any other way to wire up a Postback when the dropdown list changes?
Can I somehow use __doPostback from a javascript function call when the list changes?
Any suggestions would be greatly appreciated!
I could not get the asp:DropdownList to fire the SelectedIndexChanged event. So this is how I completed the task.
Adding the dropdown dynamically as shown above and adding the change event that calls a javascript:
onchange='UpdateLocationList()'
This function had to be put in a .js file. This web site had a .js file already. It also had some AJAX calls that I used to complete the task.
In the UpdateLocationList(), I get the ID of the service type that was set as a value attribute in the dropdown. Then I use a function that is already part of the .js file to the LocationDetails page using the Service Type ID to display only the facilities of that service type. This is the function:
function updateLocationList() {
var ddlFacilityType = document.getElementById("FacilityTypeDDL");
var facilityValue = ddlFacilityType.options[ddlFacilityType.selectedIndex].value;
processAjax("/editor/Locations.aspx?Location_ID=" + facilityValue, "navPanel");
}
Works like a charm.
Thanks for all of your help.
I have an ASP.NET (VB.NET) application with 2 pages, a 'main' page and a second 'data-only' page whose only purpose is to be an AJAX data target for the main page, making a database call and rendering the results for a jQuery (AJAX) .get(). I'm using a session variable in the main page that I want to test for the existence of in the data-only page before it makes its DB call and renders the data.
I've tried doing this directly and it fails. From what I've been able to determine so far, the data-only page is unable to detect the session variable until its session is officially started (somehow using session_start, apparently). If this is correct, how do I start a session in the data-only page when it is only accessed via AJAX calls from the main page? I definitely need the data-only page to be session variable-aware. Thanks!
-- Rick
Both pages are ASP.NET. I added a label to the main page to validate (on page_load and on submit of the session value) that the session variable exists and what it is. The data_only page returns a yes or no message (it's always no) if it detects the presense of the session variable.
Page Code - main.aspx:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="main.aspx.vb" Inherits="main" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:TextBox ID="txt_1" runat="server"></asp:TextBox>
<asp:Button ID="but_1" runat="server" Text="Add Session Variable" /><br />
<asp:Label ID="lbl_1" runat="server"></asp:Label><br /><br />
<asp:Button ID="but_2" runat="server" Text="Get Data" />
<asp:Label ID="lbl_2" runat="server"></asp:Label>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('#but_2').on('click', function (event) {
event.preventDefault();
$.get("data_only.aspx", function (data) {
$('#lbl_2').text(data);
});
});
});
</script>
</body>
</html>
Code-Behind - main.aspx:
Partial Class main
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Call Check_Session()
End Sub
Protected Sub but_1_Click(sender As Object, e As System.EventArgs) Handles but_1.Click
Session("var1") = txt_1.Text
Call Check_Session()
End Sub
Private Sub Check_Session()
Dim strSession = Session("var1")
If strSession Is Nothing Then
lbl_1.Text = "No Session variable."
Else
lbl_1.Text = "Session Variable = " & strSession
End If
End Sub
End Class
Page Code - data_only.aspx:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="data_only.aspx.vb" Inherits="data_only" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body></body>
</html>
Code-Behind - data_only.aspx:
Partial Class data_only
Inherits System.Web.UI.Page
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim strSession = Session("var1")
If strSession Is Nothing Then
Response.Write("No session variable.")
Else
' Database call occurs here
Response.Write("Success! Get data here.")
End If
Response.End()
End Sub
End Class
Maybe you could try using a "master class" for both pages i.e both pages inherit from your master class (which in turn from Inherits System.Web.UI.Page) that has all the session handling logic.
Just to clarify and narrow the scope, all .aspx pages are session aware by default and I'm pretty sure that this is not your problem.
First of all make sure that you are using the correct url for the GET call from Ajax, and you can make sure of that by using Chrome developer tools (Network tab) and observer the exact url that Ajax calls. Maybe you need to add "/" before your page url or you need to specify the folder name if it's not in the same folder, like: "/otherFolder/page.aspx".
According to this post you can intercept the post by overriding this function __doPostBack but it wont work. If I view the generated source I am not able to see the function that is meant to be auto generated and causes asp.net to make the postback.
where is this function? and how do I intercept it?
I'm using asp.net 4 and vs 2012
Default.aspx
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
//breaks here as it cant find __doPostBack
var __original = __doPostBack;
__doPostBack = myFunction();
function myFunction() {
alert('intercept');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>
Default.aspx.vb
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub form1_Load(sender As Object, e As EventArgs) Handles form1.Load
End Sub
Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim txt As String = TextBox1.Text
End Sub
End Class
An ASP.NET Button renders an <input type="submit" /> to postback the form, and will never use this method. The __doPostBack method is only used for elements that are not input buttons that do not normally cause a POST operation to the server. This is a function that's inside one of the Microsoft's JavaScript file, and only gets rendered out on the client. Common uses for __doPostBack are LinkButton controls, controls that may have AutoPostBack="true", and others.
Also, there may be a call to WebForms_DoPostBack... something named like that that also posts back, but internally calls __doPostBack.
If you are trying to prevent postback on click of your button, attach to the submit event of the form, and cancel the postback operation that way.
I tried to search for the problem in the internet and I see everyone is asking about the problem for FileUpload control inside the UpdatePanel. First of all, I am not using an UpdatePanel. Below is my code:
HTML
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" method="post" runat="server" enctype="multipart/form-data">
<div>
<asp:FileUpload ID="fuImport" runat="server" />
<asp:Button ID="btnImport" runat="server" Text="Import" />
</div>
</form>
</body>
</html>
Code Behind
Protected Sub btnImport_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnImport.Click
If (fuImport.HasFile) Then
fuImport.SaveAs(My.Settings.FileImportPath & Path.GetFileName(fuImport.FileName))
End If
End Sub
I see that fuImport.HasFile is False, but fuImport.FileName gives just the file name. For e.g., if I choose c:\1.txt, it gives just "1.txt".
Can anybody let me know why fuImport.HasFile is False though I have chosen a file?
I found the answer. The txt file I was uploading was empty. I edited the text file and then saved by typing something in it. I could not find this anywhere mentioned in the msdn or I am not sure whether I was looking at a wrong place. The suggestion by Kasys in this post helped me.
According to the info in:
Which values browser collects as a postback data?
the value of the HTML input button is sent in a post back. I'm testing in ASP.NET with IE and I am not finding this to be the case.
The markup for my test case is:
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<!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>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server"
DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" />
<asp:Button ID="btnTest" runat="server"
Text="change" OnClientClick="doTest()" />
</asp:Panel>
</div>
</form>
The code behind is:
Partial Class Test
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = btnTest.Text
End Sub
End Class
My result is that the value of the input button is always "change" when the browser loads the page, but I was expecting it to be "new-value" after postback. The Javascript doTest() function is changing the value when the button is clicked.
Is there something more I'm supposed to do for ASP.NET or IE to get the input button value posted back? Or is the information about this functionality
wrong?
In a case like this I would probably use:
<input type="button" ID="btnTest" runat="server" onclick="doTest()" value="change" />
Note the runat="server".
While asp:button probably renders similarly, if what you really want it an HTML button input, you can use that. Yes, ASP.NET will pick up the value on the server side.
Also, do a view source and make sure the ASP.NET panel is not munging up the ID of the input. More generally, have you tested this without the asp:panel tag? I wonder if that affects anything.
I believe IE just hates input submits....
But you should also know...
ASP uses viewstate to ensure there is no tampering with server controls. The value of the submit button is stored in the view state and most likely the only way to modify the value of it is to use the ASP.NET JS API.
More commonly you see this problem with <selects> (Options added to by javascript lost in postback), but <input type="submit" /> is very similar
It's not that it's not being set, but the javascript sets the value, which gets reset back to "change" on the postback. If you're looking for a button that works with your javascript, use the client input control:
<input type="button" ID="btnTest" onclick="doTest()" />
Otherwise, if you want a server control, you should set btnTest.Text on the server side.
You are using the wrong id for the button. ASP.NET gives each control a unique id. It is made up of all the ids in the chain to your control.
Therefore your button probably has an id something like ctl00_pnlTest_btnTest. This is why your JavaScript is not setting the buttons text.
view source in your browser to see the actual ID of the control and adjust your JavaScript accordingly.
From code you can get the actual ID used in the page with the ClientID property. So you could change your JavaScript to:
var button = document.getElementById("<%= btnTest.ClientID %>");
Just tried Marc's solution like this:
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
return true;
}
</script>
<input type="submit" id="btnTest1" name="btnTest1" value="Submit 1" runat="server" onclick="doTest()" />
When I posted back the Load event still had Submit 1 as the value of the button. You could use a hidden field, set that value with the button in JS and post back. That does in fact work.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>test postback</title>
<script type="text/javascript">
function doTest() {
var button = document.getElementById("btnTest1");
button.value = "new-value";
alert("button contents = " + button.value);
var hdn = document.getElementById("hdnTextboxName");
hdn.value = button.value;
return true;
}
</script>
</head>
<body>
<form id="myForm" runat="server">
<div>
<asp:Panel ID="pnlTest" runat="server" DefaultButton="btnTest">
Textbox:
<asp:TextBox ID="txtTest" runat="server" /><asp:HiddenField ID="hdnTextboxName" runat="server" ClientIDMode="Static" />
<asp:Button ID="btnTest" runat="server" Text="change" OnClientClick="doTest()" ClientIDMode="Static" />
</asp:Panel>
</div>
</form>
</body>
</html>
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
txtTest.Text = hdnTextboxName.Value
End Sub