views:

38

answers:

1

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" }))
      { %>
    <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);
            }

        }
+1  A: 

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

Pradeep
But I want the Model Validation stuff. If i return JSON I will have to do all that manually.
Blankasaurus
Yes, seems like you will have to manually extract error info from ModelState, populate it in some form and send it as JSon. I am not sure if there is some kind of built in way to achieve this. I might be wrong so I will let someone else to answer that.
Pradeep
I really hope you are wrong...+1 thanks for the info - I guess I'll do this for now...
Blankasaurus
So I replaced my submit button with ajax.actionlink but now I don't get any modelbinding. Any ideas on why? Do I have to tell it to submit the form or something?
Blankasaurus