使用 Ajax、JavaScript 和 Webmatrix 更新选择框

Question

我对 Ajax 很陌生。

我想，我想要实现的目标是相当普遍的。我有 2 个下拉框，引用我的数据库，它们被称为“区域”和“度假村”。这个想法是，当我从第一个框中选择区域时，它只会在第二个框中显示该区域内的度假村。

这是我的表格：

<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
    <div class="span3">
    <label>Area:</label>
        <select name="area">
            <option value="">Any</option>
                @foreach(var row in qlistarea){
                    <option value="">@row.AreaName</option>
                }
        </select>
    </div>
    <div class="span3">
    <label>Resort:</label>
        <select name="resort">
            <option value="">Any</option>
                @foreach(var row in qlistresort){
                    <option value="">@row.ResortName</option>
                }
        </select>
    </div>
    <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
 </form>
</div>

我认为查看我当前的 SQL 代码可能会有用：

var listarea = "SELECT DISTINCT AreaName FROM ResortInfo";
var qlistarea = db.Query(listarea);

var listresort = "SELECT DISTINCT ResortName FROM ResortInfo";
var qlistresort = db.Query(listresort);

我猜我需要在第二个查询中添加一个“+ WHERE AreaName = something”，这取决于 AJAX 调用的结果，对吧？

Answer 1

好的，您使用的是 Razor 语法吗？让演出开始吧。嘿，你不是同一个人吗？

首先我会告诉你我使用的基础知识。

1. 我使用 click keyup 或 change 事件。

2. 我更新了 ajax 调用的正文内容。

3. 你需要一些基础教程，伙计！学习 ASP.NET，然后学习 jQuery Ajax！那会很简单。

我对你的谦虚请求：

好友请至少搜索一次代码，然后再将其粘贴到此处。您会得到很多反对票，并且可能会因为在此处发布更多问题而被阻止。请先搜索问题。然而，这是代码。

好的，创建代码：

我将发布适合我的代码。好的？

这里是主页内容：

@{
Layout = "~/_SiteLayout.cshtml";
}

<script>
  $(document).ready(function () {
    $('#area').change(function () {
        $.ajax({
            url: "testtworesult",
            data: "type=resortupdate&resval=" + $('#area').val(),
            success: function (data) {
                $('#resort').html(data);
            }
        });
    });
      $('.btn').click(function () {
        $.ajax({
            url: "testtworesult",
            data: "type=submit&area=" + $('#area').val() + "&res=" + 
            $('#resort').val(),
            success: function (data) {
                $('#result').html(data);
             }
          });
       });
     });
  </script>

 <div id ="homepage-form-div" class="row">
  <div class="span3">
  <label>Area:</label>
     <select id="area">
         <option value="">Any</option>
           <option value="1">One</option>
         <option value="2">Two</option>
     </select>
  </div>
  <div class="span3">
 <label>Resort:</label>
     <select id="resort">
         <option value="">Any</option>
             <option value="Love">Love</option>
         <option value="Hate">Hate</option>
     </select>
  </div>
  <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
  <div style="font-weight: bold; margin-top: 20px;" id="result"></div>
</div>

然后是ajax页面：

@{
var db = Database.Open("StayInFlorida");

var getresortval = Request.QueryString["resval"];
var type = Request.QueryString["type"];
var res = Request.QueryString["res"];
var area = Request.QueryString["area"];

var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = '@0'";
var qlistresort = db.Query(listresort, getresortval);

if(type == "resortupdate") {
    if(getresortval == "Kissimmee") {
    Response.Write ("<option value='kissimmee'>Kissimmee</option");
    }
    if(getresortval == "Davenport") {
    Response.Write("<option value='davenport'>Davenport</option");
    }
} else if(type == "submit") {
Response.Write(@"You selected the Resort!<br>
Your area was: " + area + @".<br>
And your resort was: " + res + @". Hope you have a great trip!");
}
}

这不会将内容保存在数据库中，您需要为此使用INSERT INTO。然后你需要SELECT * FROM 来选择数据。我只是使用了Response.Write()。

祝你好运。

Answer 2

对于 AJAX 调用，您需要一个 AJAX 可以调用的函数，该函数包含用户选择区域后的度假村查询。我对 Razor 或 Webmatrix 不熟悉，所以这里有一个伪函数（基于 PHP），您可能可以将其转换为您的环境：

if (isset($_POST['area'])) set_resort();    /*AJAX will set $_POST['area'], then do function that returns output to AJAX*/

. . .

function set_resort() {
    var listresort = "SELECT DISTINCT ResortName FROM ResortInfo WHERE AreaName = " $_POST['area'];    /*make sure you escape that variable, however you do that in your syntax*/
    var qlistresort = db.Query(listresort);
    var resortArray = array();    /*or however you make arrays in your syntax*/
    @foreach(var row in qlistresort){
        resortArray[] = @row.ResortName;    /*append each resort name to array*/
    }
    echo json_encode(@resortArray);    /*JSON is preferred way to echo array back to AJAX*/
}

您的 HTML 看起来像...

<div id ="homepage-form-div" class="row">
<form id ="homepage-form"action=" /Search1.cshtml">
    <div class="span3">
    <label>Area:</label>
        <select id="areaSelect" name="area"> <!-- add an ID for easier jQuery selection -->
            <option value="">Any</option>
                @foreach(var row in qlistarea){
                    <option value="">@row.AreaName</option>
                }
        </select>
    </div>
    <div class="span3">
    <label>Resort:</label>
        <select id="resortSelect" name="resort"> <!-- add an ID for easier jQuery selection -->
            <option value="">Any</option>  
        </select>
    </div>
    <button type="submit" class="btn btn-default" value="Submit" style="p">Go!</button>
 </form>
</div>

最后，您的 jQuery AJAX 调用将是：

$('#areaSelect').on('change', function() {
    var str = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: /*URL of your page*/
        dataType: 'json',
        data: str,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(errorThrown + '\n' + textStatus);
        },
        success: function(msg) {
            $.each(msg, function(index, value) {
                $('#resortSelect').append('<option value=' + index + '>' + value + '</option>';    /*add each resort from the set_resort() query to the resort select input*/
            });
    });
});