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

I'm iterating through an array in my MVC 4 view using a foreach:

我正在使用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>
        }

As you can see above I'm sending my variables across in the url. I really don't want to do this so I have this function:

正如你在上面看到的那样,我在网址中发送我的变量。我真的不想这样做所以我有这个功能:

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 rather use:

我宁愿使用:

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

and send the variables behind the scenes with an ajax post request, but ReportItemId and MimeType come from the controller and I get them in the foreach loop. How can I best access these variables from the javascript function? I really didn't want to attach the variables to the link tag. Is this something that is possible?

并使用ajax post请求在幕后发送变量,但ReportItemId和MimeType来自控制器,我在foreach循环中得到它们。如何从javascript函数中最好地访问这些变量?我真的不想将变量附加到链接标记。这是可能的吗?

1 个解决方案

#1

As long as you build the correct href value for your link in your razor markup, you can use the same value when making the ajax call.

只要在剃刀标记中为链接构建正确的href值,就可以在进行ajax调用时使用相同的值。

Add a css class to the anchor tags so that we can use it later for our jQuery selection.

将一个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>

And in your javascript, listen to the click event on anchor tag with the css class ajaxLink

在您的javascript中,使用css类ajaxLink监听锚标记上的click事件

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

   });    

});

If you do not wish to keep the items in the href value for any reasons, you may keep those in html 5 data attributes of the anchor tag and read them in the click event and append it to the url before making the $.post call.

如果您不希望出于任何原因将项目保留在href值中,您可以将这些项目保留在锚标记的html 5数据属性中,并在click事件中读取它们并在进行$ .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>

And in the click event,read the data attributes and append to the url

在click事件中,读取数据属性并附加到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")";
     });

   });    

});

#1