how to use ajax in JQuery - asp.net

I have that works fine without Script manager. but if I add script manager that getting an error: sys undefined.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Block-ui-pageload.aspx.cs" Inherits="Block_ui_pageload" %>
<%# 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.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.blockUI.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="divConfirmBox1">
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Delete" onclick="showDeleteConfirmation('<%# Eval(" CategoryId")=CategoryId") %=% />')" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="divConfirmBox" style="display:none">
Are you sure you want to delete this record?
<input type="button" value="No" />
</div>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
$(function () {
$('#divConfirmBox1').block({ message: $('#divConfirmBox') });
});
$(function () {
$('#divConfirmBox').click(function (event) {
$('#divConfirmBox1').unblock();
});
});
</script>
initially during the page load . I am blocking the screen(PAge). once the user clicks the button the page is unblocked.
is there anything wrong in the Syntax whiling working with Ajax script manager

You should move the jQuery code into $(document).ready. I suspect you're preventing certain scripts from loading appropriately by running the code inline rather than in .ready. I'm running the same version of jQuery (but not UI block) with ScriptManager in 3.5 right now, no prob.

AJAX is not a thing - its a bunch of technologies put together to achieve asynchronous communication. Yes, you have some JavaScript coding in there, but none of them actually do anything 'ajaxian' - a good example of something really AJAX-style would be an validation of a (registration) form or something like that. You'd set some oberservers for some fields and validate them whilst the user is still making inputs on other fields...

I think what you're looking for is noConflict. It's been a while since I've used asp.net ajax but if I'm not mistaken, there is a $ function defined.

In the web.config we need to add the follwing code within tag.
then the problem was solved
every thing was working fine

Related

css stopped working asp.net

