如何调用控制器方法和更新视图？

我正在学习ASP.net的学术目的，并掌握如何传递信息，我试图实现这一点：如何调用控制器方法和更新视图？

页面有一个文本框，按钮和表在上面。当我在texbox中输入文本并按下按钮时，它将内容发送到该视图控制器中的方法（Stocks.addSymbol（string）），然后将该字符串添加到列表中并更新页面中的表以包含新的字符串（不必刷新）。

它分为两部分：从视图调用控制器方法（可能使用Javascript/JQuery），更新视图中的内容而不强制刷新。

由于我是全新的ASP.net和JavaScript/JQuery相当新的，任何帮助将非常感激。谢谢！

Index.cshtml：

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

StockControler.cs：

public ActionResult AddStock(string symbol) 
{ 
     Console.WriteLine("Fetching " + symbol); 
     Stock s = GetStock(MakeStockUrl(symbol)); 
     Console.WriteLine("Stock result: " + s.ToString()); 
     return Json(s); 
}

来源

2013-04-06 Benjin

总体上，所以你应该张贴到现在为止您做了什么。当你是新的，我会给你一点点推动。你的页面看起来与此相似。

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

然后，您的操作将如下所示。

public ActionResult Action(string symbol) { 
    return Json(new {symbol=symbol, price=53.21}); 
}

改变所有的占位符网址/方法名称，并坚持一些逻辑在ASP.NET行动并从那里开始分支出来。

来源

2013-04-06 15:38:56 scottheckel

'dataType：“json”或'dataType：'json''？我看到它在很多地方很重要？ – 2013-04-06 15:43:46

这两个在javascript中没有区别。要么工作。通常在文本中有撇号时使用双引号。不知道为什么我换成双引号的那一小部分。 – scottheckel 2013-04-06 15:47:48

好的;我用我的代码更新了这个问题。当我运行它并单击按钮时，Javascript控制台打印“发送数据”和“完成”，但Ajax调用（GET to http：// localhost：5651/StockController/AddStock？symbol = T）返回404，并且因此AddStock没有被调用。我错过了什么？此外，我不知道如何检查控制器的Console.WriteLine调用输出;在处理Web项目时，我认为哪些面板？ – Benjin 2013-04-06 17:13:01

如何调用控制器方法和更新视图？

回答

相关问题