Question

我正在学习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);
 }

Answer 1

一般来说，你应该发布你到目前为止所做的事情。当你是新手时，我会给你一点推动。您的页面看起来与此类似。

<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操作中添加一些逻辑并从那里开始分支。

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

1 个答案: