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

如何从razor视图启动ajax请求（调用控制器操作），该视图以JSON格式返回数据

在点击我的razor视图中的action链接后，页面执行post请求，该请求将页面重定向到/actionName，而/actionName当然不存在

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

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

基于答案的错误：

---

像这样的事情应该会让你开始。向需要从中提取信息的项添加类。然后，不使用actionlink，只需创建一个普通的元素和一个唯一的类。让JQuery处理这些链接上的单击事件，并通过AJAX调用将同一行的其他TD项传递给控制器

$（“.button”）。单击（函数（）{
var tr=$（此）.tr；
var ProductCodeScheme=tr.find（“.ProductCodeScheme”）.html（）；
var SerialNumber=tr.find（“.SerialNumber”）.html（）；
var Batch=tr.find（“.Batch”）.html（）；
var ExpirationDate=tr.find（“.ExpirationDate”）.html（）；
var ProductCode=tr.find（“.ProductCode”）.html（）；
$.ajax({
url:“/Verify Pack/VerifyPack”，
类型：“POST”，
数据：({
ProductCodeScheme:ProductCodeScheme，
SerialNumber:SerialNumber，
批次：批次，
到期日期：到期日期，
ProductCode:ProductCode
}),     
cache:false，
成功：函数（数据）{
//在这里为一个成功的帖子做点什么
}           
});    
});

时间
计划
序列号
批处理
出口日期
产品代码
Http代码
确认了吗？
确认日期
验证包
时间戳1
产品代码方案1
序号1
第一批
到期日期1
产品代码1
httpresponsecode1
确认纵火1
确认日期1
时间戳2
产品代码方案2
序列号2
第2批
到期日2
产品代码2
HttpResponseCode 2
确认纵火2
确认日期2
基本上
@Html.ActionLink（）
助手通过刷新整个页面来呈现带有属性的锚定标记（
），并默认使用GET请求，因此您需要添加
preventDefault（）
，以便从该元素使用AJAX回调。如果操作方法使用HTTP GET方法，则可以对锚点链接的公共类执行简单的AJAX调用，如下所示：

$('.text-info').on('click', function (e) {
    e.preventDefault();

    var url = $(this).attr('href');
    $.get(url, function (response) {
        // do something with AJAX response
    });
});

但是，由于目标控制器操作标记为
[HttpPost]
，因此需要使用附加函数从
href
属性提取查询字符串参数，并在AJAX调用中使用
类型：'POST'
设置，或使用
$.POST（）
：

实际上，还有另一种方法可以从锚标记调用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 }, 
                 new AjaxOptions { HttpMethod = "POST", 
                                   InsertionMode = InsertionMode.Replace, 
                                   UpdateTargetId = "targetElementId", 
                                   OnComplete = "onComplete();" 
                                 },
                 new { @class = "text-info" })

注意：

如果需要处理来自同一控制器的AJAX请求和普通请求，可以使用
request.IsAjaxRequest（）
（或
Context.request.Headers[“X-request-With”]=“XMLHttpRequest”
）来区分它们。
而不是
Html.ActionLink
，您必须自己创建锚定标记，然后使用
javascript
向其添加一个不引人注目的
onclick
。在您的点击处理程序中，您必须手动构建url以
get
，然后执行
$。ajax
Razer非常适合使用.NET模型格式化页面，但在尝试绑定ajax/JavaScript调用时几乎没有用。使用带有hacky href“#！”的锚定标记或其他一些html元素，一个公共类，并使用JQuery click处理程序将需要发送到控制器的w/e数据传递给控制器。谢谢。但是，在使用提取字符串查询参数的jQuery解决方案后，我仍然被重定向到
/Home/VerifyPack
。我已将错误屏幕截图添加到原始问题中。听起来您对
单击
事件绑定有问题。尝试将
e.preventDefault（）
移动到
单击事件的最底部。
$('.text-info').on('click', function (e) {
    e.preventDefault(); // mandatory to prevent GET request

    var url = $(this).attr('href');

    var pcs = getQueryStringParams(url, 'ProductCodeScheme');
    var pc = getQueryStringParams(url, 'ProductCode');
    var sn = getQueryStringParams(url, 'SerialNumber');
    var batch = getQueryStringParams(url, 'Batch');
    var expDate = getQueryStringParams(url, 'ExpirationDate');
    var csc = getQueryStringParams(url, 'CommandStatusCode');

    // create key-value pair for action method parameters
    var obj = { ProductCodeScheme: pcs, ProductCode: pc, SerialNumber: sn, ... }

    $.ajax({
        type: 'POST',
        url: url.split('?')[0], // URL without query string, or use '@Url.Action("VerifyPack", "Home")'
        data: obj,
        dataType: 'json', // expects response as JSON
        success: function (response) {
            // do something with AJAX response
        },
        error: function (xhr, status, err) {
            // error handling
        }
    });

    // just make sure that the link is not redirecting
    return false;
});

function getQueryStringParams(url, name) {
     return (RegExp(name + '=' + '(.+?)(&|$)').exec(url)||[,null])[1];
}

@Ajax.ActionLink("Verify Pack", "VerifyPack", "Home", new { ProductCodeScheme = @item.ProductCodeScheme, ProductCode = @item.ProductCode, SerialNumber = @item.SerialNumber, Batch = @item.Batch, ExpirationDate = @item.ExpirationDate, CommandStatusCode = 0 }, 
                 new AjaxOptions { HttpMethod = "POST", 
                                   InsertionMode = InsertionMode.Replace, 
                                   UpdateTargetId = "targetElementId", 
                                   OnComplete = "onComplete();" 
                                 },
                 new { @class = "text-info" })