Как я могу ударить свою базу данных с помощью вызова AJAX с помощью javascript?

Question

Я довольно новичок в этом, так что несите меня.

Я использую ASP.NET MVC.

Я создал наложение для покрытия страницы, когда кто-то нажимает кнопку, соответствующую определенной записи в базе данных. Из-за этого ВСЕ мой код для этой функции находится в файле .js, содержащемся в моем проекте.

Что мне нужно сделать, это потянуть информацию, соответствующую моей записи из самой базы данных, с помощью вызова AJAX и поместить ее в мои текстовые поля. Затем, после того, как конечный пользователь внес нужные изменения, мне нужно обновить значения этой записи, чтобы они соответствовали входу. Некоторое время я занимался серфингом в Интернете и не смог найти пример, который бы соответствовал моим потребностям эффективно.

Вот мой код в моем файле JavaScript до сих пор:

function editOverlay(picId) { 
     //pull up an overlay 
     $('body').append('<div class="overlay" />'); 
     var $overlayClass = $('.overlay'); 

     $overlayClass.append('<div class="dataModal" />'); 
     var $data = $('.dataModal'); 

     overlaySetup($overlayClass, $data); 


     //set up form 
     $data.append('<h1>Edit Picture</h1><br /><br />'); 

     $data.append('Picture name: &nbsp;'); 
     $data.append('<input class="picName" /> <br /><br /><br />'); 

     $data.append('Relative url: &nbsp;'); 
     $data.append('<input class="picRelURL" /> <br /><br /><br />'); 

     $data.append('Description: &nbsp;'); 
     $data.append('<textarea class="picDescription" /> <br /><br /><br />'); 

     var $nameBox = $('.picName'); 
     var $urlBox = $('.picRelURL'); 
     var $descBox = $('.picDescription'); 

     var pic = null; 

//this is where I need to pull the actual object from the db 
     //var imgList = 
     for (var temp in imgList) { 
      if (temp.Id == picId) { 
       pic= temp; 
       } 
      } 

    /* 
     $nameBox.attr('value', pic.Name); 
     $urlBox.attr('value', pic.RelativeURL); 
     $descBox.attr('value', pic.Description); 
    */ 

     //close buttons 
     $data.append('<input type="button" value="Save Changes" class="saveButton" />'); 
     $data.append('<input type="button" value="Cancel" class="cancelButton" />'); 


     $('.saveButton').click(function() { 
      /* 
      pic.Name = $nameBox.attr('value'); 
      pic.RelativeURL = $urlBox.attr('value'); 
      pic.Description = $descBox.attr('value'); 
      */ 

      //make a call to my Save() method in my repository 

      CloseOverlay(); 
     }); 

     $('.cancelButton').click(function() { 
      CloseOverlay(); 
     }); 
    } 

Вещей я закомментирована, что мне нужно сделать, и/или не доступен, пока предыдущие вопросы не будут решены.

Все советы приветствуются! Помните, я ОЧЕНЬ новичок в этом материале (точнее, две недели), и, вероятно, вам понадобятся очень четкие инструкции.

BTW: overlaySetup() и CloseOverlay() - это функции, в которых я живу где-то еще.

Спасибо!

Answer 1

Вы не можете (и не должны) когда-либо подключаться к базе данных непосредственно из Javascript. Даже если бы вы теоретически могли (я полагаю, ничего невозможного) вы не должны; вам придется открыть БД для публики таким образом, чтобы кто-нибудь, кто был посвящен безопасности, вытаскивал ваши волосы, когда они закончили со своими собственными.

Вместо этого вы должны найти некоторого посредника, который может выступать в качестве прокси-сервера для базы данных. Почти так же, как это делает ASP.NET, если это достаточно хороший намек.

Если это не так:

Создать пользовательский элемент управления ASP.NET и это заполнить свои данные формы на стороне сервера. Удостоверьтесь в проверке его последействия, а затем обновите базу данных на стороне сервера.

Answer 2

Я использую jQuery (который использует объект HTTP-запроса под обложками). Вам, конечно же, нужно будет создать веб-сервис, с которым он ведет переговоры, доступ к базе данных. Вы должны смотреть на XML и JSON в качестве альтернативы для форматирования данных, которые вы передаете.

Answer 3

Это звучит как идеальная задача для службы данных WCF. Это в основном позволяет jQuery говорить напрямую (почти) в вашу базу данных. Например, посмотрите http://stephenwalther.com/blog/archive/2010/03/30/using-jquery-and-odata-to-insert-a-database-record.aspx.

Answer 4

Вызов ajax может быть выполнен с помощью jQuery, и он отправит сообщение в действие контроллера. Контроллер будет принимать сообщение и выполнять постоянство.

JQuery

$('.saveButton').click(function() { 
     //prepare your content 
     var data = { 
      name: $nameBox.val(), 
      relativeUrl: $urlBox.val(), 
      description: $descBox.val() 
     }; 

     //make a call to my Save() method in my repository   
     $.ajax({ 
      url: "/mycontroller/action", 
      data: JSON.stringify(data), 
      type: "POST", 
      cache: false, 
      contentType: "application/json; charset=utf-8" 
     }).done(function(data) { 
      //do something when request returns 
      CloseOverlay(); 
     }); 
    }); 

Контроллер

public class MyController : BaseController 
{ 
    [HttpPost] 
    public ActionResult Action(string name, string relativeUrl, string description) 
    { 
     //not sure what repository you're using. 
     //replace this with your actual repository implementation 
     var repository = new MyRepository(); 
     repository.Save(name, relativeUrl, description); 
    } 
}