从 asp.net razor 视图调用 ajax 请求

Question

如何从以 JSON 格式返回数据的 razor 视图发起 ajax 请求（调用控制器操作）？

在我的剃刀视图中单击操作链接后，该页面执行发布请求，该请求将页面重定向到 /actionName 当然不存在。

我也在使用 jQuery，但如果我使用 jQuery ajax 方法，我不确定如何从 razor 视图中获取需要传递的数据。

ShowEventLogs.cshtml

@{ ViewBag.Title = "Event Logs"; }

@model IEnumerable

<Application.Models.EventLogs>

<table id="data-table" class="table display responsive" style="width:100%">

   <thead class="thead-colored thead-light">

      <tr>

         <th>Time</th>

         <th>Scheme</th>

         <th>Serial Number</th>

         <th>Batch</th>

         <th>Exp Date</th>

         <th>Product Code</th>

         <th>Http Code</th>

         <th>Is Confirmed?</th>

         <th>Confirmation Date</th>

         <th>Verify Pack</th>

      </tr>

   </thead>

   <tbody>

      @foreach (var item in Model)

      {

      <tr>

         <td>@item.Timestamp</td>

         <td>@item.ProductCodeScheme</td>

         <td>@item.SerialNumber</td>

         <td>@item.Batch</td>

         <td>@item.ExpirationDate</td>

         <td>@item.ProductCode</td>

         <td>@item.HttpResponseCode</td>

         <td>@item.ConfirmedParsed</td>

         <td>@item.ConfirmedDate</td>

         if (@item.HttpResponseCode == "202")

         {

         <td class="text-secondary">@Html.ActionLink("Verify Pack", "VerifyPack", "Home", new { ProductCodeScheme = @item.ProductCodeScheme, ProductCode = @item.ProductCode, SerialNumber = @item.SerialNumber, Batch = @item.Batch, ExpirationDate = @item.ExpirationDate, CommandStatusCode = 0 }, new { @class = "text-info" })</td>

         }

         else

         {

         <td class="text-secondary">Not Available</td>

         }

      </tr>

      }

   </tbody>

</table>

}

https://i.stack.imgur.com/7vG2O.png

Answer 1

