Category Archives: ScriptManager

ScriptManager

[RESOLVED]Error regarding "Jquery"

Good morning, I am new to ASP.net and I am trying to create a sign up page. However I keep getting the following message, what does it mean? what should I do?

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

                  

Stack Trace:

[InvalidOperationException: WebForms UnobtrusiveValidationMode requires a ScriptResourceMapping for 'jquery'. Please add a ScriptResourceMapping named jquery(case-sensitive).]
   System.Web.UI.ClientScriptManager.EnsureJqueryRegistered() +2191002
   System.Web.UI.WebControls.BaseValidator.RegisterUnobtrusiveScript() +10
   System.Web.UI.WebControls.BaseValidator.OnPreRender(EventArgs e) +9845329
   System.Web.UI.Control.PreRenderRecursiveInternal() +83
   System.Web.UI.Control.PreRenderRecursiveInternal() +155
   System.Web.UI.Control.PreRenderRecursiveInternal() +155
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +974

Hi,

and welcome to the ASP.NET forums.

It means you’re likely missing some parts of code:

In the global.asax:

ScriptResourceDefinition myScriptResDef = new ScriptResourceDefinition();
myScriptResDef.Path = "~/Scripts/jquery-1.4.2.min.js";
myScriptResDef.DebugPath = "~/Scripts/jquery-1.4.2.js";
myScriptResDef.CdnPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js";
myScriptResDef.CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.js";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", null, myScriptResDef);

In the master page:

<asp:ScriptManager ID="sm1" runat="server">
  <Scripts>
    <asp:ScriptReference Name="jquery"/>
  </Scripts>
</asp:ScriptManager>

It could be that you need to alter these according to your project. For more information take a look at

http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.scriptresourcemapping(v=vs.110).aspx.

Grz, Kris.

can you please verify that following web.config key/setting is there in your web config file? or you can get the further possible fixes from the link below. thanks 

<appSettings>
      <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
    </appSettings>

http://stackoverflow.com/questions/16660900/webforms-unobtrusivevalidationmode-requires-a-scriptresourcemapping-for-jquery

[RESOLVED]page do not refresh in jquery.

hi,

i want that when i click on button.button event fire but page do not refresh. 

please help me out.

thanks for the help.

$( ".abc" ).click(function() {
         location.reload(true);
});

Hope this helps

Or this with ajax 

$(document).on("click", ".abc", function(){
          location.reload(true);
});

immaduddinahmed

i want that when i click on button.button event fire but page do not refresh. 

Have you considered using UpdatePanel, if not please try using that. 

Sample Code:

  <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="updpnl" runat="server">
            <ContentTemplate>
            <%--Your other controls here--%>
               <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>

C#:

/// <summary>
        /// Handles the Click event of the Button1 control.
        /// </summary>
        /// <param name="sender">The source of the event.</param>
        /// <param name="e">The <see cref="EventArgs"/> instance containing the event data.</param>
        protected void Button1_Click(object sender, EventArgs e)
        {
            //Logic to execute on button click
            
        }

Hi immaduddinah,

For your issue ,Here are my suggestion:

First, you can use ajax to achieve the asynchronous page refresh 

http://api.jquery.com/jquery.ajax/

When you click the button,you can call the ajax to fire a request to the  server side.

Second,just like  A2H mentioned ,you can use UpdataPanel to  achieve your goal:

http://www.asp.net/AJAX/documentation/live/tutorials/IntroductionUpdatePanel.aspx
http://ajax.net-tutorials.com/controls/updatepanel-control/

 

Best Regards,

Kevin Shen.

[RESOLVED]how to append form for a checkbox in Gridivie within Accrodion

Hi,

