ASP.net with Jquery save values to database.

[weeraa]

First of all I should have to say that I do have a good knowledge in C# and but not much knowledge in JS and Jquery.
I’m going to develop a web application which can see a specific location of a building (conference room, manager’s room) graphically. It is used a building map and a locator is created with jquery which is dragable.

Locator is used html img controller.

<div id="draggable" class="ui-icon-image">
            <img id="img1" src="/Resource/location_icon.png" width="27px" height="45px" />
</div>

Here is the jquery

$( "#draggable" ).draggable({containment: '#mainDIV'})

The interface like this.

One dropdown list (this controller is feed all the locations in the office such as manager’s office, conference room, lunch room etc.)
The map of the office
Locator (html img controller)
Save button (This is an asp button)
Now I want to save the location to the database.

Eg: Stage 1 : if the user select “manager’s room” from the dropdownlist, then user should have to drag and drop the locator to the right position and click save button.

Stage 2 : if the user select “manager’s room” from the dropdownlist, it should automatically show the locator in right position.

When click save button, top and left position of the img controller (or related div tag) should have to pass to the database. But still I do not have an idea, this must do with code behind? Can we use jquery to save data to the database?
Actually I do not have much knowledge to how handle a situation like Stage 1 and Stage 2.
I do not ask a code for this. Expect some direction for doing this.

[Traevel]

You could post the data to your controller using JSON, then save it to a database using an SQL connection.
Click Here

You might also want to look into the Entity Framework if you're looking for easier binding between your model and your database, if you don't like using jQuery a lot.
Click Here

Though I suppose you'd still have to handle the selection options with jQuery/Razor etc.

[weeraa]

Thanks for the reply Traevel.
But in this project im not going to use MVC or entity FW. Im tring to use ADO. Simple SQL query will be used.

There is some other thing I couldn't put in my original post. In this project I use some jpg file for the map and then there is a locator.
In this case, is it ok to save values to database which are 'top' and 'left' values of the locator? My personal opinion is above mention method is bit unfair, cause there various size monitors. And also when zooming and out zooming, locator location should change relatively. If so which can be the most suitable way of getting the location and is there some other way to do my work (or some technology) easily.

[Traevel]

Ok, I'm not really familiar with ADO myself but as far as the top and left coordinates go I'm not really sure what you mean. You have a jpg map and a draggable cursor, but want zoom in/out to alter the map size? If you do have fixed sized maps, i.e. 500x500 pixels it would probably be easier to have the top/left values depend on the position of the cursor on the picture and not the window position of the marker.

For instance, the office is a square that starts at x=10 and y=10 and ends at x=20 and y=20. If the marker would be on x=15 and y=15 it would be pinned into the office. Its position on the screen could be x=1015, y=1015 but that wouldn't matter. If you made the cursor draggable only within the area of your picture the user wouldn't be able to select a location that's not on the map. You would just need a large list of coordinates.

But wouldn't it be easier to simply highlight a part of the map? Or make areas clickable? That way you'd only need an image (or several if you want different sizes) and an html <map> (for each map image) and wouldn't have the hassle of reading and setting draggable cursors on screen positions based on coordinates from a database. There are plenty of generators for maps out there I'm sure, so you'd only have to draw around all the areas on the map you want people to be able to select (if I remember correctly older versions of paintshop pro used to have this feature built in). Then for the database you could just use the names of the areas: office, manager's room etc.

You could use jQuery for highlighting areas on the <map>. Or maybe even some css would do the trick.

jQuery Plugin

MapHighlightDemo

ps. if you meant zooming as in browser zooming, the demo still works fine if I ctrl-scroll.