ajax - WebMatrix AJAX INSERT が機能しない

Question

データベースにエントリを追加し、AJAX を使用して作成したテーブルを更新しようとしています。フォームの内容を「部分的な」ページに送信することはできますが、それが行き詰まる場所ですか?

これが私のコンテンツページです：

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

WebSecurity.RequireAuthenticatedUser(); 

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

var rPropertyId = Request.QueryString["PropertyID"];

var Roominfo = "SELECT * FROM RoomInfo WHERE PropertyID=@0";
var qRoominfo = db.Query(Roominfo, rPropertyId);
}

<h2>Current Rooms</h2>

<table id="room-table" class="table table-bordered">
<tr>
    <th>Room Name</th>
    <th>Room Type</th>
    <th>Room Description</th>
</tr>
@foreach(var row in qRoominfo){
<tr>
    <td>@row.RoomName</td>
    <td>@row.RoomType</td>
    <td>@row.RoomDescription</td>
</tr>
}
</table>

<form id="add-room-form" action="@Href("~/Partials/AddRoom")">
<div class="row">
        <span class="label"><label for="title">Room Name:</label></span>
        <input type="text" name="roomname" id="roomname" size="50" />
</div>
<div class="row">
        <span class="label"><label for="title">Room Type:</label></span>
        <input type="text" name="roomtype" id="roomtype" size="50" />
</div>
<div class="row">
        <span class="label"><label for="title">Room Description:</label></span>
        <input type="text" name="roomdescription" id="roomdescription" size="50" />
</div>

<input type="hidden" name="propertyid" value="@rPropertyId" />

<button class="btn btn-success" id="submitbutton">Submit</button>
</form>

<script type="text/javascript">   
$(function(){
 $('#submitbutton').click(function(){             
    $.ajax({        
        type: "POST",
            url: "/Partials/AddRoom",
            data: $("#add-room-form").serialize(),
            dataType: "text/plain",                          
        success: function (data) {
            $('#room-table').html(data);
        } 
        return false;       
        });
      });                 
   });
</script>

そして、これはデータベースにデータを「挿入する必要がある」部分的なページです:

@{
    var db = Database.Open("StayInFlorida");
    var sql = "INSERT INTO RoomInfo (PropertyID, RoomName, RoomType, RoomDescription, LastModified) " + 
        "VALUES (@0, @1, @2, @3, GetDate())";
    var propertyid = Request["propertyid"];
    var roomname = Request["roomname"];
    var roomtype = Request["roomtype"];
    var roomdescription = Request["roomdescription"];
    db.Execute(sql, propertyid, roomname, roomtype, roomdescription);
}

理論的には、情報をデータベースに書き込み、テーブルを更新する必要があるため、javascript に何か問題があると思いますか?

score 1 · Accepted Answer

リクエストを開始することさえできないため、ajax呼び出しでデータを送信できません。クリックが行われたときにトリガーする関数を使用しています。ただし、クリックイベントはありません。

理由:クリックイベントの ID を持つボタンがありません。以下のクリックトリガーの問題セクションを参照してください。

ヒント:サーバーへのリクエストがあるかどうかを確認するには、これを使用する必要があります。すべてのブラウザで F12 を押すと、開発者ツールが開きます。ネットワークタブにいることを確認してください。そこを介してサーバーに対して行われたネットワーク要求を確認できます。Ajaxリクエストもログとして保存され、ステータスとすべてがそこに存在します。これは基本的ですが、Ajax リクエストがどのように行われるかを理解するのに役立つ強力なツールです。

コードにも特定の問題があります。

HTML の問題:コードにエラーがあります。送信ボタンを見てください。そのコードは次のとおりです。

<button class="btn btn-success" type="submit" value="Submit"/>Submit</button>

次のようになります。

<button class="btn btn-success" type="submit" value="Submit">Submit</button>

そして、リクエストtype="submit"を作成する代わりにフォームを送信するため、これも次のように変更する必要があります。ajax私は自分のウェブサイトであなたのページを使用し、DataBaseオブジェクトを置き換えて単純なResponselikeに置き換え、Response.Write()キャッチした変数を書きました:

<button class="btn btn-success" id="submitbutton">Submit</button>

したがって、上記のコードを次のように変更したコードは次のようになります。

@{
  if(IsPost){
   var propertyid = "1";
   var roomname = Request["roomname"];
   var roomtype = Request["roomtype"];
   var roomdescription = Request["roomdescription"];
   var lastmodified = DateTime.Now;
   // here you will write the data to database using Database.Execute
   // Remember you should write the ajax response
   // here as a result of Response.Write()
   // However if you still want to load that page, its OK!
 }
}

先に述べたように、私がそれをに変更したpropertyidので、あなたは書いていました。ただし、実行したい場合は問題ありません。"'1'""1""'1'"

