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

我可以从JavaScriptMVC连接到SQL吗?

asp.net-mvc html javascript java c#

MrM · 技术社区 · 14 年前

我正在填充将添加到SQL数据库的名称列表。在这个简单的例子中,如何在不刷新页面的情况下将信息发送到SQL Server?

<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>

3 回复 | 直到 14 年前

Gabe 14 年前

通过jquery使用Ajax getJSON() 是我经常使用的方法。 GETJSON() 是一个包装 ajax() 我相信的方法。

下面是一个JS方法的例子,它对表单数据进行序列化,并执行传递序列化数据的Ajax请求。

如果在这种情况下成功,您可以返回一个JSON对象。在我的示例中,我只是返回一个字符串,上面写着“成功”。因此,对于我的简单示例,您将看到一个现在显示成功的警报框。

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

在您的控制器中,这里有一个用于Ajax的操作示例您的数据以线性字符串的形式序列化,因此您必须对其进行解析,这非常容易。然后获取数据并执行各自的数据库逻辑。然后返回一个JSON对象。

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

jaltiere 14 年前

您可以使用.ajax方法来实现这一点。

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

然后在你的控制器中你可以这样做:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddProperty(Property prop)
{
   // add property to database, etc.        
   return Json(true);
}

可以从中获取json.stringify here .

Steven Dorfmeister 14 年前

我会将该表包装成一个表单,然后使用Ajax Post将数据发送回实际执行插入操作的服务器端页面。

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