javascript - コントローラーメソッドを呼び出してビューを更新する方法は?

Question

私はアカデミックな目的で ASP.net を学習している途中であり、情報がどのように渡されるかを把握するために、これを実装しようとしています。

ページには、テキストボックス、ボタン、およびテーブルがあります。texbox にテキストを入力してボタンを押すと、コンテンツがそのビューのコントローラー (Stocks.addSymbol(string)) のメソッドに送信され、リストに文字列が追加され、ページ内のテーブルが更新されて、新しい文字列 (更新する必要なし)。

これは 2 つの部分に分けられます。ビューからのコントローラー メソッドの呼び出し (おそらく 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);
 }