クリックトリガーの問題:

他にもいくつかの問題がありました。あなたが使用していた：

$('#submitbutton').click(function(){

しかし、ID のボタンはありませんでしたsubmitbutton。それでid、あなたが使っていたボタンのを変更しました。

あなたのコードで私が変更したこと:

私があなたのコードで行った変更は、POSTリクエストをに変更したことGETです。どの変数がサーバーに送信され、どのような結果が得られるかを確認します。GET リクエストは簡単に POST リクエストを確認できるので、このコードを使用する方が簡単でした。

それでも POST リクエストを使用したい場合はserialize()、フォームを試しJSONてサーバーに送信する必要があります。しかし、GET は簡単です。

次に、$.ajaxセクションに別のフィールドを次のように指定しました。

data: 'roomname=' + $('#roomname').val() + 
'roomtype=' + $('#roomtype').val() + 
'roomdescription=' + $('#roomdescription').val(),

これにより、送信されるデータの文字列が作成されます。そして、それはそのページに引っ掛かります。そして私も外しif(IsPost)ました。Responseの結果を得ることができました。したがって、リクエストのレスポンスを変更して次のように書くことができます。

$("#room-table").html(response);

そして食卓が変わる！これにより、テーブル内の以前のデータまたはテーブル全体が削除され、応答から受信したデータで更新されます。そして、リクエストをサーバーに送信し、処理してQueryStringからレスポンスを書き、それを使用$('#idofelement').html(response)して特定の領域に書き込むことができました。私と同じように試すことができます。

私が使用した完全なコードは次のとおりです。

私がこのコードを持っていたメインページの1つ：

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

  <h2>Current Rooms</h2>

    <div class="row">
        <span class="label"><label for="title">Room Name:</label></span>
        <input type="text" name="roomname" id="roomname" size="50" />
    </div>
    <div class="row">
        <span class="label"><label for="title">Room Type:</label></span>
        <input type="text" name="roomtype" id="roomtype" size="50" />
    </div>
    <div class="row">
        <span class="label"><label for="title">Room Description:</label></span>
        <input type="text" name="roomdescription" id="roomdescription" size="50" />
    </div>
     <button class="btn btn-success" id="submitbutton" value="Submit" >Submit</button>

   <script type="text/javascript">   
    $(function(){
     $('#submitbutton').click(function(){             
        $.ajax({        
            url: '/Partials',     
            data: 'roomname=' + $('#roomname').val() + 'roomtype=' + 
            $('#roomtype').val() + "roomdescription=" + 
            $('#roomdescription').val(),
            dataType: 'text',             
            contentType: 'text/html',             
            success: function(response) {
                $("#body").html(response);
                },
            error: function(data){                 
                alert('Something went wrong');             
                }         
            });
          });                 
       });
  </script>

専用ページに変更してpartials使用しました。そのページのコンテンツはこちらです。

@{
  var propertyid = "1";
  var roomname = Request["roomname"];
  var roomtype = Request["roomtype"];
  var roomdescription = Request["roomdescription"];
  var lastmodified = DateTime.Now;
  Response.Write("Room name: " + roomname + "<br>Room Type: " 
  + roomtype + "<br>Room Description: " + roomdescription + 
  "<br>Property: " + propertyid);
}

ここでデータベース変数を使用するのはあなた次第です。Response.Write およびその他のコードを使用した場所Databaseメソッドを使用できます。また、メソッドを追加することもできますWebSecurity。

score 1 · Accepted Answer

Database.Execute メソッドでは、実行する SQL を最初に渡す必要があります。あなたはそれをまったく渡していないようです。また、PropertyId は整数だと思いますか? その場合は、引用符で囲まないでください。実際、パラメーターを介して渡される値を区切ってみてください。これは、パラメーターを使用する利点の 1 つです。これを試して：

@{
if(IsPost){
    var db = Database.Open("StayInFlorida");
    var sql = "INSERT INTO RoomInfo (PropertyID, RoomName, RoomType, RoomDescription, LastModified) " + 
        "VALUES (@0, @1, @2, @3, GetDate())";
    var propertyid = 1;
    var roomname = Request["roomname"];
    var roomtype = Request["roomtype"];
    var roomdescription = Request["roomdescription"];
    db.Execute(sql, propertyid, roomname, roomtype, roomdescription);
}
}

現在、Properytid をハードコーディングしています。動的にしたい場合は、隠しフィールドを AJAX フォームに追加し、値を次のように設定しますrPropertyId。

<input type="hidden" name="propertyId" value="@rPropertyId" />

次に、上記のスニペットの 4 行目を変更できます。

var propertyId = Request["propertyId"];

ajax - WebMatrix AJAX INSERT が機能しない

2 に答える 2

Related

Reference