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, потому что вы даже не можете запустить запрос. Вы используете функцию для запуска при нажатии клика. Но события кликов не будут.

Причина: Нет кнопки с идентификатором для события click. См. Нажмите кнопку триггера № ниже.

Совет: Чтобы проверить, есть ли какие-либо запросы на сервер или нет, вы должны использовать это. В каждом браузере, когда вы нажимаете F12, вы открываете Developer Tools. Убедитесь, что вы находитесь на сетевой вкладке. Вы сможете проверить любой сетевой запрос на сервер. Запросы Ajax также сохраняются там как журнал, там статус и все там есть. Это будет основным, но мощным инструментом, который поможет вам понять, как делаются запросы Ajax.

В вашем коде есть определенные проблемы.

Ошибка в коде: В коде отсутствует ошибка, посмотрите на кнопку отправки. Его имеющий код, как:

<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(){ 

Но не было ни одной кнопки с идентификатором 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" /> 

Затем вы можете изменить 4-ю строку в фрагменте выше:

var propertyId = Request["propertyId"];