Question

我对javascript / asp.net都有些陌生，但是有一个小难题，我在这里有一个简单的页面（它将是带有选项的产品页面）。如果选择一个选项，它会立即将ID返回到标签，因此我知道选择了什么，我需要获取这两个选项ID，查询数据库，以便它在底部的标签中向我返回SKU，而无需回发，我在某处阅读了应该使用某种ashx文件的信息，但我真的不知道这意味着什么，在正确的方法和代码示例中进行任何形式的指导都是值得赞赏的。

<!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>

Answer 1

ASHX文件称为“ ASP.NET处理程序”，通常用于处理Ajax请求。使用Webform模式在ASP.NET中处理Ajax请求的另一种方法是使用WebMethods，因此也请看一看。

如果您不知道我在说什么：

Ajax请求也称为XMLHttpRequests，其目的是通过HTTP请求加载资源（文本，二进制...），该HTTP请求发生在浏览器上呈现的网页的“生存期”内。然后，使用Javascript，您可以处理Ajax请求以获取这些信息，并使它们与页面逻辑/表示进行交互。

如果我可以建议您一种方法来学习您正在做的事情，请阅读有关Ajax请求的信息，然后了解如何通过纯JS和JQuery（您正在使用它，并且有一个绑定）来管理它们。处理这些请求的方法）

然后，我将开始怀疑WebPage是否是使用Ajax创建网站的正确方法，因为MVC是一种更加灵活和“面向交互式Web”的模式，可让您在页面呈现方面拥有更大的自由度

需要一些Javascript ASP.NET建议

1 个答案: