Вызов ajax-запроса из бритвы asp.net

Для этого достаточно простого для цикла . В будущем вы должны серьезно опубликовать код, чтобы показать, что вы пробовали.

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"]

JSBIN

1
задан zaq 16 January 2019 в 10:24
поделиться

2 ответа

Нечто подобное должно начать вас. Добавьте класс к элементам, из которых вам нужно получить информацию. Тогда вместо использования 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>

0
ответ дан Nathan Champion 16 January 2019 в 10:24
поделиться

В основном @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).

0
ответ дан Tetsuya Yamamoto 16 January 2019 в 10:24
поделиться
Другие вопросы по тегам:

Похожие вопросы: