How to triggger server side code from javascript/jquery in ASP.NET webforms

Question

0.00/5 (No votes)

See more:

Hi,

I have a listbox in my project that listing some values which i'm pulling from the database. The values have parent I'ds associated with them and are listed in listbox like below:

UK(parent)
London(child)
Manchester(Child)
USA(parent)
New York(child)
Florida(child)

What I would like to do is that when a user select a child then the parent should be auto select. i.e when you select London , I want UK to be auto selected. And also i would like to do this without the page being posted back so that why i want to do it in JavaScript/ jquery

Please see what i have done so far below:

What I have tried:

Markup

ASP.NET

<asp:ListBox runat="server" ID="lblMultiSelect" SelectionMode="multiple" CssClass="inputText" AutoPostBack="false" >

Javascript

This is the way i'm getting the child value as Id:

JavaScript

$(document).ready(function () {
            var select = $("#<%=lblMultiSelect.ClientID%>");
            var txt = $("#<%=listBoxValue.ClientID%>"); //<<just putting id to a textbox here for testing purposes

            select.change(function (e) {
                var result = "";
                var options = select.children("option:selected");
                $.each(options, function (i, el) {
                    result += $(el).val();
                    if (i < options.length - 1) {
                        result += ",";
                    }
                });
                txt.val(result);
            });
        })

//Code behind

This is where i'm stuck.. i mean i know how to query the db using c# but i'm just not sure on how i can pass the Id from javascript function into a c# method.
Do i need to have something like this:

C#

public void GetParent (int childID)
{
 var p = dbcontext.Table.Where(x => x.Id == childId);
//then auto select the parent  here without posting the page back?
}

How would i go about in doing this? i hope this makes sense

and thank you for your time

Posted 21-Nov-17 5:04am

1Future

Updated 21-Nov-17 11:33am

Add a Solution

Comments

F-ES Sitecore 21-Nov-17 11:14am

Add a webservice (asmx file) and you can call that from your code

https://forums.asp.net/t/1934215.aspx?Using+jQuery+ajax+to+call+asmx+webservice+methods

Note that any updates to components as a result needs to be done from your js code also, you can't manipulate controls from a webservice like you can a code-behind file.

Richard Deeming 21-Nov-17 11:41am

I'd be inclined to ignore the server-side altogether, and find a way to identify the parent list item on the client.

The simplest option would be to add a CSS class to the parent items, or to use data- attributes on each item. But unfortunately, the control doesn't store or recreate custom attributes when the page posts back. You'd either need to disable ViewState for the list and re-bind the items on every request, or use a custom control.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Laxmidhar tatwa technologies · Answer 1 · 2017-11-21T11:33:00

$(document).ready(function () {
var select = $("#<%=lblMultiSelect.ClientID%>");
var senddata = select.val();
var txt = $("#<%=listBoxValue.ClientID%>"); //<<just putting id to a textbox here for testing purposes

select.change(function (e) {
$.ajax({
type: "POST",
url: "CS.aspx/GetCurrentTime",
data: '{name: "' + senddata + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
}
});
});
});
function OnSuccess(response) {
$.each(response, function (i, el) {

// your code for listbox

});
}

//code behind
[webmethod]
public void GetParent (int childID)
{
var p = dbcontext.Table.Where(x => x.Id == childId);
//then auto select the parent here without posting the page back?
}