1

我正在为学术目的学习 ASP.net，为了掌握信息的传递方式，我正在尝试实现这一点：

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

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

由于我是 ASP.net 的新手并且对 Javascript/JQuery 相当陌生，因此我们将不胜感激任何帮助。谢谢！

索引.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);
 }
4

1 回答 1

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

更改所有占位符 URL/方法名称，并在 ASP.NET 操作中添加一些逻辑，然后从那里开始分支。

于 2013-04-06T15:38:56.293 回答