I have a GridView inside a JQuery accordion panel. Each row of the GridView has a CheckBox with AutoPostabck enabled. The event is not firing I believe because as usual ASP.Net forms elements need to be appended to the form but I am not sure how to dot for
each checkbox in Gridview Row. How do i execute Jquery

  $('<%# CheckBox1.ClientID %>).parent().appendTo("form");

when every row is data bound?

Thanks

Hi mhariri,

Thanks for your post.

mhariri

I have a GridView inside a JQuery accordion panel. Each row of the GridView has a CheckBox with AutoPostabck enabled. The event is not firing

Firstly, I create a demo to reproduce your problem, the below code works fine on my side. So you compare your code with the following sample to find some differences.

<form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <div>
            <asp:Accordion ID="Accordion1" runat="server">
                <Panes>
                    <asp:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>
                            Item1
                        </Header>
                        <Content>
                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:CheckBox ID="CheckBox2" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox2_CheckedChanged"/>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
                                    <asp:BoundField DataField="Values" HeaderText="Values" SortExpression="Values" />
                                    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                                </Columns>
                            </asp:GridView>
                        </Content>
                    </asp:AccordionPane>
                </Panes>
            </asp:Accordion>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [ChartInfo]"></asp:SqlDataSource>
        </div>
</form> 
protected void CheckBox2_CheckedChanged(object sender, EventArgs e)
        {
            //bool ischecked = ((CheckBox)sender).Checked;
            string rows = ((GridView)AccordionPane1.ContentContainer.Controls[1]).Rows.Count.ToString();
        } 

Secondly, you could show us your complete code, it wil help us understand your problem and fix it.

If you have any question about my reply, please let me know.

Best Regards,

Fei Han

[RESOLVED]Jquery in Scriptmanager

Visual Studio put this in for me:
 <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
            </Scripts>
</asp:ScriptManager>
How does Asp.Net know which version if Jquery to pick? Where is it loaded from?
What am I missing?

You likely already have a particular reference to it defined and it included within your current project or solution (you might check a Scripts folder if one is present). You can also check either the Global.asax file if one is present or the BundleConfig.cs
file within the App_Start folder and you should see a mapping that looks something like this :

ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
{
        // Code omitted for brevity
}); 

Within this, you’ll see a bit of code that should specify your jQuery location.

Your code make sense but does not exist in my project.

I found this line in Package.config:

<package id="AspNet.ScriptManager.jQuery" version="1.10.2" targetFramework="net45" />

(that is convoluted)

The Package.config file generally indicates that you are using NuGet to load packages for your project. In this case, a particular package called
AspNet.ScriptManager.jQuery, which as mentioned here will do the following:

"This package contains the AspNet.ScriptManager.jQuery assembly that will automatically register jQuery 1.10.2 with the ScriptManager as "jquery".

You should have some code after installing this package that explicitly demonstrates this occurring (try searching your project and it’s code files for "jquery") if you cannot find any that look like your ScriptManager pointing to a particular file,
then it’s likely just being handled from a reference within the package itself.

[RESOLVED]Use WebMethod to display Ajax ID and Server Time

I have a file on my server "~/json1.txt" I want to extract using the "Get" method: "{"one":"1", "two":"2", "three":"3"}

Then I want to use WebMethod to display Ajax ID and Server Time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function GetDateTime() {
                $.get("json1.txt", function (data) {
                    var json1 = data;
                    $.ajax
                    ({
                        type: "POST",
                        url: "Default.aspx/GetServerDateTime",
                        data: json1,
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            alert(result.d);
                        },
                        error: function (err) {
                             alert("Error Code: " + err);
                        }
                    });
                });
            }
        });
</script>
protected void Button1_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scr", "Javascript:GetDateTime();", true);
        }
        [WebMethod]
        public static string GetServerDateTime()
        {
            string dateid = "Date: " + DateTime.Now.ToString();
            return dateid;
        }
Error code:
"JavaScript runtime error: 'GetDateTime' is undefined"

Hi,

What if using just:

 <script type="text/javascript">
// just define the function function GetDateTime() { $.get("json1.txt", function (data) { var json1 = data; $.ajax ({ type: "POST", url: "Default.aspx/GetServerDateTime", data: json1, contentType: "application/json;charset=utf-8", dataType: "json", success: function (result) { alert(result.d); }, error: function (err) { alert("Error Code: " + err); } }); }); }
// Called when page is loaded
  $(function () { // Call your function from here rather than to just define a function Inside this anonymous function.
 
GetDateTime();
});
</script>

