CODEWITHSUNDEEP
javascriptasp.netajaxasp.net-mvc
Charmander
Charmander

Reputation: 196

How can I hit my database with an AJAX call using javascript?

I am pretty new at this stuff, so bear with me.

I am using ASP.NET MVC.

I have created an overlay to cover the page when someone clicks a button corresponding to a certain database entry. Because of this, ALL of my code for this functionality is in a .js file contained within my project.

What I need to do is pull the info corresponding to my entry from the database itself using an AJAX call, and place that into my textboxes. Then, after the end-user has made the desired changes, I need to update that entry's values to match the input. I've been surfing the web for a while, and have failed to find an example that fits my needs effectively.

Here is my code in my javascript file thus far:

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

The stuff I have commented out is what I need to accomplish and/or is not available until prior issues are resolved.

Any and all advice is appreciated! Remember, I am VERY new to this stuff (two weeks, to be exact) and will probably need highly explicit instructions.

BTW: overlaySetup() and CloseOverlay() are functions I have living someplace else.

Thanks!

Upvotes: 1

Views: 2737

Answers (4)

Reid Evans
Reid Evans

Reputation: 1641

The ajax call can be done with jQuery and it would send a Post to a controller action. The controller would accept the Post and perform persistence.

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

Controller

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

Upvotes: 0

Mike Comstock
Mike Comstock

Reputation: 6720

This sounds like the perfect task for a WCF Data Service. This basically lets jQuery talk directly (almost) to your database. Check out http://stephenwalther.com/blog/archive/2010/03/30/using-jquery-and-odata-to-insert-a-database-record.aspx for an example.

Upvotes: 0

Jay
Jay

Reputation: 14481

I use jQuery (which uses an HTTP Request object under the covers). You would of course have to create a web service that it talks to, that does your database access. You should look at XML and JSON as alternatives to format the data you're passing.

Upvotes: 1

Randolpho
Randolpho

Reputation: 56448

You cannot (and shouldn't, ever) connect to the database directly from Javascript. Even if you theoretically could (I suppose nothing's impossible) you shouldn't; you'd have to open the DB up to the public in a way that would make anyone dedicated to security pull your hair out once they'd finished with their own.

What you should do instead is find some intermediary that can act as a proxy for the database. Almost in the same way that ASP.NET does, if that's a good enough hint.

If it's not:

Create a custom ASP.NET control and have it fill your form data server-side. Have its post-back handle validation and then updating the database server-side.

Upvotes: 2

Related Questions