将asp.net mvc ajax actionlink重写为jquery/ajax语句

How would you rewrite this statement using Jquery + Ajax only? This code displays a link. When I click on it a view is returned into the StuffPanel id.

如何使用Jquery + Ajax重写此语句?此代码显示一个链接。当我点击它时，一个视图被返回到StuffPanel id中。

@{ AjaxOptions options = new AjaxOptions
           {
               InsertionMode = InsertionMode.Replace,
               UpdateTargetId = "StuffPanel",
               OnBegin = "OnBeginWork",
               OnComplete = "OnCompleteWork",
           };}
<p>@Ajax.ActionLink("show stuff", "Index", "Stuff", options)</p>

2 个解决方案

#1

Here you go:

给你:

<a href="/Index/Stuff" id="action">show stuff</a>

$(function() {
    $('#action').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $.ajax({
            url: url,
            beforeSend: OnBeginWork,
            complete: OnCompleteWork,
            success: function(html) {
                $('#StuffPanel').html(html);
            }
        });
    });
});

I'd recommend you keep the actionLink as all it's doing is getting the correct routing for you. Add an ID to it so that you can bind the click event easier, and then use the click event callback to fire the ajax call. Use the success function to replace the contents of #StuffPanel with the response.

我建议您保留actionLink，因为它所做的就是为您获得正确的路由。向它添加一个ID，这样您就可以更容易地绑定单击事件，然后使用单击事件回调来触发ajax调用。使用success函数将#StuffPanel的内容替换为响应。

#2

Based on the limited amount of information you have provided, something like this should get you going in the right direction:

基于你所提供的信息有限，类似这样的事情应该会让你朝着正确的方向前进:

$(function(){   
    $('#id-to-link').on('click',function(e){
        e.preventDefault();
        $.ajax('Index/Stuff',{
            type: 'POST',
            data: '{}',
            dataType: 'html',
            contentType: 'application/json; charset=utf-8',
            success: function(data){
                $('#StuffPanel').html(data);
            }
        });
    });
}

You'll have to check the data variable in the success callback. The HTML from the view will either be in data or in some property of data like data.d or data.message or something similar. Also, you should give your link a unique ID so you can bind your click event to it easily.

您必须在success回调中检查数据变量。视图中的HTML要么在数据中，要么在数据之类的数据属性中。d或数据。消息或类似的东西。此外，您应该给您的链接一个唯一的ID，以便您可以轻松地将单击事件绑定到它。