Else you define your GetDateTime function as a member of an outer anonymous function. What you place here is some code that is intended to automatically run when the page is ready.

Edit: and don’t emit this server side code. It doesn’t have any purpose. Instead do the call Inside your startup function (code above edited).

Got
rid of a few things.

Error
Code: Alert says: "Error Code: [object Object]"

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function GetDateTime() {
            $.ajax
            ({
                type: "POST",
                url: "Default.aspx/GetServerDateTime",
                data: {'one':'1'},
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert(result.d);
                },
                error: function (err) {
                    alert("Error Code: " + err);
                }
            });
        }
    </script>

 

See https://api.jquery.com/jQuery.ajax/ and scroll down to the error function. For now you are showing the object that does the request so it doesn’t help much. See the status and text or the query response.

Could it be that you pass a parameter while this method doesn’t have any parameter?

Hi Philosophaie,

Thanks for your post.

Philosophaie

<script type="text/javascript">
        function GetDateTime() {
            $.ajax
            ({
                type: "POST",
                url: "Default.aspx/GetServerDateTime",
                data: {'one':'1'},
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    alert(result.d);
                },
                error: function (err) {
                    alert("Error Code: " + err);
                }
            });
        }
    </script>

According to your code, you pass a parameter called “one” to WebMethod, so your WebMethod should could accept this parameter. So your code may look like as below.

[WebMethod]
public static string GetServerDateTime(string one)
{
    //Do some operation according to parameter "one"
    string dateid = "Date: " + DateTime.Now.ToString();
    return dateid;
}

Hope it will be helpful to you.

Best Regards,

Fei Han

[RESOLVED]Using an Javascript function to execute an Ajax

This is reaching the ajax portion but it is giving this error

Error Code: Status: [object Object] ex: Error

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function GetDateTime() {
            var jsonid = $("#<%= TextBox1.ClientID %>").val();
            var json1 = "{ id: " + jsonid + " }";
            //var  = Sys.Serialization.JavaScriptSerializer.serialize(obj); 
            $.ajax
            ({
                type: "POST",
                url: "Default.aspx/GetServerDateTime",
                data: JSON.stringify(json1),
                contentType: "application/json;charset=utf-8",
                dataType: JSON.stringify(json1),
                success: function (result) {
                    alert(result.d);
                },
                error: function (status, ex) {
                    alert("Error Code: Status: " + status + " Ex: " + ex);
                }
            });
        }
    </script>
        

        protected void Button1_Click(object sender, EventArgs e)
        {
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "scr", "Javascript:GetDateTime();", true);
        }
        [System.Web.Services.WebMethod]
        public static string GetServerDateTime(string id)
        {
            string datetimeid1 = "ID: " + id + " Date&Time" + DateTime.Now.ToString("MM/dd/yyyy hh:mm:ss tt");
            return datetimeid1;
        }

Hi Philosophaie,

You can not set the dataType like below:

Philosophaie

dataType: JSON.stringify(json1),

You need to change code like below:

  dataType: "json",

There are four types for dataType:

Intelligent Guess (xml, json, script, or html)

I suggest that you can refer to the link below:

http://api.jquery.com/jquery.ajax/

Best Regards,

Kevin Shen.

first refer Kevin’s reply

and

change following

Philosophaie

data: JSON.stringify(json1),

to

data:{id:jsonid}

[RESOLVED]Execute JQuery After Postback

Hey, I’m trying to run a simple jquery script. I’ve got it working without a postback but I want to be able to click a linkbutton, have a postback and then have the jquery execute.

Here’s the script for context:

$(document).ready(function () {
    $("[id$=lnkRemove]").click(function () {
        $dataribbon = $(".ribbon-content");
        $dataribbon.delay(500).slideDown(500).delay(2500).slideUp(500);
    });
});

I’ve read about ScriptManager and it has this that could be useful:

ScriptManager.RegisterStartupScript

I’m not entirely sure how that works and other than that, there doesn’t seem to be a lot of resources for running javascript/jquery after a postback. I’ve also read a bit about UpdatePanels and partial postbacks. Can anyone tell me the best way to approach
this?

