Javascript 如何调用控制器方法和更新视图?
我正在为学术目的学习ASP.net,为了掌握信息的传递方式,我正在尝试实现以下目标: 页面上有一个文本框、按钮和表格。当我在texbox中输入文本并按下按钮时,它会将内容发送到该视图控制器中的一个方法(Stocks.addSymbol(string)),然后该方法会将该字符串添加到列表中,并更新页面中的表以包含新字符串(无需刷新) 它分为两部分:从视图调用控制器方法(可能使用Javascript/JQuery),以及在不强制刷新的情况下更新视图中的内容 由于我对ASP.net完全陌生,对Javascript/JQuery也相当陌生,因此非常感谢您的帮助。谢谢 Index.cshtml:Javascript 如何调用控制器方法和更新视图?,javascript,jquery,asp.net-mvc,asp.net-mvc-3,razor,Javascript,Jquery,Asp.net Mvc,Asp.net Mvc 3,Razor,我正在为学术目的学习ASP.net,为了掌握信息的传递方式,我正在尝试实现以下目标: 页面上有一个文本框、按钮和表格。当我在texbox中输入文本并按下按钮时,它会将内容发送到该视图控制器中的一个方法(Stocks.addSymbol(string)),然后该方法会将该字符串添加到列表中,并更新页面中的表以包含新字符串(无需刷新) 它分为两部分:从视图调用控制器方法(可能使用Javascript/JQuery),以及在不强制刷新的情况下更新视图中的内容 由于我对ASP.net完全陌生,对Java
<script>
$(function() {
$('#addStock').on('click', function () {
console.log("Sending data");
$.ajax({
dataType: "json",
url: 'StockController/AddStock',
data: {symbol: $('#symbol').val()}
}).done(function (data) {
console.log("adding row");
$('#dataTable').append('<tr><td>' + data.name + '</td><td>' + data.symbol + '</td><td>' + data.price + '</td></tr>');
});
console.log("completed?");
});
});
</script>
<p>
<label for="symbol">Stock Symbol</label>
<input type="text" id="symbol" name="symbol">
<input type="button" id="addStock" value="Look up">
</p>
@if (ViewBag.success)
{
<table id="dataTable">
<tr>
<th>Name</th>
<th>Symbol</th>
<th>Price</th>
</tr>
@foreach (StocksWithFriends.Controllers.Stock s in ViewBag.stocks)
{
<tr>
<td>@s.name</td>
<td>@s.symbol</td>
<td>@s.price</td>
</tr>
}
</table>
}
一般来说,你应该发布你到目前为止所做的事情。因为你是新来的,我会给你一点鼓励。您的页面将与此类似
<html>
<head>
<script src="path/to/jquery.js"></script>
</head>
<body>
<p>
<label for="symbol">Stock Symbol</label>
<input type="text" id="symbol" name="symbol">
<input type="button" id="add" value="addStock">
</p>
<table id="dataTable">
<tr>
<th>Symbol</th>
<th>Price</th>
</tr>
<tr>
<td>MO</td>
<td>65</td>
</tr>
</table>
<script>
$(function() {
$('#addStock').on('click', function() {
$.ajax({
dataType: "json",
url: 'controller/action',
data: {symbol: $('#symbol').val()}
}).done(function(data) {
$('#dataTable').append('<tr><td>' . data.symbol . '</td><td>' . data.price . '</td></tr>');
});
});
});
</script>
</body>
</html>
更改所有占位符URL/方法名称,并在ASP.NET操作中加入一些逻辑,然后从那里开始分支。通常打开,因此您应该发布到目前为止所做的事情。因为你是新来的,我会给你一点鼓励。您的页面将与此类似
<html>
<head>
<script src="path/to/jquery.js"></script>
</head>
<body>
<p>
<label for="symbol">Stock Symbol</label>
<input type="text" id="symbol" name="symbol">
<input type="button" id="add" value="addStock">
</p>
<table id="dataTable">
<tr>
<th>Symbol</th>
<th>Price</th>
</tr>
<tr>
<td>MO</td>
<td>65</td>
</tr>
</table>
<script>
$(function() {
$('#addStock').on('click', function() {
$.ajax({
dataType: "json",
url: 'controller/action',
data: {symbol: $('#symbol').val()}
}).done(function(data) {
$('#dataTable').append('<tr><td>' . data.symbol . '</td><td>' . data.price . '</td></tr>');
});
});
});
</script>
</body>
</html>
更改所有占位符URL/方法名称,并在ASP.NET操作中加入一些逻辑,然后从那里开始分支。`dataType:'json`或`dataType:'json`?我在很多地方都看到了它的重要性?这两者在javascript中没有区别。两种方法都有效。当文本中有撇号时,我通常使用双引号。不知道为什么我用双引号替换了那个小部分;我已经用我的代码更新了这个问题。当我运行它并单击按钮时,Javascript控制台会打印“发送数据”和“完成”,但Ajax调用(GET to)返回404,因此不会调用AddStock。我错过了什么?此外,我不知道如何检查控制器控制台的输出;在处理web项目时,我在哪个面板中查看它?您的URL是/Stock/AddStock,而不是/StockController/AddStock。NET将获取该股票名称并查找StockController。在你的例子中.NET可能正在寻找StockControllerController,而你没有?我在很多地方都看到了它的重要性?这两者在javascript中没有区别。两种方法都有效。当文本中有撇号时,我通常使用双引号。不知道为什么我用双引号替换了那个小部分;我已经用我的代码更新了这个问题。当我运行它并单击按钮时,Javascript控制台会打印“发送数据”和“完成”,但Ajax调用(GET to)返回404,因此不会调用AddStock。我错过了什么?此外,我不知道如何检查控制器控制台的输出;在处理web项目时,我在哪个面板中查看它?您的URL是/Stock/AddStock,而不是/StockController/AddStock。NET将获取该股票名称并查找StockController。在你的例子中.NET可能正在寻找StockControllerController,而你没有。
public ActionResult Action(string symbol) {
return Json(new {symbol=symbol, price=53.21});
}