Mvc4 having 2 forms in one view

Question

So i'm building a simple mvc4 application, I have created all base models for the creation of the DB, from these classes I could naturally create basic controllers with their matching views.

Now my problem: I have the basic create actionresult + view and in this view I wanted that the user would be able to select some values from a dropdownlist which would make creation of new objects simpler.

I tried to achieve this with a second form in my view (the first one is the basic create form) now if I want to use these dropdowns (they filter each other(so first the user must specify a continent, then the dropdown of the countries only shows countries from that continent and after he specifies a country the region dropdown gets updated :) )) the submit of the basic view is always automatically called.

so making the dropdowns update themselves isn't the problem :s it's that the form for the create automatically validates when the dropdowns are updated

this is the controller where the dropdowns filter each other

//
// GET: /FederationCenter/Create
public ActionResult Create(string searchRegion, string searchCountry, string searchContinent)
{
  var countries = from c in db.Countries select c;
  if (!String.IsNullOrEmpty(searchContinent))
  {
    Continent searchContinentEnumValue = (Continent)Enum.Parse(typeof(Continent), searchContinent);
    countries = from c in db.Countries where ((int)c.Continent).Equals((int)searchContinentEnumValue) select c;
  }

  var regions = from r in db.Regions where r.Country.Name.Equals(searchCountry) select r;

  ViewBag.searchContinent = new SelectList(Enum.GetNames(typeof(SchoolCup.Domain.Continent)));
  ViewBag.searchCountry = new SelectList(countries, "Name", "Name");
  ViewBag.searchRegion = new SelectList(regions, "Name", "Name");
  return View();
}

//
// POST: /FederationCenter/Create

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(NSSF nssf, string searchRegion, string searchCountry, string searchContinent)
{
  var countries = from c in db.Countries select c;
  if (!String.IsNullOrEmpty(searchContinent))
  {
    Continent searchContinentEnumValue = (Continent)Enum.Parse(typeof(Continent), searchContinent);
    countries = from c in db.Countries where ((int)c.Continent).Equals((int)searchContinentEnumValue) select c;
  }

  var regions = from r in db.Regions where r.Country.Name.Equals(searchCountry) select r;

  ViewBag.searchContinent = new SelectList(Enum.GetNames(typeof(SchoolCup.Domain.Continent)));
  ViewBag.searchCountry = new SelectList(countries, "Name", "Name");
  ViewBag.searchRegion = new SelectList(regions, "Name", "Name");
  if (ModelState.IsValid)
  {
    var naam = Request["searchRegion"];
    Region creatie = (from c in db.Regions where c.Name.Equals(naam) select c).SingleOrDefault();
    nssf.ISFId = 1;
    nssf.RegionId = creatie.RegionId;
    db.NSSFs.Add(nssf);
    db.SaveChanges();
    return RedirectToAction("Index");
  }
  return View(nssf);
}

and this is my view

@model SchoolCup.Domain.POCO.NSSF

@{
ViewBag.Title = "Create";
}

<h2>Create NSSF</h2>
     <div>
        @using (Html.BeginForm(null, null, FormMethod.Post, new { name = "form" }))
        {
         @Html.AntiForgeryToken()

        @Html.DropDownList("searchContinent", null, "-- All continents --", new { onchange = "sendForm()" }) 
        @Html.DropDownList("searchCountry", null, "-- All countries --", new { onchange = "sendForm()" })
        @Html.DropDownList("searchRegion", null, "-- All regions --", new { onchange = "sendForm()" })
            <>
            <input type="submit" name= value="Search" />    
        }
    </div>   
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<fieldset>
    <legend>NSSF</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Name)
        @Html.ValidationMessageFor(model => model.Name)
    </div>

some more inputs

   </fieldset>
    <p>
        <input type="submit" value="Create" />
        @Html.ActionLink("Back to List", "Index", null, new { @class = "button" })

    </p>
}

@section Scripts {
<script type="text/javascript">
    function sendForm() {
        document.form.submit()
    }
    </script>
}

I've been looking for at least a day and I don't know how to solve this

with regards Alexander

Answer 1

How about either (1) using JQuery and loading the drop-down with a Partial view returned by your controller or (2) you could have an AJAX call that would return your values as a JSON object mapped from your entity and you can render them in the drop-down. This way your form won't be submitted every time you update a drop-down.

The first solution might look something like this:

JQUERY

<script>
$("#searchContinent").change(function() { 
    $("#searchCountry").load("/YourController/GetCountries", { 'continentId': $(this).val() },
                                        function (response, status, xhr) {
                                            if (status == "error") {
                                                alert("An error occurred while loading the results.");
                                            }
                                        });
});
</script>

@Html.DropDownList("searchContinent", null, "-- All continents --" }) 
<div id="searchCountry">
    <!--the newly created drop-down will be placed here-->
</div>

---

(EDIT)

For Javascript you might try something like this:

YOUR CURRENT VIEW

@Html.DropDownList("searchContinent", null, "-- All continents --", new { onchange = "getCountries(this)" }) 
<div id="searchCountry">
<!--the newly created drop-down will be placed here-->
</div>

<script> 
function getCountries(input){
    var selectedValue = input.options[input.selectedIndex].value;
    var xhReq = new XMLHttpRequest();
    xhReq.open("GET", "YourController/GetCountries?continentId="+selectedValue, false);
    xhReq.send(null);
    var serverResponse = xhReq.responseText;
    document.getElementById("searchCountry").innerHTML=serverResponse ;
}
</script>

DISCLAIMER: This I have never tried so if it's wrong don't hesitate to let me know and correct it if necessary

(END EDIT)

---

CONTROLLER

public ActionResult GetCountries(string continentId)
    {
        /*Get your countries with your continentId and return a Partial View with a list of 
          countries as your model*/


        return PartialView(countryList);
    }

GetCountries VIEW

@model IEnumerable<SchoolCup.Domain.Country>

@Html.DropDownListFor( 0, Model)