Make your js code a normal function

function myFunction() {
    $("[id$=lnkRemove]").click(function () {
        $dataribbon = $(".ribbon-content");
        $dataribbon.delay(500).slideDown(500).delay(2500).slideUp(500);
    });
}

In the click event handler for your linkbutton, use RegisterStartupScript to write js to call the "myFunction" function.  Google for RegisterStartupScript for examples.

Hi FireVulpes,

Thanks for your post.

As for your problem, you could refer to the following sample to call a javascript function from server side.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        function myFunction() {
            alert("Hello World");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:LinkButton ID="btnok" runat="server" OnClick="btnok_Click">CallClientSideFunction</asp:LinkButton>
    </div>
    </form>
</body>
</html> 
protected void btnok_Click(object sender, EventArgs e)
{
    //your code
            
    ScriptManager.RegisterStartupScript(this, GetType(), "myFunction", "myFunction();", true);
}

If you have any question about this issue, please post back freely.

Best Regards,

Fei Han

How can I manipulate (clear file, set background color) the AsyncFileUpload control with jQuery?

I have just started to learn (and use) jQuery this week, so I have no experience.

I am calling the js function from the UploadedComplete event if it is determined that the file type is not allowed.

C#

protected void AsyncFileUpload_FormView_DOC_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
    ExitStatus exitStatus = IsExtensionAllowed((AsyncFileUpload)sender, FileType.word);
    if (!exitStatus.Success)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "", "ClearAsyncFileUpload('" + ((AsyncFileUpload)sender).ClientID + "');", true);
    }
}

HTML

<script type="text/javascript">
function ClearAsyncFileUpload(senderClientID) { var myID = "#" + senderClientID + "_ctl02"; $(myID).val(''); $(myID).css('background-color', 'red'); }
</script>

the statement var myID = "#" + senderClientID + "_ctl02"; 

does produce the following: "#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02"

but nothing happens when $(myID).val(”); and .css is reached.

The HTML ID of the AsyncFileUpload is AsyncFileUpload_FormView_DOC.

The ClientID sent from the server to the js function is ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC 

When I run the following $(‘#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC’); in the Chrome console I get the following:

<div id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC" style="color:White;">
	<input type="hidden" name="ctl00$ContentPlaceHolder_BODY$FormView_Specification$AsyncFileUpload_FormView_DOC$ctl00" 
		id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl00" 
		value="C:fakepathsome_file.txt">
		
	<div id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl01">
		<input name="ctl00$ContentPlaceHolder_BODY$FormView_Specification$AsyncFileUpload_FormView_DOC$ctl02" type="file" 
			id="ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02" style="width: 
			250px; background-color: green;">
	</div>
</div>

It appears that _ctl02 is consistent (at least in the two AsyncFileUpload controls i examined).

When the control is rendered it appear to create two (2) inputs, one type="file" and one type="hidden" 

When I run the following in the Chrome console. I get the desired effect (IE of course, is another story).

$('#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02').val('');
$('#ctl00_ContentPlaceHolder_BODY_FormView_Specification_AsyncFileUpload_FormView_DOC_ctl02').css('background-color', 'red');

When I to do it from the js function however, nothing happens.

Thanks for any suggestions.

Hi matt.gulick

For your issues is related with CMS.MediaLibrary  which is out of  our  support scope ,please post your issue to the link below for a  professional solution.

http://www.kentico.com/Product/All-Features/Content-Management/Media-Library

According to your post , you want to upload a file , If I don’t misunderstand you. Please try my code as below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplicationFor2.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %> 
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>      
<script type="text/javascript">
    function showConfirmation() {
        document.getElementById('Label1').innerText = 'file upload complete.';
    }
</script> 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <ajaxToolkit:AsyncFileUpload ID="AsyncFileUpload1" runat="server"  
            OnUploadedComplete="AsyncFileUpload1_UploadComplete"  
            OnClientUploadComplete="showConfirmation"  
            BackColor="green"/>
        <asp:Label ID="Label1" runat="server" Font-Size="Large" Font-Bold="True" ForeColor="red" Font-Names="Comic Sans MS"></asp:Label>
	</div>
    </form>
</body>
</html>

protected void AsyncFileUpload1_UploadComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)  
        {
            string strfilename = System.IO.Path.GetFileName(AsyncFileUpload1.PostedFile.FileName);
            string filePath = @"D:Doc" + strfilename; //revise your path according to your demands
            AsyncFileUpload1.SaveAs(filePath);  
        }  

 

