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 不太对劲？

Answer 1

您无法通过 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 对象，并用简单的 Response 替换它们，比如 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)。我能够得到响应的结果。所以你可以做的是改变请求的响应并写成：

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

而且桌子会变！这将删除表中的先前数据甚至整个表，并使用从响应中接收到的数据对其进行更新。然后我能够将请求发送到服务器，处理QueryString，然后写一个响应，然后使用$('#idofelement').html(response)我在特定区域写它。你可以像我一样尝试。

我使用的完整代码是：

我有这个代码的一个主页：

 @{
  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 方法。

Answer 2

Database.Execute 方法需要先传入要执行的SQL。你似乎根本没有传递它。另外，我假设 PropertyId 是一个整数？如果是这样，则不应将其括在引号中。事实上，您应该尝试分隔将通过参数传入的值。这是使用参数的好处之一。试试这个：

@{
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" />

那么你可以修改上面sn-p中的第4行：

var propertyId = Request["propertyId"];