I really dont understand why this simple example doesnt work :S
I have a WebApplication in which I have a script :
function myAlert() {
$("#Button1").click(function () {
alert("Hello world!");
});
}
In my asp page, I have this simple code
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Graph.aspx.cs" Inherits="WebApplication.Graph" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" Width="100px"/>
</asp:Content>
And finally I register the script in the cs :
protected override void OnPreLoad(EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude("jQuery",
ResolveUrl(#"Scripts\jquery-1.4.1.js"));
Page.ClientScript.RegisterClientScriptInclude("jMyAlert",
ResolveUrl(#"Scripts\MyAlert.js"));
// check if the start up script is already registered with a key
if(!Master.Page.ClientScript.IsStartupScriptRegistered("jMyAlert"))
{
// since it is not registered, register the script
Master.Page.ClientScript.RegisterStartupScript
(this.GetType(), "jMyAlert", "myAlert();", true);
}
}
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "jMyAlert", "myAlert()", true);
}
I dont see what's wrong with this. I tried to include the scrit directly inside the aspx but nothing. I then try onto a simple html page and it works fine.
I want to use a plotting library using jQuery in my page so I'm very far to succeed if such a simple example causes me such a lot of problem...lol
Try checking the debug console within whatever browser you are using to see if "$" is undefined. It sounds like you are missing jquery when using the full ASP.NET approach.
The Id of that button is not going to be #Button1 because of the use of the master page. Try viewing the source to see what I mean.
To solve this, you will need to be able to see the actual Id in the JavaScript.
Something like this in your Page_Load method:
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"Button1Id", string.Format("var Button1Id = '{0}';", Button1.ClientID), true);
Will create the following in your page:
<script type="text/javascript">
//<![CDATA[
var Button1Id = 'Button1';//]]>
</script>
Which then means that your myAlert method will need to look like this:
function myAlert() {
$("#" + Button1Id).click(function () {
alert("Hello world!");
});
}
Related
I need to pass an int from aspx.cs page to aspx page and show it there
relevant part of example.aspx.cs page:
public partial class example : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected int Id(){
var Id = 318;
return Id;
}
}
Relevant part of aspx page
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="example.aspx.cs" Inherits="blahblah.example" %>
.
.
.
<body>
<h1>example.Id()</h1>
.
.
.
How can I edit this? It should be straight foward, but I can't seem to figure it out.
Simply do:
<h1><%=Id()%></h1>
This will display the return value of the method.
You may see: Introduction to ASP.NET inline expressions in the .NET Framework
Injecting Code <%= //some code here %> into the HTML it is possible with ASP.NET. However I will recommend to use a literal control instead to always keep the separation between the controller and the UI. Better may be:
Html:
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
Code:
Literal1.Text = "My Value"
I have a function on my server side.
protected void SelectParticipant(string CompanyId, string EmployeeNumber)
{
//I do some stuff here.
}
I want to call this function from JavaScript on the client side. I've tried searching for it, but all the suggestions I found were for calling a Page Method via AJAX. I don't want that, I want to cause a postback.
function MyJSFunction(companyid, employeenumber)
{
//cause postback and pass the companyid and employee number
//this is where I need help!
}
How can I cause a postback and run a server side function from my JavaScript?
You can solve your problem using two HiddenField.
Set the two HiddenField using js/jquery(as you prefer)
Force the form submit in the js function(form1.submit())
In the formLoad check if the HiddenFields are empty. If no run your method and then clear the HiddenFields
You can use the __doPostBack function to post to server. just make sure you add a server control to the page so the function is inserted. here is a small example that you can customize for your needs:
aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Try1.WebForm1" EnableEventValidation="false"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#lblInvoke').hover(
function () {
__doPostBack('<%= LinkButton1.ClientID %>', 'value1,value2');
}
);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<label id="lblInvoke">Hover This!</label>
<br />
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" Style="display:none;">LinkButton</asp:LinkButton>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
code behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Try1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
string passedArgument = Request.Params.Get("__EVENTARGUMENT");
string[] paramsArray = passedArgument.Split(',');
Label1.Text = string.Format("Returned from server. params: {0},{1}", paramsArray[0], paramsArray[1]);
}
}
}
Make sure you add the EnableEventValidation="false" attribute to page.
Here's how I did it...
<script type="text/javascript">
function AddParticipant(companyid, employeenumber)
{
$("#AddParticipantPanel").dialog("close");
var myargs = {CompanyId: companyid, EmployeeNumber: employeenumber};
var myargs_json = JSON.stringify(myargs);
__doPostBack('<%= SelectParticipantBtn.UniqueID %>', myargs_json);
}
</script>
<asp:Button runat="server" ID="SelectParticipantBtn" ClientIDMode="Static" OnClick="SelectParticipantBtn_Click" style="display:none;" />
And on the server side...
/* this is an inner class */
public class SelectParticipantEventArgs
{
public string CompanyId {get; set;}
public string EmployeeNumber {get; set;}
}
protected void SelectParticipantBtn_Click(object sender, EventArgs e)
{
string args = Request.Form["__EVENTARGUMENT"];
var myargs = JsonConvert.DeserializeObject<SelectParticipantEventArgs>(args);
string emp_no = myargs.EmployeeNumber;
string company_id = myargs.CompanyId;
//do stuff with my arguments
}
Instead of using HiddenFields, I used a hidden button. This model works better because I can go directly to the button's event handler instead of having to add code to the Page_Load function.
I am adding a new attribute to a DataList control in asp.net. I want to set the attribute on the server in C#. I then want to modify it in jQuery on the client, and get the new value of the attribute in C# back on the server. I think if I initialize the attribute to say "0" in my .aspx code, it get reset to "0" during the postback.
So, I'm using DataList.Attributes.Add() to create and init the attribute value during my render. On the client, I use .attr in jQuery to modify the value. During the postback on the server, I use DataList.Attributes["attributeName"] to get the new value, but it's null. I've changed EnableViewState for the DataList, its parent, and grandparent to true and false, but I still get a null value.
Is there a way to create and init an attribute on the server, modify it in jQuery on the client, and get the new value in C# back on the server?
A server control's attributes are persisted in the page viewstate. On postback the server control is re-created, and, its attribute values are re-created by parsing the viewstate value, from the posted data.
Hence any attempt to modify a server-created-control-attribute, or, add an attribute on a server-control from the client will not work. (More precisely it won't be very straight forward even if it might be possible).
Anyhow, a browser is "programmed" to send (over the wire) data held inside any html input or select control (hope I didn't miss anything) nested inside the html form. Further, all such controls need to be identified by the value specified by the name attribute. For e.g.
<form method="post" action="default.aspx">
<input type="text" name="foo" value="123"/>
<input type="submit" value="submit to server"/>
</form>
If one such form is submitted to a server like ASP.NET (which is an abstraction of IIS which implements the CGI standard), you can get the value of the textbox by doing something like:
string fooValue = Request.Form["foo"];
A browser program is usually programmed to send data corresponding the name and value attributes only.
Now, since you are looking at getting more than one kind of data on the server, but still associated with a single control, your options are to go with any of the following:
Access the value from two separate controls on the server. However, its your job to figure their are associations.
You can think of a user control approach, which ultimately is like the above but if written will give you a neat encapsulation.
Here is a small example of the 2nd approach:
CompositeControl.ascx:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="CompositeControl.ascx.cs" Inherits="WebApp.Attributes.CompositeControl" %>
<label>Enter Name</label>
<asp:TextBox runat="server" ID="tbxName"></asp:TextBox>
<asp:HiddenField ID="hdnAge" runat="server" />
CompositeControl.ascx.cs:
using System;
namespace WebApp.Attributes
{
public partial class CompositeControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (!string.IsNullOrEmpty(this.HiddenFieldClientId))
{
hdnAge.ClientIDMode = System.Web.UI.ClientIDMode.Static;
hdnAge.ID = this.HiddenFieldClientId;
}
}
public string Name
{
get
{
return tbxName.Text;
}
set
{
tbxName.Text = value;
}
}
public int Age
{
get
{
return int.Parse(hdnAge.Value);
}
set
{
hdnAge.Value = value.ToString();
}
}
public string HiddenFieldClientId { get; set; }
}
}
default.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebApp.Attributes._default" %>
<%# Register src="CompositeControl.ascx" tagname="CompositeControl" 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 src="Scripts/jquery-2.1.0.min.js"></script>
<script>
$(function () {
$('#tbxAge').val($('#personAge').val());
$('#btnSetAge').click(function () {
$('#personAge').val($('#tbxAge').val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:CompositeControl ID="CompositeControl1" runat="server" HiddenFieldClientId="personAge" />
<br />
<input id="tbxAge" type="text" />
<input id="btnSetAge" type="button" value="Set" />
<p>Hit <strong>set</strong> before clicking on submit to reflect age</p>
<asp:Button runat="server" ID="btnSubmit" Text="Submit"
onclick="btnSubmit_Click" />
<br />
<asp:Literal runat="server" ID="ltrlResult"></asp:Literal>
</div>
</form>
</body>
</html>
default.aspx.cs:
using System;
namespace WebApp.Attributes
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CompositeControl1.Age = 23;
CompositeControl1.Name = "Default";
}
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
ltrlResult.Text = string.Format("<p>{0}</p><p>{1}</p>", CompositeControl1.Name, CompositeControl1.Age);
}
}
}
You could make an AJAX call in wich you send the changes made it with jquery to some webservices method in your code behind to handle it.
AJAX jquery post change call:
$.ajax({
type: 'POST',
url: 'Default.aspx/Checksomething',
data: '{"userValuePostChanged ": "' + DtLValue+ '"}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(msg) {
alert("Result: " + msg);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("Error: " + textStatus);
}
});
webservices C#
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public Checksomething(string userValuePostChanged)
{
//Do some stuff with userValuePostChanged
return "something else"
}
This are the links where I took the examples:
consume .net web service using jquery
How to use jQuery to make a call to c# webservice to get return value
http://www.codeproject.com/Articles/66432/Consuming-Webservice-using-JQuery-ASP-NET-Applicat
I need to show/hide a reusable modal popup that it is in a UserControlWeb (ascx).
In my ASPX web, I defined the UC:
<%# Register TagPrefix="uc" TagName="uc1" Src="~/Controls/modalpopup.ascx" %>
<uc:uc1 ID="ModalPopup1" runat="server" />
I can show/hide the modalpopup with javascript:
$find('MBehavior').show();
$find('MBehavior').hide();
But, I need to do from behind code of my ASPX web.
It is posible?
Try the above
string script = #" <script type=""text/javascript"">
$find('MBehavior').show();
});</script>";
ClientScript.RegisterStartupScript(Page.GetType(), "", script);
Maybe if you have updatepanel in your page you can try;
ScriptManager.RegisterStartupScript(updatePanelID, updatePanelID.GetType(), Guid.NewGuid().ToString(), "$find('MBehavior').show(); $find('MBehavior').hide();", true);
if you want to to run from aspx:
$("#mybutton").click(function(e) {
$find('MBehavior').show();
$find('MBehavior').hide();
e.preventDefault();
});
if from code behind:
$("#mybutton").click(function(e) {
$.ajax( {
type:'Get',
url:'aspxfilename/mymethod',
success:function(data) {
}
});
e.preventDefault();
});
and in .cs file create a method:
[WebMethod]
public static string mymethod()
{
//run javascript
}
Hello Guys i am having following code in my Content page of my master page
<%# Page Title="About Us" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Description.aspx.cs" Inherits="Description" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="http://maps.google.com/maps?file=api&v=2&key=key&sensor=true"
type="text/javascript"></script>
<script type="text/javascript">
function initialize()
{
if (GBrowserIsCompatible())
{
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(20,30), 10);// I want to change these coordinates
map.setUIToDefault();
}
}
$(document).ready(function ()
{
initialize();
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="main">
</div>
</asp:content>
In above code i want to fetch coordinates from code behind .
I am having coordinates in code behind ex string coor = "20,30";
so inside page load event how can i put the value of this variable in java script code.
Should I create a String literal there ? or something else.
You could store them in a property and then use them:
map.setCenter(new GLatLng(<%= Lat %>, <%= Lon %>), 10);
where Lat and Lon are two public integer properties in your code behind. You could also use methods if you will.