Hope this can help you .

Best regards,

Aswecan

Aswecan

Hi matt.gulick

For your issues is related with CMS.MediaLibrary  which is out of  our  support scope ,please post your issue to the link below for a  professional solution.

Thanks for taking the time to reply, but nothing in your reply relates at all to my issue other then the event to which I was using to trigger my jQuery call.

I don’t know what I wrote that would make you think my issue pertains to this CMS.MediaLibrary, but it has nothing to do with it (I don’t even know what that is).

I know how to upload a file, I was not asking that. I was trying to change some properties of the AsyncFileUpload control triggered from the UploadComplete event.

I am not uploading the file on UploadComplete, I am just doing my own file validation, and if I determine that the file selected is invalid I wanted to clear the file name from the control and change the background to red.

Hi matt.gulick,

I have tried your code in my computer. and I  find that when  I click the upload button, I find that the javascript function not fire in the client side.

I suggest that you can set a  breakpoint on your  "ClearAsyncFileUpload" function to check if it can be hit .

Second, I am not quite sure ,since the file is not valid, why you still upload it to the server ,then clear the file name and change background color.

Best Regards,

Kevin Shen.

The javascript function "ClearAsyncFileUpload" is being triggered from the server side AsyncFileUpload_UploadComplete event. I have set break points in the server and client side as well as placing an alert box in the javascript (which
did appear).

Perhaps your visual studio is not configered to handle client-side debugging. I had to change a few settings in IE in order for it to be able to step through.

As for the file uploading, I am not uploading the file if it is invalid.

In my server side i code i call a method that determines the file validity and returns a bool and string (exit status and exit message).

The UploadComplete event examines the existStatus (bool) and asks, if NOT success (true), then call the javascript function to clear the AsyncFileUpload control and turn background red, so as to inform the user that the file they selected is invalid. I already
advise them via text that the field requires a pdf document, and i also pop up a modal if they select a file other than pdf. Clearing the AsyncFileUpload control is just another step in preventing the user from attempting to save the record.

In the save function, I validate the file again.

  1. On AsyncFileUpload_UploadComplete, files validity is determined. If invalid, alert box informs user of invalid file selection ….. and I want to clear the file from the AsyncFileUpload control and set background to red, like it would be if file failed
    to load into control.
  2. If user ignores alert and attempts to save the record, then another file validation is run and if invalid, file save will not occur.

If i could clear the file control in step 1 then i would not have to validate the file again in step 2.

[RESOLVED]Popup for Process

Hi,

I want to show popup box for process until the process is done from server.

Example: adding product from admin , so until process done i want to show popup on the middle of the page and user cannot click until process done.

Please, I need your suggestions and logic to achieve my scenario.

Appreciate for your Quick and Better response.

Hi smd_yasin,
Based on your post, you want to show a box as a processbar, and user cannot click until process done. If I understand correctly, you’d better to try my code as below.

<head runat="server">
    <title></title>
    <style type="text/css">
    .lblTxtCenter
         {
              text-align: center;
         }
    </style>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        //$(document).ready(function ()
        //{
        //    $("#Button1").click(function ()
        //    {
        //        $("#Button1").attr({ "Enable": "false" });
        //    })
        //})// this JQuery is used to disable Button1 until process done
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="pro">
         <asp:UpdatePanel ID="UpdatePanel1" runat="server" Visible="False">
             <ContentTemplate>
                 <div style='width: 200px; background-color: Silver; height: 20px;'>
                     <asp:Label runat="server" ID="lbl" CssClass="lblTxtCenter"></asp:Label></div>
                 <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" Enabled="false">
                 </asp:Timer>
                 <br/>
             </ContentTemplate>
         </asp:UpdatePanel>
        </div>
         <asp:Button ID="Button1" runat="server" Text="Start" OnClick="Button1_Click" />
    </div>
    </form>
