Can I connect to SQL from JavaScript MVC?
I am populating a list of names to be added to my Sql database. In this simple case, how do I send information to the SQL server without refreshing my page?
<script type="text/javascript">
function addNewRow() {
$('#displayPropertyTable tr:last').after('<tr><td style="font-size:smaller;" class="name"></td><td style="font-size:smaller;" class="address"></td></tr>');
var $tr = $('#displayPropertyTable tr:last');
var propertyCondition = $('#txtPropAddress').val();
if (propertyCondition != "") {
$tr.find('.name').text($('#txtPropName').val());
$tr.find('.address').text($('#txtPropAddress').val());
}
}
</script>
...
<table id="displayPropertyTable" width= "100%">
<tr>
<td style="font-size:smaller;" class="name"></td>
<td style="font-size:smaller;" class="address"></td>
</tr>
</table>
...
<table>
<tr>
<td><b>Name</b></td>
<td colspan="2"><input id="txtPropName" type="text" /></td>
</tr>
<tr>
<td><b>Address</b></td>
<td colspan="2"><input id="txtPropAddress" type="text" /></td>
</tr>
</table>
...
<button onclick="addNewRow();">Add</button>
a source to share
Using AJAX via JQuery getJSON()
is a technique I use a lot. getJSON()
is a wrapper for the method ajax()
I believe.
Here's an example JS method that serializes form data and makes an ajax request passing the serialized data.
If you're successful in this case, you can pass the Json Object. In my example, I am simply passing in a string that says "Success". So you will see an alert box now showing "Success" in my simple example.
function addRowsViaAJAX() {
var d = new Date(); // IE hack to prevent caching
$.getJSON('/ControllerName/ActionName', { Data: $('#MyForm').serialize(), Date: d.getTime() }, function(data) {
// callback on success
alert(data);
}, 'json');
}
Your controller has an example of an action for use in AJAX. Your data comes in a serialized linear string, so you have to parse it, which is pretty simple. Then take the data and execute your database logic. Then return the Json object.
public virtual JsonResult ActionName(string data)
{
// take the data and parse the linear stream... I like to use the FormCollection
FormCollection collection = new FormCollection();
foreach (string values in data.Split('&')){
string[] value = values.Split('=');
collection.Add(value[0], value[1]);
}
// Now do your database logic here
return Json("Success");
}
a source to share
you can do it with .ajax method
var prop= {};
prop["Name"] = $("#txtPropName").val();
prop["Address"] = $("#txtPropAddress").val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/Admin/AddProperty",
data: JSON.stringify(release),
dataType: "json",
success: function(result) {
// do something on success
},
error: function(result) {
// do something on error
}
});
Then in your controller, you can do this:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddProperty(Property prop)
{
// add property to database, etc.
return Json(true);
}
You can get JSON.stringify from here .
a source to share
I would wrap this table in a form and then use an AJAX POST to post the data to the server-side page that is actually inserting.
$.ajax({
type: 'POST',
url: [URL_TO_PAGE_THAT_DOES_DB_INSERT],
data: $(_('[YOURFORMID')).serialize(),
success: function(data) {
//do something
}
error: function(xhr){
//do something else
}
});
a source to share