代码之家 › 专栏 › 技术社区 › Charmander

如何使用JavaScript通过Ajax调用访问数据库?

asp.net-mvc ajax asp.net javascript

Charmander · 技术社区 · 14 年前

我对这东西很陌生,所以请你放心。

我正在使用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()是我在其他地方拥有的函数。

谢谢!

4 回复 | 直到 11 年前

Randolpho 14 年前

您不能(也不应该)直接从JavaScript连接到数据库。即使理论上你可以(我认为没有什么是不可能的),你也不应该这样做;你必须向公众开放数据库,让任何致力于安全的人在他们完成自己的工作后都把你的头发拔出来。

您应该做的是找到一些可以作为数据库代理的中介。如果这是一个足够好的提示的话,几乎和ASP.NET一样。

如果不是这样:

创建自定义ASP.NET控件并让它填充表单数据 服务器端 . 让它的后置句柄验证,然后更新数据库 服务器端 .

Jay 14 年前

我用 jQuery (在封面下使用HTTP请求对象)。当然,您必须创建一个与之对话的Web服务,它可以访问您的数据库。您应该将XML和JSON看作是格式化所传递数据的替代方案。

Mike Comstock 14 年前

这听起来像是WCF数据服务的完美任务。这基本上允许jquery直接(几乎)与您的数据库对话。退房 http://stephenwalther.com/blog/archive/2010/03/30/using-jquery-and-odata-to-insert-a-database-record.aspx 举个例子。

Reid Evans 12 年前

Ajax调用可以通过jquery完成,它将向控制器操作发送一个post。控制器将接受POST并执行持久性。

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);
    }
}