Need some Javascript ASP.NET advice

Question

I am a bit new to both javascript / asp.net but have a small dilemma, I have this simple page here (it is going to be a product page with options). If you select an option it returns the ID to the label right now so I know what has been selected, I need to get these 2 option ID's, query a database so it returns me a SKU in the label at the bottom without doing a postback, I read somewhere I should use some kind of ashx file but I don't really know what that means, any kind of steer on the right way forward and code examples is greatly appreciated.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <script type="text/javascript">
        function SetOptions() {
            var a = document.getElementById("ddOption1");
            var selectedIDa = a.options[a.selectedIndex].value;
            document.getElementById('option1').innerHTML = selectedIDa;
            var b = document.getElementById("ddOption2");
            var selectedIDb = b.options[b.selectedIndex].value;
            document.getElementById('option2').innerHTML = selectedIDb;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
        <table class="table">
            <tr>
                <td>Color:</td>
                <td>
                    <select name="ddOption1" id="ddOption1" onchange="SetOptions()">
                        <option selected="selected" value="0">-- Select --</option>
                        <option value="283">Blue</option>
                        <option value="299">White</option>
                        <option value="296">Red</option>
                        <option value="300">Yellow</option>
                    </select>
                </td>
                <td>
                    <label id="option1"></label> 
                </td>
            </tr>
            <tr>
                <td>Size:</td>
                <td>
                    <select name="ddOption2" id="ddOption2" onchange="SetOptions()">
                        <option selected="selected" value="0">-- Select --</option>
                        <option value="1">Small</option>
                        <option value="2">Medium</option>
                        <option value="3">Large</option>
                    </select>
                </td>
                <td>
                    <label id="option2"></label>
                </td>
            </tr>
        </table>
            <br />
            <label id="sku">SKU = </label>
    </div>
    </form>
</body>
</html>

Hi Dave, when you say "without doing a postback" do you mean call the server again? Is this an absolutely necessary constraint? — Neal
– Neal, Commented Nov 21, 2018 at 13:20
.ashx is an older ASP.net handler extension that is basically an endpoint you can call via AJAX, which is what you need in order to avoid doing a postback. The more modern replacement is ASP.net Web API; I would suggest to do some reading on that. Create the ASP.net Web API project which will have the endpoint (URL) that you will post data to from your JavaScript, and the backend of the WebAPI will query your database. For the AJAX call, there are .net AJAX components I believe, or look into the fetch() API in modern JavaScript, or jQuery.ajax() (jQuery ships with ASP.net by default). — Dmitriy Khaykin
– Dmitriy Khaykin, Commented Nov 21, 2018 at 13:38
Regarding the postback (may not be the right words) - I was hoping it could do all of the querying without the page having to reload. — Dave
– Dave, Commented Nov 21, 2018 at 13:45
@Dave with Handler and PageMethods you can do it, but it's not a fast learning if you don't know nothing about Ajax, take a look to my answer and to the technics that I wrote on it, study how they work togheter and you'll see that those things are needed everywhere nowadays, so it's a mandatory requirment to know them if you are interested to this job — Sycraw
– Sycraw, Commented Nov 21, 2018 at 13:51

Sycraw · Accepted Answer · 2018-11-21 13:39:13Z

The ASHX file is called "ASP.NET handler", and it's purpose generally, it's to handle ajax requests. Another way to handle Ajax requests in ASP.NET with webform pattern, is to use WebMethods, so take a look to them too.

If you don't know what I'm talking about:

Ajax requests are called also XMLHttpRequests and their purpose are to load a resource (text, binary...) with HTTP Requests that happen within the "Life" of a web page rendered on the browser. Then, with Javascript you can handle Ajax requests for take those info and make them interact with page logic/presentation.

If I can suggest you a way to learn what you're doing, read about Ajax request, then learn about how they're managed with pure JS and then with JQuery (you're using it, and it has a bounch of methods for handle those requests)

Then, I'll start to wonder if WebPage is the right way to create a website with Ajax, because MVC is a more flexible and "interactive-web oriented" pattern that allows you to have more freedom with page rendering

Collectives™ on Stack Overflow

Need some Javascript ASP.NET advice

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related