ASP MVC + AJAX，想把异步更新一个div [英] ASP MVC + AJAX, trying to Update a div asynchronously

问题描述

我是新来的天冬氨酸MVC，而我试图完成一个小异步更新（我使用MVC3 RC2，用剃刀，但我可以和ASPX解决方案可管理太）。

I'm new to Asp MVC, and I'm trying to accomplish a little async update (I'm using MVC3 RC2, with Razor, but I can manage with ASPX solutions too).

我有一个母版页，它通过调用Html.RenderAction呈现在每一页上的购物车框（购物车，店）。该ShopController的车动作调用数据库等，并输出其结果。这个工程。
第一个问题：：如果我把一个ActionLink的这个局部视图（如Html.ActionLink（删除）），那么即使我叫PartialView（）的删除操作，它只是呈现在购物车，没有别的（在本质上，我的网页消失）。
问题二：有一个名为cartContent这个局部视图内股利。我希望能够把一个连接无处不在（不仅仅是局部视图上的母版页或），它会pressed调用一个控制器操作，然后只更新cartContent div的成果的基础上。我试过Ajax.ActionLink但它一样Html.ActionLink，即使我进口Microsoft.MvcAjax JS库。
另外，如果我解决第一个问题，我想这是异步为好。

I have a Master page, which renders a shopping cart box on every page by calling Html.RenderAction("Cart","Shop"). The Cart action of the ShopController calls the database, etc, and outputs the results. This works.
First problem: if I put an ActionLink in this partial view (like Html.ActionLink("Remove")), then even if I call PartialView() from the Remove action, it renders only the shopping cart, and nothing else (in essence, my page disappears).
Second problem: There is a div called "cartContent" inside this partial view. I want to be able to put a link ANYWHERE (not just on the Master page or in the partial view), which when pressed calls a controller Action, and then updates ONLY the cartContent div based on the results. I've tried Ajax.ActionLink but it does the same as Html.ActionLink, even though I imported the Microsoft.MvcAjax js libs.
Also, if I solve the first problem, I want that to be async as well.

我用什么解决方案？我试过设置UpdateTargetID为cartContent，我已经试过包裹cartContent到Ajax.BeginForm，什么都没有。我一定要使用jQuery（我什么都不知道）？难道我序列一些应对JSON，并在Javascript手动更新DIV？ （我不是在JS真是太好了，我是从事物的C＃端来了）

What solution do I use? I've tried setting UpdateTargetID to "cartContent", I've tried wrapping the cartContent into an Ajax.BeginForm, nothing. Do I HAVE to use jQuery (which I know nothing of)? Do I serialize some response to JSON, and update the div manually in Javascript? (I'm not really good at JS, I'm coming from the C# side of things)

推荐答案

您把任何你想要的链接：

You put a link wherever you want:

@Html.ActionLink("remove item", "remove", "somecontroller", 
    new { id = Model.Id }, new { @class = "remove" })

然后在一个单独的JavaScript文件中：

And then in a separate javascript file:

$(function() {
    $('.remove').click(function() {
        // when the link is clicked
        // perform an ajax request:
        $.ajax({
            url: this.href,
            type: 'delete',
            success: function(result) {
                // when the AJAX call succeed do something with the result
                // for example if the controller action returned a partial
                // then you could show this partial in some div
                $('#someDivId').html(result);
            }
        });

        // don't forget to cancel the default action by returning false
        return false;
    });
});

注：如果您正在更新的股利也包含链接，那么你可能需要使用 .live（） 功能或单击事件处理程序将无法正常工作，第二次是因为DOM将进行修改：

Remark: if the div you are updating contains also the link then you might need to use the .live() function or the click event handler will not work the second time because the DOM will be modified:

$('.remove').live('click', function() {  
     ...
});

这篇关于ASP MVC + AJAX，想把异步更新一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！