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

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

然后你可以改变上面代码片段中的第4行：

var propertyId = Request["propertyId"];

Answer 2

您无法通过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方法。

WebMatrix AJAX INSERT无法正常工作

2 个答案: