Search code examples
javascriptasp.netasp.net-mvc-3

ASP.NET MVC3 - Controller in each Tab running


Here is the the thing. I'm using ASP.NET MVC3 to build an app and Jquery.ui.Tabs to show some actions. Basically i want to show in one tab a Requirement controller, press submit and go to another tab with the DocQuality controller. The problem happens when i'm trying to submit information from the Controller Requirement, both validation code are running, obviously, is not what i want. Any idea or a better way to implement this?

In my layout i have the following:

<div id="tabs">
     <ul>
         <li><a href="#tabs-1">Requirement </a></li>
         <li><a href="#tabs-2">DocQuality</a></li>
     </ul>
     <div id="tabs-1">
          { @Html.RenderAction("Create", "Requirement"); }
     </div>
     <div id="tabs-2">
          { @Html.RenderAction("Create", "DocQuality"); }
     </div>
</div>
@RenderBody() 

View DocQuality:

@model MvcAppRequirement.Models.DocQuality
@* ... *@
@using (Html.BeginForm()) {
  @Html.ValidationSummary(true)
     @* Some parameters *@
}

Controller DocQuality:

[HttpPost]
public PartialViewResult Create(DocQuality docpaseqal)
{
    if (ModelState.IsValid)
    {
        db.DocsPaseQal.Add(docpaseqal);
        db.SaveChanges();  
    }
    @* ... Some fields ... *@
    return PartialView(docpaseqal);
}

View Requirement:

@model MvcAppRequirement.Models.Requirement
@* ... *@
@using (Html.BeginForm()) {
  @Html.ValidationSummary(true)
     @* Some parameters *@
}

Controller Requirement:

[HttpPost]
public PartialViewResult Create(Requirement req)
{
    if (ModelState.IsValid)
    {
        db.Requirement.Add(req);
        db.SaveChanges();  
    }
    @* ... Some fields ... *@
    return PartialView(req);
}

Solution

  • extending to what @me2323 said.

     @model MvcAppRequirement.Models.Requirement
    @* ... *@
    @using (Html.BeginForm("","",new{id = "DocQualityForm"})) {
      @Html.ValidationSummary(true)
         @* Some parameters *@
    }
    

    jQuery

    $("buttom").submit(function(){
    $("#DocQualityForm").validate();
    });
    

    same for the other tab view.

    overwrite default validation and write your custom validation for each tab.