Блог

Главная - Вопросы по программированию - .NET / jquery — предварительный просмотр результата формы / преобразование представления в строку

.NET / jquery — предварительный просмотр результата формы / преобразование представления в строку

#c# #jquery #asp.net-mvc

#c# #jquery #asp.net-mvc

Вопрос:

Вот ситуация (с использованием MVC 2.0):

Я пытаюсь создать функцию, позволяющую пользователю просматривать изменения, которые они вносят в свою биографию / профиль, без предварительной фиксации их изменений. Пользователь заполняет форму, нажимает кнопку «Предварительный просмотр» и видит, как выглядят его изменения. Одна из трудностей заключается в том, что интерфейс имеет другую главную страницу, поэтому нам нужно отобразить все представление, а не только элемент управления.

Вот подход, который я выбрал:

  1. Асинхронная отправка сериализованной формы в действие контроллера
  2. Манипулируйте моделью, чтобы конкретизировать коллекции и т.д., Которые не публикуются
  3. Верните внешний вид, передав ему эту измененную модель
  4. Перехватите ответ на метод asynch, оберните его в iframe и запишите в раздел в виде лайтбокса на странице

Код, который я использую… Действие контроллера (метод BuildPreview просто слегка изменяет модель)

     [HttpPost]
    [Authorize]
    public ActionResult PreviewProfile(PersonModel model)
    {
        return View("Person", PeopleService.BuildPreview(model));;
    }

HTML / Jquery stuff:

 <script type="text/javascript">
$(document).ready(function () {

    $("#previewButton").click(function (e) {
        $.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
            $("#previewFrame").html(response);
            $("#holdMyPreview").modal({
                                overlayClose: true,
                                escClose: true,
                                autoResize: true,
                            }, "html");
        });
    });
});

Модальный метод — это всего лишь базовая вещь в стиле лайтбокса.

Столкнулся с двумя проблемами:

  1. РЕДАКТИРОВАТЬ — удалил это, я случайно извлек дочерний элемент управления
  2. Iframe не отображает html (возможно, потому, что он недействителен, потому что в нем отсутствуют теги html / body / head?). Если я просто помещу ответ непосредственно в div, без iframe, это сработает… ошибка с неправильной таблицей стилей. Если я пытаюсь вставить его в iframe, он просто обрабатывает его как пустую страницу, отображаются только теги html, head и body.

Есть мысли?

Сэм

PS: Пробовал это на форумах MSDN (http://forums.asp.net/t/1675995.aspx/1?Rendering a view into a string ) и это ни к чему не привело, решил посмотреть, есть ли в SO какой-нибудь блеск.

Ответ №1:

итак, просто отредактируйте ответ, когда получите его обратно, добавьте недостающий html / body / head

 $.post("/PreviewProfile", $("#bioForm").serialize(), function (response) {
            response = "<html><body>" response "</body></html>";
            $("#previewFrame").html(response);
            $("#holdMyPreview").modal({
                                overlayClose: true,
                                escClose: true,
                                autoResize: true,
                            }, "html");
        });