0

私はAjaxに非常に慣れていません。

私が達成しようとしていることは、かなり一般的だと思います。データベースを参照する 2 つのドロップダウン ボックスがあります。これらは「エリア」と「リゾート」と呼ばれます。アイデアは、最初のボックスからエリアを選択すると、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);

AJAX 呼び出しの結果に応じて、"+ WHERE AreaName = something" を 2 番目のクエリに何らかの方法で追加する必要があると思います。

4

2 に答える 2

1

OK、Razor 構文を使用していますか? ショーを始めましょう。ねえ、あなたは同じ人ですか？

まず、私が使っている基本的な使い方をお伝えします。

  1. click keyupまたはchangeイベントを使用します。

  2. ajax 呼び出しで本文の内容を更新します。

  3. 基本的なチュートリアルが必要です。ASP.NET を学び、次に jQuery Ajax を学びましょう! それは簡単です。

あなたへの私の謙虚な要求：

ここに貼り付ける前に、少なくとも一度はコードを検索してください。あなたはたくさんの反対票を受け取り、ここにさらに質問を投稿するとブロックされる可能性があります. まず質問を検索してください。ただし、これはコードです。

OK、コードを作成するには:

私のために働くコードを投稿するつもりです。Ok？

メインページのコンテンツは次のとおりです。

@{
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()ました。

幸運を。

于 2013-09-18T13:52:55.857 に答える
0

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*/
            });
    });
});
于 2013-09-13T17:22:28.147 に答える