基本上，@Html.ActionLink()助手使用属性呈现锚标记 ( <a>)，并默认通过刷新整个页面来使用 GET 请求，因此您需要添加preventDefault()才能使用该元素的 AJAX 回调。如果 action 方法使用 HTTP GET 方法，您可以对锚链接的公共类执行简单的 AJAX 调用，如下所示：$('.text-info').on('click', function (e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; var url = $(this).attr('href');&nbsp; &nbsp; $.get(url, function (response) {&nbsp; &nbsp; &nbsp; &nbsp; // do something with AJAX response&nbsp; &nbsp; });});但是，由于目标控制器操作标记为[HttpPost]，因此您需要从href具有附加功能的属性中提取查询字符串参数，并通过设置在 AJAX 调用中使用它们type: 'POST'，或者使用$.post()：$('.text-info').on('click', function (e) {&nbsp; &nbsp; e.preventDefault(); // mandatory to prevent GET request&nbsp; &nbsp; var url = $(this).attr('href');&nbsp; &nbsp; var pcs = getQueryStringParams(url, 'ProductCodeScheme');&nbsp; &nbsp; var pc = getQueryStringParams(url, 'ProductCode');&nbsp; &nbsp; var sn = getQueryStringParams(url, 'SerialNumber');&nbsp; &nbsp; var batch = getQueryStringParams(url, 'Batch');&nbsp; &nbsp; var expDate = getQueryStringParams(url, 'ExpirationDate');&nbsp; &nbsp; var csc = getQueryStringParams(url, 'CommandStatusCode');&nbsp; &nbsp; // create key-value pair for action method parameters&nbsp; &nbsp; var obj = { ProductCodeScheme: pcs, ProductCode: pc, SerialNumber: sn, ... }&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; url: url.split('?')[0], // URL without query string, or use '@Url.Action("VerifyPack", "Home")'&nbsp; &nbsp; &nbsp; &nbsp; data: obj,&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json', // expects response as JSON&nbsp; &nbsp; &nbsp; &nbsp; success: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // do something with AJAX response&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; error: function (xhr, status, err) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // error handling&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; // just make sure that the link is not redirecting&nbsp; &nbsp; return false;});function getQueryStringParams(url, name) {&nbsp; &nbsp; &nbsp;return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];}实际上存在另一种从锚标记调用 AJAX 的方法，例如@Ajax.ActionLink()，具体取决于您的选择：@Ajax.ActionLink("Verify Pack", "VerifyPack", "Home", new { ProductCodeScheme = @item.ProductCodeScheme, ProductCode = @item.ProductCode, SerialNumber = @item.SerialNumber, Batch = @item.Batch, ExpirationDate = @item.ExpirationDate, CommandStatusCode = 0 },&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;new AjaxOptions { HttpMethod = "POST",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;InsertionMode = InsertionMode.Replace,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;UpdateTargetId = "targetElementId",&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;OnComplete = "onComplete();"&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;new { @class = "text-info" })笔记：如果您需要处理来自同一控制器的 AJAX 请求和普通请求，您可以使用Request.IsAjaxRequest()（或Context.Request.Headers["X-Requested-With"] == "XMLHttpRequest"在 Core MVC 中）区分它们。

Answer 2

这样的事情应该让你开始。为您需要从中提取信息的项目添加一个类。然后，不要使用 actionlink，只需创建一个具有唯一类的普通 a 元素。让 JQuery 处理这些链接上的点击事件，并通过 AJAX 调用将同一行的其他 TD 项传递给控制器。$(".button").click( function() {&nbsp; &nbsp; var tr = $(this).closest("tr");&nbsp; var ProductCodeScheme = tr.find(".ProductCodeScheme").html();&nbsp; var SerialNumber = tr.find(".SerialNumber").html();&nbsp; var Batch = tr.find(".Batch").html();&nbsp; var ExpirationDate = tr.find(".ExpirationDate").html();&nbsp; var ProductCode = tr.find(".ProductCode").html();&nbsp;&nbsp;&nbsp; $.ajax({&nbsp; &nbsp; url: "/Verify Pack/VerifyPack",&nbsp;&nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; data: ({&nbsp; &nbsp; &nbsp; &nbsp; ProductCodeScheme: ProductCodeScheme,&nbsp; &nbsp; &nbsp; SerialNumber: SerialNumber,&nbsp; &nbsp; &nbsp; Batch: Batch,&nbsp; &nbsp; &nbsp; ExpirationDate: ExpirationDate,&nbsp; &nbsp; &nbsp; ProductCode: ProductCode&nbsp; &nbsp; }),&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; cache: false,&nbsp; &nbsp; success: function(data){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; //Do something here for a successful POST&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; });&nbsp; &nbsp;&nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="data-table" class="table display responsive" style="width:100%">&nbsp; &nbsp;<thead class="thead-colored thead-light">&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Time</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Scheme</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Serial Number</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Batch</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Exp Date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Product Code</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Http Code</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Is Confirmed?</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Confirmation Date</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th>Verify Pack</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp;</thead>&nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>Timestamp 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ProductCodeScheme">ProductCodeScheme 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="SerialNumber">SerialNumber 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="Batch">Batch 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ExpirationDate">ExpirationDate 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ProductCode">ProductCode 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>HttpResponseCode 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>ConfirmedParsed 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>ConfirmedDate 1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="text-secondary"><a href="#!" class="button">Item 1</a></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>Timestamp 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ProductCodeScheme">ProductCodeScheme 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="SerialNumber">SerialNumber 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="Batch">Batch 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ExpirationDate">ExpirationDate2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="ProductCode">ProductCode 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>HttpResponseCode 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>ConfirmedParsed 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td>ConfirmedDate 2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="text-secondary"><a href="#!" class="button">Item 2</a></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp;</tbody></table>