Получение переменных из массива в MVC 4 и отправки в контроллер с помощью JQuery AJAX

Question

Я переборе массива, на мой взгляд MVC 4 с использованием Еогеасп:

@model dynamic 
@foreach (var item in Model) 
     { 
      <tr class="row"> 
       <td>@Html.Label("", (string)item.DisplayName)</td> 
       <td><a href="@Url.Action(item.ViewName, "Reporting", new { @name = "SendToFilter", ReportItemId = item.ReportItemId, MimeType = item.MimeType })" alt="A Link"><span class="glyphicon glyphicon-folder-open" id="btnOpen" data-edit-id="OpenDocument" title="@Text.Get(Text.eTextType.Button, "Open")"></span></a></td> 
      </tr> 
     } 

Как вы можете видеть выше, я посылаю мои переменные в URL. Я действительно не хочу, чтобы сделать это так, у меня есть эта функция:

function SendToFilter() { 
     $.ajax({ 
      url: "@Url.Action("ReportListing", "Reporting", null)", 
      type: "POST", 
      data: { 'UReportFileName': UReportFileName }, 
     success: function (result) { 
      // Send the user to correction action method of controller 
      var link = '@Url.Action("ReportListing", "Reporting", null)'; 
      window.location.href = link; 
     } 
    }); 
    }; 

Id достаточно использовать:

<td><a href="#" onclick="SendToFilter()" alt="A Link"><span class="glyphicon glyphicon-folder-open" id="btnOpen" data-edit-id="OpenDocument" title="@Text.Get(Text.eTextType.Button, "Open")"></span></a></td> 

и отправить переменные за кулисами с запросом после Ajax, но ReportItemId и MimeType поступают из контроллера, и я получаю их в цикле foreach. Как лучше всего получить доступ к этим переменным из функции javascript? Я действительно не хотел привязывать переменные к тегу ссылки. Это что-то возможно?

Answer 1

Пока вы строите правильное значение href для своей ссылки в разметке бритвы, вы можете использовать то же значение при совершении вызова ajax.

Добавить класс css в теги привязки, чтобы мы могли использовать его позже для нашего выбора jQuery.

<td> 
    <a class="ajaxLink" 
     href="@Url.Action(item.ViewName, "Reporting", new { @name = "SendToFilter", 
     ReportItemId = item.ReportItemId, MimeType = item.MimeType })" 
     alt="A Link"> 
     <span class="glyphicon glyphicon-folder-open" data-edit-id="OpenDocument" 
      title="@Text.Get(Text.eTextType.Button, "Open")"></span> 
    </a> 
</td> 

И в вашем JavaScript, слушать событие щелчка на якорь тег с классом CSS ajaxLink

$(function(){ 

    $("a.ajaxLink").click(function(e){ 

    e.preventDefault(); // prevent the default click behaviour 

    $.post($(this).attr("href"),function(response){ 
     //do something with the response 
     // reload to some other page 
     // window.location.href="@Url.Action("ReportListing","Report")"; 
    }); 

    });  

}); 

Если вы не хотите, чтобы держать детали в HREF значение каким-либо причинам, вы могут содержать те из атрибутов данных html 5 тега привязки и читать их в событии клика и добавлять его к URL-адресу перед вызовом $.post.

<td> 
    <a class="ajaxLink" 
     href="@Url.Action(item.ViewName, "Reporting")" 
     data-name="SendToFilter" data-reportitemid="@item.ReportItemId" 
     data-mime="@item.MimeType" 
     alt="A Link"> Link Text </a> 
</td> 

И в случае щелчка, прочитать атрибуты данных и добавить к URL

$(function(){ 

    $("a.ajaxLink").click(function(e){ 

    e.preventDefault(); // prevent the default click behaviour 
    var _this=$(this); 
    var myUrl=_this.attr("href"); 
    myUrl+="?name="+_this.data("name"); 
    myUrl+="&reportItemId="+_this.data("reportitemid"); 
    myUrl+="&MimeType="+_this.data("mime"); 
    alert(myUrl); 

    $.post(myUrl,function(response){ 
     //do something with the response 
     // reload to some other page 
     // window.location.href="@Url.Action("ReportListing","Report")"; 
    }); 

    });  

});