Для этого достаточно простого для цикла . В будущем вы должны серьезно опубликовать код, чтобы показать, что вы пробовали.
var array1=[{value:1, label:'value1'},{value:2, label:'value2'}, {value:3, label:'value3'}];
var array2=[1,3];
var result = [];
for (var i = 0; i < array2.length; i++){
result.push(array1[array2[i]-1].label);
}
console.log(result); //["value1", "value3"]
Нечто подобное должно начать вас. Добавьте класс к элементам, из которых вам нужно получить информацию. Тогда вместо использования actionlink просто создайте обычный элемент с уникальным классом. Пусть JQuery обрабатывает события щелчка по этим ссылкам и передает другие элементы TD той же строки контроллеру с помощью вызова AJAX.
$(".button").click( function() {
var tr = $(this).closest("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",
type: "POST",
data: ({
ProductCodeScheme: ProductCodeScheme,
SerialNumber: SerialNumber,
Batch: Batch,
ExpirationDate: ExpirationDate,
ProductCode: ProductCode
}),
cache: false,
success: function(data){
//Do something here for a successful POST
}
});
});
<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%">
<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>
<tr>
<td>Timestamp 1</td>
<td class="ProductCodeScheme">ProductCodeScheme 1</td>
<td class="SerialNumber">SerialNumber 1</td>
<td class="Batch">Batch 1</td>
<td class="ExpirationDate">ExpirationDate 1</td>
<td class="ProductCode">ProductCode 1</td>
<td>HttpResponseCode 1</td>
<td>ConfirmedParsed 1</td>
<td>ConfirmedDate 1</td>
<td class="text-secondary"><a href="#!" class="button">Item 1</a></td>
</tr>
<tr>
<td>Timestamp 2</td>
<td class="ProductCodeScheme">ProductCodeScheme 2</td>
<td class="SerialNumber">SerialNumber 2</td>
<td class="Batch">Batch 2</td>
<td class="ExpirationDate">ExpirationDate2</td>
<td class="ProductCode">ProductCode 2</td>
<td>HttpResponseCode 2</td>
<td>ConfirmedParsed 2</td>
<td>ConfirmedDate 2</td>
<td class="text-secondary"><a href="#!" class="button">Item 2</a></td>
</tr>
</tbody>
</table>
В основном @Html.ActionLink()
помощник отображает тег привязки (<a>
) с атрибутами и по умолчанию использует запрос 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 с установкой type: 'POST'
, или использовать $.post()
:
$('.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 из тега привязки, например @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-Requested-With"] == "XMLHttpRequest"
в Core MVC).