Ajax.BeginForm Отображает частичное как новую страницу

Question

У меня есть частичное представление, которое я отображаю на своей домашней странице / странице указателя. Это короткая форма с моделью представления и аннотациями для проверки.

Он вызывает контроллер и при сбое (так как я ничего не набираю и у меня есть теги [Required] в модели представления), он повторно отображает частичное представление как новую страницу.

Мой вопрос заключается в том, должен ли я просто возвращать JSON и сам отмечать недопустимые поля форм? Или я могу использовать нормальный возврат PartialView (модель)?

Я включил:

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>

Частичное представление

<%using (Ajax.BeginForm("Coupon", new AjaxOptions { HttpMethod = "Post", OnSuccess = "CouponSubmitted" }))
      { %>
    <div style="top: 337px; position: relative;">
        <div style="margin-left: 51px; float: left;">
            <%= Html.TextBoxFor(p => p.Name, new { Style = "width:130px;" })%>
            <%= Html.ValidationMessageFor(p => p.Name)%>
        </div>
        <div style="float: left; margin-left: 44px;">
            <%= Html.TextBoxFor(p => p.PhoneNumber, new { Style = "width:130px;" })%>
            <%= Html.ValidationMessageFor(p => p.PhoneNumber)%>
        </div>
        <div style="float: left; margin-left: 34px; width: 80px;">
            <%= Html.TextBoxFor(p=>p.Extension, new { Style = "width:70px;" })%>
            <%= Html.ValidationMessageFor(p => p.Extension)%>
        </div>
        <div style="clear: both;">
        </div>
    </div>
    <div style="top: 354px; position: relative;">
        <div style="margin-left: 51px; float: left;">
            <%= Html.TextBoxFor(p => p.Email, new { Style = "width:130px;" })%>
            <%= Html.ValidationMessageFor(p => p.Email)%>
        </div>
        <div style="float: left; margin-left: 44px;">
            <%= Html.TextBoxFor(p=>p.CellNumber,new{Style="width:130px;"})%>
            <%= Html.ValidationMessageFor(p => p.CellNumber)%>
        </div>
        <input style="float: left; margin-left: 34px;"  type="submit" value="Submit" />
        <div style="clear: both;">
        </div>
    </div>
    <%} %>

Контроллер

        [HttpPost]
        public ActionResult Coupon(Web.ViewModels.CouponViewModel model)
        {
            if (ModelState.IsValid)
            {
                //Submit info
                Response.Cookies["ShowCoupon"].Value = "false";
                Response.Cookies["ShowCoupon"].Expires = DateTime.Now.AddMinutes(2);
                return Json(new {success=true});
            }
            else
            {
                return PartialView(model);
            }

        }

Answer 1

Я вижу два момента для улучшения.

1) Попробуйте заменить кнопку «Отправить» на Ajax.ActionLink. Причина, по которой ваша кнопка "Отправить" вызывает полный пост назад, а не запрос Ajax.

2) После того, как происходит полный пост, вы возвращаете полный частичный просмотр в случае сбоя. Это приводит к тому, что ваша основная форма исчезает и остается только частичный вид.

Чтобы разобраться в этих вещах, как я упоминал ранее, замените кнопку «Отправить» на Ajax.ActionLink, а затем, если у вас возникла ошибка в вашей модели, не возвращайте PartialView. Верните Джсона, как вы делаете в успешном потоке.

НТН