ASP MVC + AJAX, пытается асинхронно обновить div - PullRequest
Новая
       13

ASP MVC + AJAX, пытается асинхронно обновить div

4 голосов
/ 20 декабря 2010


Я новичок в Asp MVC и пытаюсь выполнить небольшое асинхронное обновление (я использую MVC3 RC2 с Razor, но я могу управлять и с решениями ASPX).

У меня есть главная страница, которая отображает поле корзины покупок на каждой странице, вызывая Html.RenderAction («Корзина», «Магазин»).Действие Cart ShopController вызывает базу данных и т. Д. И выводит результаты.Это работает.
Первая проблема: если я добавлю ActionLink в это частичное представление (например, Html.ActionLink ("Remove")), то даже если я вызову PartialView () из действия Remove, этоотображает только корзину и ничего больше (по сути, моя страница исчезает).
Вторая проблема: Внутри этого частичного представления есть div с именем cartContent.Я хочу иметь возможность разместить ссылку в любом месте (не только на главной странице или в частичном представлении), которая при нажатии вызывает действие контроллера, а затем обновляет ТОЛЬКО div cartContent на основе результатов.Я пробовал Ajax.ActionLink, но он делает то же самое, что и Html.ActionLink, хотя я импортировал Microsoft.MvcAjax js libs.
Кроме того, если я решу первую проблему, я хочу, чтобы она также была асинхронной.

Какое решение мне использовать?Я попытался установить UpdateTargetID в «cartContent», я попытался обернуть cartContent в Ajax.BeginForm, ничего.Должен ли я использовать jQuery (о котором я ничего не знаю)?Должен ли я сериализовать какой-либо ответ на JSON и обновить div вручную в Javascript?(Я не очень хорош в JS, я иду из C # стороны вещей)

1 Ответ

4 голосов
/ 20 декабря 2010

Вы помещаете ссылку куда хотите: 

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

А затем в отдельный файл javascript: 

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

Примечание: если обновляемый div содержит также ссылку, товам может понадобиться использовать функцию .live(), иначе обработчик события щелчка не будет работать во второй раз, поскольку DOM будет изменен: 

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