asp.net mvc 4 - Mvc4 having 2 forms in one view -

so i'm building simple mvc4 application, have created base models creation of db, these classes naturally create basic controllers matching views.

problem: have basic create actionresult + view , in view wanted user able select values dropdownlist make creation of new objects simpler.

tried achieve second form in view (the first 1 basic create form) if want use these dropdowns (they filter each other(so first user must specify continent, dropdown of countries shows countries continent , after specifies country region dropdown gets updated :) )) submit of basic view automatically called.

so making dropdowns update isn't problem :s it's form create automatically validates when dropdowns updated

this controller dropdowns filter each other

// // get: /federationcenter/create public actionresult create(string searchregion, string searchcountry, string searchcontinent) {   var countries = c in db.countries select c;   if (!string.isnullorempty(searchcontinent))   {     continent searchcontinentenumvalue = (continent)enum.parse(typeof(continent), searchcontinent);     countries = c in db.countries ((int)c.continent).equals((int)searchcontinentenumvalue) select c;   }    var regions = r in db.regions 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 = c in db.countries select c;   if (!string.isnullorempty(searchcontinent))   {     continent searchcontinentenumvalue = (continent)enum.parse(typeof(continent), searchcontinent);     countries = c in db.countries ((int)c.continent).equals((int)searchcontinentenumvalue) select c;   }    var regions = r in db.regions 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 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 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, "-- continents --", new { onchange = "sendform()" })          @html.dropdownlist("searchcountry", null, "-- countries --", new { onchange = "sendform()" })         @html.dropdownlist("searchregion", null, "-- 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 list", "index", null, new { @class = "button" })      </p> }  @section scripts { <script type="text/javascript">     function sendform() {         document.form.submit()     }     </script> } 

i've been looking @ least day , don't know how solve this

with regards alexander

how either (1) using jquery , loading drop-down partial view returned controller or (2) have ajax call return values json object mapped entity , can render them in drop-down. way form won't submitted every time update drop-down.

the first solution might 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 results.");                                             }                                         }); }); </script>  @html.dropdownlist("searchcontinent", null, "-- continents --" })  <div id="searchcountry">     <!--the newly created drop-down placed here--> </div> 

---

(edit)

for javascript might try this:

your current view

@html.dropdownlist("searchcontinent", null, "-- continents --", new { onchange = "getcountries(this)" })  <div id="searchcountry"> <!--the newly created drop-down 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: have never tried if it's wrong don't hesitate let me know , correct if necessary

(end edit)

---

controller

public actionresult getcountries(string continentid)     {         /*get countries continentid , return partial view list of            countries model*/           return partialview(countrylist);     } 

getcountries view

@model ienumerable<schoolcup.domain.country>  @html.dropdownlistfor( 0, model)