Возврат данных в частичное представление

Question

У меня есть блог с боковой панелью с частичным представлением, которая позволяет пользователям подписываться на мою новостную ленту. Я пытаюсь вернуть пользователя на страницу, с которой он пришел, после публикации каких-либо данных, и отобразить все сообщения о проверке или возврате в частичном представлении формы.

Проблема в том, что мой частичный вид открывается в новом окне (без макета). Как я могу это исправить, чтобы он возвращался в мой блог с возвращенными данными на боковой панели?

Это мой взгляд:

@using Blog.Models.Entities
@model Subscriber

<header>
    <h2>Subscribe</h2>
</header>

<p>Subscribe to my e-mail newsfeed.</p>

@using (Html.BeginForm("Form", "Subscription"))
{
    <div class="editor-label">@Html.LabelFor(subscriber => subscriber.Email)</div>
    <div class="editor-field ">@Html.EditorFor(subscriber => subscriber.Email)</div>

    @Html.ValidationMessageFor(subscriber => subscriber.Email)

    <input type="submit" value="Subscribe" />

    <p>@ViewBag.Result</p>
}

И соответствующие части контроллера, которые обрабатывают данные:

public ActionResult Form()
{
    return PartialView("_Form");
}

[HttpPost]
public ActionResult Form(Subscriber subscriber)
{
    if (ModelState.IsValid)
    {
        Subscriber foundSubscriber = _repository.Subscribers.Where(s => s.Email.Equals(subscriber.Email)).FirstOrDefault();
        if (foundSubscriber != null)
        {
            ModelState.AddModelError("Email", "This e-mail address has already been added.");
            return PartialView("_Form", subscriber);
        }

        _repository.SaveSubscriber(subscriber);

        ViewBag.Result = "Succesfully subscribed to the newsletter.";
        return PartialView("_Form");
    }

    ModelState.AddModelError("Email", "Please provide a valid e-mail address.");
    return PartialView("_Form", subscriber);
}

Answer 1

Я наконец нашел решение проблемы.Я реализовал его с помощью AJAX и получил следующий код:

_Index.cshtml

<header>
    <h2>Subscribe</h2>
</header>

<p>Subscribe to my e-mail newsfeed.</p>

<div id="subscription-form">
    @{Html.RenderPartial("_Form");}
</div>

_Form.cshtml

@using Blog.Models.Entities
@model Subscriber
@{
    AjaxOptions ajaxOptions = new AjaxOptions
    {
        LoadingElementId = "loading",
        LoadingElementDuration = 2000,
        HttpMethod = "Post",
        UpdateTargetId = "subscription-form"
    };
}

<div id="loading" style="display: none;">
    <p>Processing request...</p>
</div>

@using (Ajax.BeginForm("Index", "Subscription", ajaxOptions))
{
    <div class="editor-label">@Html.LabelFor(subscriber => subscriber.Email)</div>
    <div class="editor-field ">@Html.EditorFor(subscriber => subscriber.Email)</div>

    @Html.ValidationMessageFor(subscriber => subscriber.Email)

    <input type="submit" value="Subscribe" />
}

_Succes.cshtml

@using Blog.Models.Entities
@model Subscriber

<p id="subscription-result">@ViewBag.Result</p>

И следующие методы действий контроллера:

public ActionResult Index()
{
    return PartialView("_Index");
}

[HttpPost]
public PartialViewResult Index(Subscriber subscriber)
{
    if (ModelState.IsValid)
    {
        Subscriber foundSubscriber = _repository.Subscribers.Where(s => s.Email.Equals(subscriber.Email)).FirstOrDefault();
        if (foundSubscriber != null)
        {
            ModelState.AddModelError("Email", "This e-mail address has already been added.");
            return PartialView("_Form", subscriber);
        }

        _repository.SaveSubscriber(subscriber);

        ViewBag.Result = "Succesfully subscribed to the newsletter.";
        return PartialView("_Succes", subscriber);
    }

    ModelState.AddModelError("Email", "Please provide a valid e-mail address.");
    return PartialView("_Form", subscriber);
}

Я надеюсь, что это поможет любому, кто попытается достичь того же в будущем.Кстати, я нашел решение в этом блоге: http://xhalent.wordpress.com/2011/02/05/using-unobtrusive-ajax-forms-in-asp-net-mvc3/.

Answer 2

При отправке формы браузер отправляет запрос HTTP Post на сервер. Затем браузер отображает полезную нагрузку Ответа. Ваше действие Controller возвращает PartialView, который браузер успешно отображает (даже если он не имеет тегов html, head или body, необходимых для того, чтобы сделать его действительно действительным HTML).

Звучит так, будто вы хотите, чтобы браузер сохранял большую часть вашей страницы загруженным и отображенным, разместил форму, затем взял полученный HTML-код и заменил только часть загруженной страницы. Проще говоря, браузер не достаточно умен, чтобы сделать это.

Что вы, вероятно, хотите сделать, это что-то вроде этого:

• Пользователь заполняет некоторые данные формы и нажимает кнопку сохранить / отправить / перейти / что угодно.
• Однако вы не хотите, чтобы браузер отправлял форму, потому что она не сохранит большую часть текущей страницы так, как вы хотите.
• Вместо этого вы хотите, чтобы кнопка «Отправить» вызывала некоторый локальный JavaScript.
• Этот локальный JS должен связать введенные пользователем данные формы, создать POST с этими данными в качестве полезной нагрузки и отправить POST, используя Ajax. Это сохранит текущую страницу загруженной, в то время как запрос ajax попадает в действие вашего контроллера
• Действие вашего контроллера остается неизменным и возвращает частичное представление.
• Ваша JS-функция, которая запустила Ajax-вызов, также должна определять функцию «success», которая будет вызываться после завершения операции.
• В рамках этой функции успеха ваш javascript будет извлекать HTML-код из ответа и использовать его для замены области страницы, в которой находилась исходная форма.

Я настоятельно рекомендую jQuery - он НАМНОГО упростит создание запроса Ajax, обработку обратного вызова success и замену только части загруженной в данный момент страницы результатом. Насколько я понимаю, «ненавязчивый javascript» от MS также может помочь реализовать это, однако у меня нет прямого опыта с этим.

Очевидно, что все это будет работать только в том случае, если в браузере включена поддержка JavaScript.