I am reposting the question, since it has changed a lot since I had problems with it initially, I know where the problem is but i do not know how to fix it, or the cause of it at all.
So i have 2 master files, one is for a login page and another one for the inside content. I also have a default.aspx file and a logout.aspx file. They both use the MasterPage.master which is the initial page. What i found out is, when I exclude the Logout.aspx from the project and run it, the website initial page uses the .css file. When I include the logout.aspx debug the program, the initial screen uses the .css at first then when i log in and log out, it shows the default.aspx without the .css. If I try to debug the page again, then the initial screen no longer uses the .css.
My master class has this:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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></title>
<link href="~/StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="login">
<div class="container">
<div class="header">
<h1 id="site-name">
<font color="black" size="5">SES Users Admin</font>
</h1>
</div>
<!--Hello Content -->
<div class="content">
<asp:Label ID="lblUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="txtUsername" runat="server" Height="21px"
style="margin-left: 2px" Width="133px"></asp:TextBox>
<br /><br />
<asp:Label ID="lblPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Height="20px"
style="margin-left: 4px" Width="133px"></asp:TextBox>
<br /><br />
<div class="button">
<asp:label id="lblResult" runat="server" Width="100%"></asp:label>
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnlogin_Click"
Width="57px" Height="21px"/>
</div>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</form>
</body>
</html>
Default aspx and default.cs are both empty like so:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="head">
</asp:Content>
<asp:Content ID="MainerContent" runat="server" ContentPlaceHolderID="MainContent">
</asp:Content>
As well as logout except for the logout.aspx.cs which contains the logout function:
<%# Page Title="Home Page" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Logout.aspx.cs" Inherits="Logout" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="head">
</asp:Content>
<asp:Content ID="MainerContent" runat="server" ContentPlaceHolderID="MainContent">
</asp:Content>
CS
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using HelloApp;
public partial class Logout : Page
{
protected void Page_Load(object sender, EventArgs e)
{
FormsAuthentication.SignOut();
Response.Redirect("default.aspx");
}
}
Take a look at browser requests in firebug / fiddler / charles to see what's happening to the request for the CSS file.
Try viewing the source of a page on the site and look for the <link ...> tag. What css file does it point to?
I suspect that your Site.css is not in the same folder as your MasterPage/ContentPage.
If your link to the stylesheet is simply Site.css then what ever the folder your MasterPage/ContentPage or just the ContentPage is in will be looking for the stylesheet in that folder.
e.g. if using <link rel="Stylesheet" type="text/css" href="Site.css" />
/Folder1/ContentPage.aspx will be looking for /Folder1/Site.css
If you change your stylesheet to using <link rel="Stylesheet" type="text/css" href="/Site.css" /> Then your website will look for the stylesheet in the root directory. HOWEVER, if your website is running as
`http://localhost:1234/WebsiteFolder/ContentPage'
"WebsiteFolder", then having /Site.css will look for the css file outside of the "WebsiteFolder"
Please post the folder structure of your site, also whether your site is running with a Virtual Path. To find the Virtual Path, view the properties for the website.
use
<link href="~/Site.css" runat="server" id="link1" rel="stylesheet" type="text/css" />
instead of
<link href="Site.css" rel="stylesheet" type="text/css" />
after that css loads properly and works fine....

UserControl Raise Events

I add an onfocus event to a web user control (.ascx) expection it to raise event when it gets focus but it doesn't. Is it not intended to work this way and how can I get it to raise the event? Here is sample below, but it doesn't work.
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="WebUserControl1.ascx.vb"
Inherits="RaiseEventUserControl.WebUserControl1" %>
<div style="padding: 5px; background-color: #C0C0C0">
TB1:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
TB2:
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
<%# Register Src="WebUserControl1.ascx" TagName="WebUserControl1" TagPrefix="uc1" %>
<!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></title>
<script type="text/javascript">
function RaiseEvent(obj) {
alert("Event was raised for: " + obj.id)
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:WebUserControl1 ID="WebUserControl11" runat="server" onfocus="RaiseEvent(this)" />
<br />
<uc1:WebUserControl1 ID="WebUserControl12" runat="server" onfocus="RaiseEvent(this)" />
</div>
</form>
</body>
</html>
This can be achieved using jquery. In your head element, add the following:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name^="WebUserControl"]').focusin(function () {
$(this).val("i have focus");
});
});
</script>
What this does is, grabs the input elements whose name starts with "WebUserControl" and adds a "got focus" event. The handler for that event places "i have focus" as the value for that input element.
The way that this would be rendered to the page is that a "onFocus" attribute would be added to the div that represents the control. This is not something that supports focus. You might add the "onFocus" item to say your first text field in the control or something similar to be able to raise the event if needed.

jQuery Validation in ASP.NET

i have a strange situation may its a easy fix or something i may be missing but here is the question.
i have a asp.net form with master page and my validation works great without any problem but the problems starts when i try to hook my click event to the server side,
here is what i meant:
i have a form with few fields on it and if the form is empty than it should STOP submitting, otherwise allow me to execute the server side script
but its not happening, even my form is in invalid state (i do get error message saying i have to enter the required fileds) but still executing my server side script.
i would like to execute my server side script only if the form is in valid state.
here is my code:
my master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>jQuery Validation in ASP.NET Master Page</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
my content page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(document).ready(function() {
$("#aspnetForm").validate({
rules: {
<%=txtName.UniqueID %>: {
minlength: 2,
required: true
},
<%=txtEmail.UniqueID %>: {
required: true,
email:true
}
}, messages: {
<%=txtName.UniqueID %>:{
required: "* Required Field *",
minlength: "* Please enter atleast 2 characters *"
}
}
});
});
</script>
Name: <asp:TextBox ID="txtName" MaxLength="30" runat="server" /><br />
Email: <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox><br />
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();" Text="Submit" />
</asp:Content>
function SubmitTheForm() {
SaveTheForm();
}
function SaveTheForm() {
debugger;
var request = buildNewContactRequest();
ContactServiceProxy.invoke({ serviceMethod: "PostNewContact",
data: { request: request },
callback: function(response) {
processCompletedContactStore(response);
},
error: function(xhr, errorMsg, thrown) {
postErrorAndUnBlockUI(xhr, errorMsg, thrown);
}
});
return false;
}
i have tried both ways
1)
$(document).ready(function() {
$("#btnSubmit").click(function(event) {
event.preventDefault();
SaveTheForm();
});
});
2)
<asp:Button ID="btnSubmit" runat="server" onclick="SubmitTheForm();
function SubmitTheForm() {
SaveTheForm();
}
you're posting your data without checking if the form is valid or not
I think you have to use something like this
function SubmitTheForm() {
if ($("#aspnetForm").valid()) SaveTheForm();
}
Sorry, I'm giving you bad advice. Forget my previous entry. What is the SubmitTheForm() method? You're using the jQuery validation plug in, so you should just need to attach the validation stuff to the form and all should be right with the world.
I think your button onclick needs to be
return SaveTheForm();
As in:
<asp:Button ID="btnSubmit" runat="server" onclick="return SubmitTheForm();" Text="Submit" />
Do you try to put the jQuery code script in the Head ContentPlaceHolder

Memory Leak with jQuery UI inside UpdatePanel in ie7

I have a fairly complex asp.net page based on UpdatePanels and jQuery UI. Unfortunately, when the panels update, the jQuery UI widgets leak memory like crazy in ie7, even if I manually 'destroy' them. Does anyone know a technique/patch to prevent these leaks? I've created a simple example page with a slider inside an UpdatePanel. Just click the 'Leak' button and refresh the page to see the leak in sieve.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Leak2.aspx.cs" Inherits="Leak2" %>
<%# Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>Leak</title>
<link type="text/css" href="/jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function initializeSlider() {
$(".slider").slider({
min: 0,
max: 100,
value: 100,
step: 5
});
}
$(document).ready(function() {
initializeSlider();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
initializeSlider();
});
});
</script>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="width: 300px;">
<div class="slider"></div>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Leak" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
After some more research it looks like the proper way to do this would be to use $.ajax to send/receive only the data I need to build the page and do all of the page interaction client-side. However, that will require pretty extensive changes to the page. Does anyone know of a patch to jquery-ui or a generic method for recovering memory leaked by these widgets that I can use in the meantime?

How can I use jQuery to make a validation icon appear somewhats slowly, fading in

Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!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></title>
<script src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});

Resources