0

I want to build an application that when clicking on a point on a map, it send an ajax request that changes some server controls on my page:

$.post("Default.aspx",
                       { latLng: event.latLng });

on the same page:

<asp:Panel runat="server" Visible="false" ID="SaveForm">
        <asp:Label runat="server" Text="Save your result:" Font-Size="X-Large"></asp:Label><br /><br />
        <asp:TextBox runat="server" ID="Latitude" ReadOnly="true"></asp:TextBox><br />
        <asp:TextBox runat="server" ID="Longitude" ReadOnly="true"></asp:TextBox><br />
        <asp:TextBox runat="server" ID="Score" ReadOnly="true"></asp:TextBox><br />
        <asp:TextBox runat="server" ID="Comment" Width="500px" Height="200px"></asp:TextBox>
        <asp:Button runat="server" OnClick="Save" />
    </asp:Panel>

aspx.cs:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["userId"] == null)
                Response.Redirect("LoginForm.aspx");

            if (Request["latLng"] != null)
            {
                String latLng = Request["latLng"];

                SaveForm.Visible = true;

                char[] delimiterChars = { '(', ',', ')'};
                String[] numbers = latLng.Split(delimiterChars);
                Latitude.Text = numbers[0];
                Longitude.Text = numbers[1];
                Score.Text = (getScore(float.Parse(numbers[0]), float.Parse(numbers[1]))).ToString();
            }
        }

Of course this doesn't work, because it isn't even logical that it would. But from this code you can get the idea of what I am trying to do and help me. Thanks!

Improve this question

3 Answers 3

Reset to default
1

I think WCF Service for this trivial task would be an overkill. Consider WebMethods instead. You can define a WebMethod on the codebehind that will be accessible through the javascript

Ex:

Page.aspx.cs

[WebMethod]
public static void wmSomeMethod(string param)
{
    string test=param;
}

Page.aspx

function callPageMethod(param)
{
    PageMethods.wmSomeMethod(param, onSuccess, onError);
}

Please note, you'll need ScriptManager on the page to use page methods.

EDIT: Alternative with jQuery is discussed here

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

On the WebMethod I can change the server controls? I call this method instead of doing the jquery call?
I have added a link to the page that describes how exactly to implement what you want.
The problem with this solution is that it doesn't change the server controls <asp:TextBox ...> using the server but using the client. From what I know the control is translated to HTML with a weird looking ID and not the one I gave it. How should I know what id to change and how does it look when the server translates it to plain HTML? Thanks!
You could either set control's ClientIDMode to Static to get the same ID on the client side, or use $("#<%=txtSomeTextBox.ClientID>") to access it using jQuery
0

If you want this to work through an AJAX request you have two options.

One is to use an Asp.Net update panel (not recommended but probably easiest). This will automatically make an ajax postback to an event handler on the server side and allow you to make changes in the code behind to server controls inside the update panel that will get propagated back to the user. Here's a good article on update panels. However, a word of caution, we have used them where I work and aren't really happy with them because they are much more heavyweight and jarring than straight AJAX.

Two, from your pseudo-code it doesn't look like you actually need anything from the server you just want your latitude and longitude to modify your HTML. If this is the case you could just write JavaScript that directly modifies your HTML to display what you want.

The important think to know for option two is that server controls aren't magic. Once they are client side they are represented as HTML markup just like anything else on the page and can be modified using JavaScript just like anything else.

If you do need to do some kind of action server side along with modifying what your client sees I recommend you write a light weight web service that listens for an ajax request and does what you need done instead of using update panels.

Improve this answer

5 Comments

Thanks for replying! But I need the score from the server.
Sure thing, it sounds like you really want to continue to work with the server controls rather than modifying the UI through JavaScript. The first option I mentioned, Update Panels, would allow you to do that and get the score from the server at the same time.
How could I trigger this update panel to update using jquery?
You can use the JavaScript method __doPostBack('<html element ID>') to manually fire an Asp.Net post back event in an UpdatePanel. see dopostback.net/index.php/ajax__dopostback (take special note of the hidden input fields in the UpdatePanel. Without these the whole page will reload instead of just the UpdatePanel) The __doPostBack event is a JavaScript method written by Asp.Net onto any page that has post back functionality. In your case this would be written because you have an UpdatePanel.
It tells me that it doesn't know what is __doPostBack, do you know why that could be?
0
  1. Make WCF service at server side with webHttpBinding
  2. Make jQuery event onlclick or something you need
  3. Call your WCF service using jQuery ajax call
  4. Apply result to your controls

Here is an example of calling a WCF service using jQuery

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.