Ajax.BeginForm Displays Partial as a New Page

I have a partial view that I render on my Home/Index page. Its a short form with a viewmodel for and annotations for validation.

It calls the controller and upon failure(since I don't type anything in and I have [Required] tags in my view model) it re-renders the partial view as a new page.

My question is do I have to just return JSON and mark up the forms invalid fields myself? Or can I use the normal return PartialView(model)?

I have included:

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

Partial View

<%using (Ajax.BeginForm("Coupon", new AjaxOptions { HttpMethod = "Post", OnSuccess = "CouponSubmitted" }))
      { %>
    &开发者_StackOverflow社区lt;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>
    <%} %>

Controller

        [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);
            }

        }

I can see two points to improve.

1) Try to replace your "Submit" button with Ajax.ActionLink. Reason being your "Submit" button is causing full post back rather than Ajax request.

2) Once full post back is happening, you are returning complete partial view in case of failure. This is causing your main form to disappear and only partial view to remain.

To sort out these things as I mentioned earlier, replace Submit button with Ajax.ActionLink and then when you have failure in your model, don't return PartialView. Return Json as you are doing in success flow.

HTH