AJAX - 發佈JSON到控制器ASP.NET MVC

我試圖打電話給不贊成的Google Finance API（只是爲了解）解析響應並將其發佈到我的控制器。我向用戶顯示具有0值的視圖，但是一旦響應返回，我將顯示解析的結果。AJAX - 發佈JSON到控制器ASP.NET MVC

除了將視圖打印到控制檯而不是顯示之外，結果看起來很完美。我在這裏忽略了什麼？任何其他反饋也歡迎，因爲我只是想學習ASP.NET MVC。

這裏是我的代碼：

的HomeController：

public ActionResult Index3() 
    { 
     var model = from a in realList orderby a.Symbol select a; 

     return View(model); 
    } 

    [HttpPost] 
    public ActionResult Index3(string JSON) 
    { 
     // parse response... 
     // listOfStocks.Add(...); 

     var model = from a in listOfStocks orderby a.Symbol select a; 

     return View(model); 
    } 

    static List<Stocks> listOfStocks = new List<Stocks>();

INDEX3：

@model IEnumerable<WebApplication2.Models.Stocks> 

@{ 
    ViewBag.Title = "Stock Texter"; 
} 
<h2>Stock List</h2> 


<table class="table table-striped"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.Symbol) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Price) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Change) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.ChangePercent) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.PreviousClose) 
     </th> 
     <th></th> 
    </tr> 

    @foreach (var item in Model) { 
     <tr> 
      <td> 
       @Html.DisplayFor(modelItem => item.Symbol) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Price) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.Change) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.ChangePercent) 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.PreviousClose) 
      </td> 
     </tr> 
    } 
</table> 


@section JavaScript 
{ 
    <script src="@Url.Content("/Scripts/test.js")"></script> 
}

test.js：

(function ($, window, document) { 
    var data = ""; 
    $.when(
     $.getJSON("http://finance.google.com/finance/info?client=ig&q=NASDAQ%3AAAPL,JPM,CAT,MSFT&callback=?", function (response) { 
      data = response; 
      console.log("call succcessful"); 
     }) 
    ).then(function() { 
     $.ajax({ 
      type: "POST", 
      url: "/home/index3", 
      data: { 'JSON': JSON.stringify(data) }, 
      success: function (response2) { 
       console.log(response2); 
      } 
     }); 
    }); 
}(window.jQuery, window, document));

來源

2017-06-21 user94614

因爲當前的代碼登錄響應來自ajax c所有到success事件的控制檯。

理想情況下，您應該返回從ajax調用中顯示錶所需的標記。所以最好把它移到我們可以使用的局部視圖。創建一個名爲「Results.cshtml」的局部視圖並移動代碼以在那裏渲染表格。

在這裏，我只是使用p標籤，而不是寫所有的代碼來呈現表。你可以從這裏的問題

@model IEnumerable<WebApplication2.Models.Stocks> 
@foreach (var item in Model) 
{ 
    <p>@item.Symbol</p> 
    <!-- You can change this table rendering code as you have in the question. --> 
}

與原密碼（需要渲染表）代替現在在初始頁面加載你的主視圖（Index3.cshtml）調用這個局部視圖。裹在調用局部視圖在一個div容器

@model IEnumerable<WebApplication2.Models.Stocks> 
@{ 
    ViewBag.Title = "Stock Texter"; 
} 
<h2>Stock List</h2> 
<div id="resultContainer"> 
    @Html.Partial("Results",Model) 
</div>

現在爲您Ajax調用，在Ajax調用的成功事件中返回這個局部視圖只是

[HttpPost] 
public ActionResult Index3(string JSON) 
{ 
    // to do : Your code 
    var model = from a in listOfStocks orderby a.Symbol select a; 

    return PartialView("Results",model); 
}

現在，而不是寫到控制檯，更新容器div。

success: function (response2) { 
      $("#resultContainer").html(response2); 
     }

來源

2017-06-21 19:54:43 Shyju

這做到了，非常感謝！ – user94614

請查看我的回答以解決您的問題。如果你想讓我看看更多的答案，請讓我知道。

查看：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index59</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btn").click(function (ev) { 
       (function ($, window, document) { 
        var data = ""; 
        $.when(
         $.getJSON("http://finance.google.com/finance/info?client=ig&q=NASDAQ%3AAAPL,JPM,CAT,MSFT&callback=?", function (response) { 
          data = response; 
          console.log("call succcessful"); 
         }) 
        ).then(function() { 
         alert(JSON.stringify(data)) 
         $.ajax({ 
          type: "POST", 
          url: "/Home/GetData", 
          data: { 'JSON': JSON.stringify(data) }, 
          success: function (response2) { 
           var ap = "dh"; 
           //You have to manually assign each value or use a partial view 
           var theArr = JSON.parse(response2); 
           var apdg = "dh"; 
           jQuery.each(theArr, function (index, value) { 
            //selecting all rows, just selecting two fields 
            $("#theData").append(" e=" + value.e + " ltt=" + value.ltt) 
            //you would set the field based on id 
            //$("#MyField").val(value.ltt) 
           }); 
          } 
         }); 
        }); 
       }(window.jQuery, window, document)); 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <div id="theData"></div> 
    <input type="button" value="GetData" id="btn" /> 
</body> 
</html>

控制器：

public string GetData(string JSON) 
    { 
     return JSON; 
    }

來源

2017-06-21 20:38:14 kblau

AJAX - 發佈JSON到控制器ASP.NET MVC

回答

相關問題