从 MVC 4 中的数组获取变量并通过 jQuery ajax 发送到控制器

Question

我正在使用 foreach 遍历我的 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;
        }
    });
    };

我宁愿使用：

<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 post 请求在后台发送变量，但 ReportItemId 和 MimeType 来自控制器，我在 foreach 循环中获取它们。我怎样才能最好地从 javascript 函数访问这些变量？我真的不想将变量附加到 link 标记。这是可能的吗？

Answer 1

只要您在 razor 标记中为 link 构建正确的 href 值，您就可以在进行 ajax 调用时使用相同的值。

将 css class 添加到锚标签，以便我们稍后可以将其用于我们的 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 class 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 值中，您可以将它们保留在锚标记的 html5 数据属性中，并在点击事件中读取它们并将其附加到在进行 $.post 调用之前 url。

<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")";
     });

   });    

});

从 MVC 4 中的数组获取变量并通过 jQuery ajax 发送到控制器

Getting variables from an array in MVC 4 and sending to controller via jQuery ajax

arrays

variables

ajax

html-helper

asp.net-mvc-4