</body>
 protected void Button1_Click(object sender, EventArgs e)
        {
           UpdatePanel1.Visible = true;
           ThreadClass cl = new ThreadClass();
           cl.begin();
           Timer1.Enabled = true;
        }
        protected void Timer1_Tick(object sender, EventArgs e)
        {
          if (ThreadClass.present <= 100)
          {
             Button1.Enabled = false;//if you use JQuery function above ,you may annotate it
             lbl.Text = ThreadClass.present.ToString() + "%";
             lbl.BackColor = System.Drawing.Color.Red;
             lbl.Width = ThreadClass.present * 2;
          }
          if (ThreadClass.present == 100)
          {
             ThreadClass.present = 0;
             UpdatePanel1.Visible = false;
             Button1.Enabled = true;
             Timer1.Enabled = false;
          }
        }
        public class ThreadClass
        {
            public static int present;
            public ThreadClass(){}
            public void begin()
            {
               if (present == 0)
               {
                   lock (this)
                   {
                      Thread tr = new Thread(new ThreadStart(() =>
                         {
                           for (int i = 0; i <= 1000; i++)
                           {
                              present = 100 * i / 1000;//Calculate the percentage completed  
                              Thread.Sleep(10);
                           }
                         }));
                   tr.IsBackground = true;
                   tr.Start();
                   }
               }
            }
        }

If you have any concern about it, please feel free to let me know.
Best regards,
Aswecan

Hi Aswecan,

I’m very thankful, that you posted proper script.

[RESOLVED]change the color of list on clicking anchor tag in asp.net using jquery

i am trying to change color of the list on clicking anchor tag using jquery. On clicking the anchor tag i have called a C# function code behind.. if i give return false code in jquery like the below code the color has changed. but code behind function is
not working. once i comment return false from jquery the code behind code is working but the color has not changed.

	Jquery code :

	 $(document).ready(function () {

		 $("a").click(function () {
		
			$("li.active1").removeClass("active1");

                        $(this).parent('li').addClass('active1');

			return false;
		});

	 });
	html code :

	<ul class="ullist" id="navlist">

        <li id="list1"><a id="a1" runat="server" onserverclick="lnkactive_click" style="width: 10px; position: relative">Active</a></li>

	 <li id="list2"><a id="a2" runat="server" onserverclick="lnkabeyance_click">Abeyance</a></li>
	
	</ul>

make it return true;

I think the problem is, you are trying to call both onserverclick and click .

You can see more here:

http://stackoverflow.com/questions/4830095/asp-net-button-onserverclick-only-works-when-onclick-isnt-defined

Hi januskarthik,

Thanks for your post.

As for your problem, ASP.Net AJAX ScriptManager allows us to call Server Side ASP.net methods from client side without any PostBack using PageMethods as below.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../../Scripts/jquery-1.8.2.js"></script>
    <script>
        $(document).ready(function () {

            $("a").click(function () {
                $("li.active1").removeClass("active1");

                $(this).parent('li').addClass('active1');

                var id = $(this).attr("id");

                if (id == "a1") {
                    var str = PageMethods.active(OnSuccess);
                }

                if (id == "a2") {
                    var str = "World!";
                    PageMethods.abeyance(str, OnSuccess);
                }
                return false;
            });

        })

        function OnSuccess(response, userContext, methodName) {

            alert(response);

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>

        <div>
            <ul class="ullist" id="navlist">

                <li id="list1"><a id="a1" runat="server" style="width: 10px; position: relative">Active</a></li>

                <li id="list2"><a id="a2" runat="server">Abeyance</a></li>

            </ul>
        </div>
    </form>
</body>
</html> 
[WebMethod]
public static string active()
{
    string str = "Hello World";
    return str;
}

[WebMethod]
public static string abeyance(string name)
{
    string str = "Hello "+name;
    return str;
} 

Besides, you could also refer to this article to learn about “Calling server side function from JavaScript in ASP.Net”.

If you have any question about my reply, please let me know.

Best Regards,

Fei Han