Заменить частичное представление после действия в ASP.Net MVC - PullRequest
4 голосов
/ 12 сентября 2011

Я все еще новичок в ASP.NET MVC и удивляюсь, как добиться следующего: На обычном представлении, являющемся частью моей главной страницы, я создаю различное количество частичных представлений с циклом, каждое из которых представляет элемент, за который пользователь должен иметь возможность голосовать. После нажатия кнопки голосования рейтинг должен быть отправлен в базу данных, а после этого частичное частичное представление, по которому щелкнул пользователь, должно быть заменено тем же самым видом с некоторыми измененными визуальными свойствами. Какова наилучшая практика для достижения этой цели?

Вот как я начал: 1. Я определил частичное представление с помощью предложения if, различающего визуальный вид, в зависимости от флага в конкретной модели представления. Следовательно, если флаг положительный, отображаются элементы управления голосованием, если он отрицательный, это не так.

  1. Я назначил действие Url.Action (..) для кнопок голосования, которые запускают метод контроллера. При этом методе новый рейтинг добавляется в базу данных.

  2. В методе контроллера я возвращаю PartialView с обновленной ViewModel. К сожалению, заменяется весь вид, а не только частичный вид.

Буду очень признателен за любые предложения, как решить эту конкретную проблему или как достичь цели.

Большое спасибо, Chris

Ответы [ 2 ]

3 голосов
/ 12 сентября 2011

Тривиальным (но, безусловно, правильным и удобным) решением вашей проблемы является помощник Ajax.BeginForm () для голосования.Таким образом, вы изменяете свое голосование на вызовы ajax, и вы можете легко указать, что результат, возвращенный этим вызовом (из вашего действия по голосованию, которое вернет частичное представление только с 1 измененным элементом), будет использоваться для замены старого контента (например,один конкретный элемент, содержащий старый элемент перед голосованием).

Обновление - 11/30/2016

Например:

@using (Ajax.BeginForm("SomeAction", "SomeController", new { someRouteParam = Model.Foo }, new AjaxOptions { UpdateTargetId = "SomeHtmlElementId", HttpMethod = "Post" }))
1 голос
/ 12 сентября 2011

ASP.NET MVC является идеальной платформой для такого рода потребностей.Что бы я сделал, если бы у вас была возможность работать с JQuery Ajax API.

Следующее сообщение в блоге должно дать вам подсказку о том, что вы можете делать с вызовами PartialViews, JQuery и Ajax на сервер:

http://www.tugberkugurlu.com/archive/working-with-jquery-ajax-api-on-asp-net-mvc-3-0-power-of-json-jquery-and-asp-net-mvc-partial-views

ОБНОВЛЕНИЕ

Было предложено поместить краткое вступление, так что вот оно.

Следующий кодВаш метод действия:

    [HttpPost]
    public ActionResult toogleIsDone(int itemId) {

        //Getting the item according to itemId param
        var model = _entities.ToDoTBs.FirstOrDefault(x => x.ToDoItemID == itemId);
        //toggling the IsDone property
        model.IsDone = !model.IsDone;

        //Making the change on the db and saving
        ObjectStateEntry osmEntry = _entities.ObjectStateManager.GetObjectStateEntry(model);
        osmEntry.ChangeState(EntityState.Modified);
        _entities.SaveChanges();

        var updatedModel = _entities.ToDoTBs;

        //returning the new template as json result
        return Json(new { data = this.RenderPartialViewToString("_ToDoDBListPartial", updatedModel) });
    } 

RenderPartialViewToString - это метод расширения для контроллера.Вам нужно использовать Nuget здесь, чтобы вызвать очень маленький пакет с именем TugberkUg.MVC , который будет иметь расширение Controller, чтобы мы могли преобразовывать частичные представления в строку внутри контроллера.

Тогда вот краткая информация о том, как вы можете вызвать его с помощью JQuery:

var itemId = element.attr("data-tododb-itemid");
var d = "itemId=" + itemId;
var actionURL = '@Url.Action("toogleIsDone", "ToDo")';

$("#ajax-progress-dialog").dialog("open");

$.ajax({
    type: "POST",
    url: actionURL,
    data: d,
    success: function (r) {
        $("#to-do-db-list-container").html(r.data);
    },
    complete: function () {
        $("#ajax-progress-dialog").dialog("close");
        $(".isDone").bind("click", function (event) {
            toggleIsDone(event, $(this));
        });
    },
    error: function (req, status, error) {
        //do what you need to do here if an error occurs
        $("#ajax-progress-dialog").dialog("close");
    }
});

Необходимо предпринять некоторые дополнительные шаги.Итак, посмотрите на сообщение в блоге, в котором есть полное руководство.

...