如何調用控制器方法和更新視圖？

我正在學習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

如何調用控制器方法和更新視圖？

回答

相關問題