2010-04-27 49 views
2

我正在填充将添加到我的Sql数据库的名称列表。在这种简单的情况下,如何在不刷新我的页面的情况下将信息发送到SQL服务器?我可以从JavaScript MVC连接到SQL吗?

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

Ajax:ASP.NET MVC很好地支持服务器端服务,可以很容易地从客户端JavaScript(例如通过JQuery)调用服务器端服务。 – 2010-04-27 20:08:40

回答

2

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

可以与阿贾克斯方法

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

您可以从here得到JSON.stringify。

0

我会将该表格封装在表单中,然后使用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 
     } 
}); 
相关问题