CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcasp.net-mvc-3razor
Benjin
Benjin

Reputation: 2409

How to call controller method and update view?

I'm in the process of learning ASP.net for academic purposes, and to get a grip on how information is passed around, I'm trying to implement this:

Page has a textbox, button, and table on it. When I enter text into the texbox and press the button, it sends the contents to a method in that view's controller (Stocks.addSymbol(string)), which then adds the string to a list and updates the table in the page to include the new string (without having to refresh).

It breaks down into two parts: calling a controller method from the view (presumably using Javascript/JQuery), and updating content in the view without forcing a refresh.

As I'm completely new at ASP.net and fairly new with Javascript/JQuery, any help would be hugely appreciated. Thanks!

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

Upvotes: 1

Views: 1698

Answers (1)

scottheckel
scottheckel

Reputation: 9244

Generally on SO you should post what you have done so far. As you are new, I'll give you a little push. Your page will look similiar to this.

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

Then your action will look something like the following.

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

Change all the placeholder URLs/Method Names and stick some logic in your ASP.NET action and start branching out from there.

Upvotes: 1

Related Questions