Vadiklk
Vadiklk

Reputation: 3764

Change ASP.NET server control using ajax

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!

Upvotes: 0

Views: 1449

Answers (3)

RinatMegenbaev
RinatMegenbaev

Reputation: 31

  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

Upvotes: 0

Dimitri
Dimitri

Reputation: 7013

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

Upvotes: 1

Mark Rucker
Mark Rucker

Reputation: 8085

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.

Upvotes: 0

Related Questions