javascript - add html when drop down changes in a razor -

i trying make view user picks golf course drop-down , holes course appear when course changes.

i have following code in view.

@model golf_statz.models.record  @{   viewbag.title = "create"; }  <h2>create</h2>  <script> function dropdownchange(dd) {     $('#courseholes').empty();     $('#courseholes').html(@html.editorfor(m => m.recordholes));     $('#courseholes').trigger('create'); };     </script>  @using (html.beginform())  {     @html.antiforgerytoken()      <div class="form-horizontal">         <h4>record</h4>         <hr />         @html.validationsummary(true, "", new { @class = "text-danger" })         <div class="form-group">             @html.labelfor(model => model.dateplayed, htmlattributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.editorfor(model => model.dateplayed, new { htmlattributes = new { @class = "form-control" } })                 @html.validationmessagefor(model => model.dateplayed, "", new { @class = "text-danger" })             </div>              @html.labelfor(model => model.score, htmlattributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.editorfor(model => model.score, new { htmlattributes = new { @class = "form-control" } })                 @html.validationmessagefor(model => model.score, "", new { @class = "text-danger" })             </div>              @html.labelfor(model => model.course, htmlattributes: new { @class = "control-label col-md-2" })             <div class="col-md-10">                 @html.dropdownlist("courses", null, "select course", new { onchange="dropdownchange(this)"})                 @html.validationmessagefor(model => model.course, "", new { @class = "text-danger" })             </div>         </div>          <div id="courseholes">          </div>          <div class="form-group">             <div class="col-md-offset-2 col-md-10">                 <input type="submit" value="create" class="btn btn-default" />             </div>         </div>     </div> }  <div>     @html.actionlink("back list", "index") </div>  @section scripts {     @scripts.render("~/bundles/jqueryval") } 

basically view recordholes doesn't display. if put alert in dropdownchange function displays, @ least know getting far.

i have put @html.editorfor(m => m.recordholes) inside div, know recordholes view works.

i think might refresh issue, honest that's guess.

this first mvc project have found difficult searching correct terms. closest thing have managed find cascading drop-downs.

2 possible options solve issue

1. use 2 separate forms, first dropdownlist displaying courses, , in post method, redirect method (passing selected course id) displays holes course (and details such date played etc)
2. handle .change() event of dropdownlist , use ajax update dom based on selected course id, example

main view script (remove onchange attribute dropdownlist() helper)

var url = '@url.action("course")'; var holes = $('#courseholes'); $('#courses').change(function() {   holes.load(url, { id: $(this).val() }); } 

controller

public actionresult course(int id) {   record model = new record();   // populate model based on course id (for example)   model.recordholes = db.recordholes.where(c => c.courseid == id).tolist();   return partialview("_holes", model); } 

partialview (_holes.cshtml)

@model golf_statz.models.record @html.editorfor(m => m.recordholes)