Question

I have a MVC3 view that enables the user to create a couple different things. Within the parent view the forms to do so are broken up via jquery ui tabs like the following:

<div id="tabs">
        <ul>
            <li><a href="#tabs-1">New Thing 1</a></li>
            <li><a href="#tabs-2">Different New Thing</a></li>
        </ul>
    <div id="tabs-1">@Html.Action("CreateNewThing", "NewThingController")</div>
    <div id="tabs-2">@Html.Action("CreateDifferentThing", "DifferentThing")</div>
    <div></div>
</div>

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs();
    });
</script> 

Within the partial view I have:

@model NewThingViewModel

    @using (Html.BeginForm("CreateNewThing", "NewThingController", FormMethod.Post, new { id = "frmCreateNewThing" }))
    { 
    ...

with input fields, a submit button, etc. This seems to work well: it renders everything and posts just fine to the right controller action method.

However I’m now wiring in the validation and I’ve got an issue.

In the controller it is rendering the view like so:

public ActionResult CreateNewThing(NewThingViewModel model)
{

 ... initializing model fields, drop downs etc.

    return PartialView("CreateNewThing", model);
}

I have a seperate post method like so:

 [AcceptVerbs(HttpVerbs.Post)]
 public ActionResult CreateNewThing(NewThingViewModel newThingViewModel, FormCollection collection)
 {
         .....
 }

Sample Model:

    public class NewThingViewModel
    {
        [Required]
        [StringLength(50)]
        [Display(Name = "Display Name:")]
        public string DisplayName { get; set; }     
     }

The trouble is, when the page first comes up the fields marked as [Required] through DataAnnotations in the model are showing up red as well as the validation summary showing them invalid when the page initially shows. I.E. it’s acting like it’s already been posted before the user gets to enter anything on the initial load or even put anything in the text boxes.

I know the first non-post CreateNewThing is firing because I can catch it in the debugger and I know the 2nd one does not on the initial load.

What would cause my validations to fire on the Get?

Is it due to the way Html.Action works and the fact that I’m rendering partial views onto another view?

I’m using UnobtrusiveJavaScriptEnabled and ClientValidationEnabled = true in web.config.

I can’t find anyone else that has run into this particular problem. Every other example just seems to work, then again I don’t find an example where the view is broken into three partials contained within jquery ui tabs.

How do I fix this?
Options:
Do I need to manually manipulate the Model.IsValid as a workaround?
Use a different mechanism to render the partial views on the parent view instead of Html.Action?
Use some javascript/jquery to catch the validation and stop it?

Answer 1

Don’t have method parameters on your GET controller action. You can initialize an empty model and pass it to the view but you dont need a model to be passed into the method