需要一些Javascript ASP.NET建议



我对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>

ASHX文件被称为"ASP.NET处理程序",其目的通常是处理ajax请求。ASP中处理Ajax请求的另一种方法。NET的webform模式,就是使用WebMethods,所以也要看看它们。

如果你不知道我在说什么:

Ajax请求也称为XMLHttpRequest,其目的是用HTTP请求加载资源(文本、二进制…(,这些请求发生在浏览器上呈现的网页的"生命周期"内。然后,使用Javascript,您可以处理Ajax请求获取这些信息,并使它们与页面逻辑/表示交互。

如果我可以建议你一种方法来学习你正在做的事情,阅读Ajax请求,然后了解如何使用纯JS和JQuery来管理它们(你正在使用它,它有很多处理这些请求的方法(

然后,我会开始怀疑WebPage是否是用Ajax创建网站的正确方法,因为MVC是一种更灵活和"交互式面向web"的模式,允许您在页面渲染方面有更多的自由度

最新更新