2

I am having a Model having a List of Courses. I want to render a section in the partial view, for each course in the list, dynamically creating sections. That is working fine with a loop.

@for (int i = 0; i < Model.CourseList.Count; i++)
        {
            <div id="exhuastfan_1" class="panel panel-default panel-body row" border="1">
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Course Name :</label> 
                    @Html.TextBoxFor(m => m.CourseList[i].Name, new { @class = "form-control" })
                </div>
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Duration Textbox :</label>
                    @Html.TextBoxFor(m => m.CourseList[i].Duration, new { @class = "form-control" })

                    <label class="marginRightMid">Duration Dropdown:</label><span class="spnRequiredStar">*</span>
                    @Html.DropDownListFor(m => m.CourseList[i].Duration, new SelectList(@Model.DurationTypes, "Value", "Text"), new { @id = "DurationTypes", @class = "form-control" })
                </div>
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Cost :</label>
                    @Html.TextBoxFor(m => m.CourseList[i].Cost, new { @class = "form-control" })
                </div>
                <div>
                    <hr/>
                </div>
            </div>
        }

The problem is happening where I need to bind the Dropdownlist using Html.DropdownListFor(). Here it fails to select the correct value from the dropdownlist.

I tried binding the Dropdown to a test property on the ViewModel and it works fine.

@Html.DropDownListFor(m => m.TestDuration, new SelectList(@Model.DurationTypes, "Value", "Text"), new { @id = "DurationTypeTest", @class = "form-control" })

I am not getting what is special with binding in a loop.

Attaching the sample model and controller. Model:

namespace DynamicModalBindingMVC.Models

{ public class Course { public string Name { get; set; } public string Duration { get; set; } public string Cost { get; set; }

}

public class CourseListVM
{
    public List<Course> CourseList { get; set; }
    public List<SelectListItem> DurationTypes { get; set; }
    public string TestDuration { get; set; }
}

}

Controller:

public class DynamicBindedUIController : Controller
{
    // GET: DynamicBindedUI
    public ActionResult Index()
    {
        CourseListVM vm = new CourseListVM();
        List<Course> courseList = new List<Course>() {
        new Course() { Name = "C++", Duration = "6 months", Cost = "500"},
        new Course() { Name = "C#", Duration = "4 months", Cost = "200"},
        new Course() { Name = "Java", Duration = "8 months", Cost = "600"},
        };

        List<SelectListItem> durList = new List<SelectListItem>();
        SelectListItem item0 = new SelectListItem() { Text = "", Value = "" };
        SelectListItem item = new SelectListItem() { Text = "6 months", Value = "6 months" };
        SelectListItem item1 = new SelectListItem() { Text = "4 months", Value = "4 months" };
        SelectListItem item2 = new SelectListItem() { Text = "8 months", Value = "8 months" };
        durList.Add(item0);
        durList.Add(item);
        durList.Add(item1);
        durList.Add(item2);

        vm.DurationTypes = durList;
        vm.CourseList = courseList;
        vm.TestDuration = courseList[1].Duration; //"8 months";

        return View("DynamicBindedUI", vm);

    }
}

View:

<body>
<div class="col-md-12">
    <div><h3>Course List</h3></div>
    Works Fine : View Model Property Binding : TestDuration:  @Html.DropDownListFor(m => m.TestDuration, new SelectList(@Model.DurationTypes, "Value", "Text"), new { @id = "DurationTypeTest", @class = "form-control" })
</div>
<div class="row">
    <div class="col-md-12">
        <div>
            <hr />
        </div>
        @for (int i = 0; i < Model.CourseList.Count; i++)
        {
            <div id="exhuastfan_1" class="panel panel-default panel-body row" border="1">
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Course Name :</label> 
                    @Html.TextBoxFor(m => m.CourseList[i].Name, new { @class = "form-control" })
                </div>
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Duration Textbox :</label>
                    @Html.TextBoxFor(m => m.CourseList[i].Duration, new { @class = "form-control" })

                    <label class="marginRightMid">Duration Dropdown:</label><span class="spnRequiredStar">*</span>
                    @Html.DropDownListFor(m => m.CourseList[i].Duration, new SelectList(@Model.DurationTypes, "Value", "Text"), new { @id = "DurationTypes", @class = "form-control" })
                </div>
                <div class="col-md-4 col-sm-12">
                    <label class="marginRightMid">Cost :</label>
                    @Html.TextBoxFor(m => m.CourseList[i].Cost, new { @class = "form-control" })
                </div>
                <div>
                    <hr/>
                </div>
            </div>
        }

    </div>

Thanks in advance!

Sudheer Kumar
  • 311
  • 4
  • 16

0 Answers0