0

i have webgrid where i am showing student data like ID, name and student country. all data is in editable format. country data appear in dropdown.

my UI

enter image description here

here is my controller code

public class WebGridMoreControlsController : Controller
{
    // GET: WebGridMoreControls
    public ActionResult Index()
    {
        StudentListViewModel osvm = new StudentListViewModel();
        return View(osvm);
    }

    [HttpPost]
    public ActionResult Index(StudentListViewModel oStudentListViewModel)
    {
        return View(oStudentListViewModel);
    }
}

here is my model code

public class Student
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int CountryID { get; set; }
}

public class Country
{
    public int ID { get; set; }
    public string Name { get; set; }
} 

viewmodel code

public class StudentListViewModel
{
    public IList<Student> Students { get; set; }

    public int SelectedCountryId { set; get; }
    public List<Country> Country { get; set; }

    public StudentListViewModel()
    {
        Students = new List<Student>
        {
            new Student{ID=1,Name="Keith",CountryID=1},
            new Student{ID=2,Name="Paul",CountryID=2},
            new Student{ID=3,Name="Sam",CountryID=3}
        };

        Country = new List<Country>
        {
            new Country{ID=1,Name="India"},
            new Country{ID=2,Name="UK"},
            new Country{ID=3,Name="USA"}


        };
    }
}

here is my razor view code

@model MVCCRUDPageList.Models.StudentListViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Student View Model</h2>

@using (Html.BeginForm("Index", "WebGridMoreControls", FormMethod.Post))
{
    var grid = new WebGrid(Model.Students, canSort: false, canPage: false);
    var rowNum = 0;


    <div id="gridContent" style=" padding:20px; ">
        @grid.GetHtml(
        tableStyle: "table",
        alternatingRowStyle: "alternate",
        selectedRowStyle: "selected",
        headerStyle: "header",
        columns: grid.Columns
        (
            grid.Column(null, null, format: item => rowNum = rowNum + 1),
            grid.Column("ID", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].ID, new { @class = "edit-mode" })),
            grid.Column("Name", format: (item) => @Html.TextBoxFor(m => m.Students[rowNum - 1].Name, new { @class = "edit-mode" })),

             grid.Column("Country", format: (item) => 
                 @Html.DropDownListFor(x => x.SelectedCountryId,
                  new SelectList(Model.Country, "ID", "Name", Model.SelectedCountryId = item.CountryID), 
                 "-- Select States--", new { id = "cboCountry", @class = "edit-mode" }))
        ))
        <input type="submit" value="Submit" />
    </div>

}

where did i made the mistake for which changed country ID from drowdown not getting pass to action when i submit form. country id is also 0.

James Z
  • 12,209
  • 10
  • 24
  • 44
Monojit Sarkar
  • 2,353
  • 8
  • 43
  • 94

1 Answers1

0

Your Student model contains a property CountryID which is the property you need to bind to. Remove the public int SelectedCountryId { set; get; } property from your view model, and change the code in the view to bind to CountryID

grid.Column("Country", format: (item) => 
    @Html.DropDownListFor(
        x => x.Students[rowNum - 1].CountryID, 
        new SelectList(Model.Country, "ID", "Name", item.CountryID), 
        "-- Select States--",
        new { @class = "edit-mode" }
    )
)

In addition, remove the new { id = "cboCountry" } from the DropDownListFor() method which is generating invalid html (duplicate id attributes)

Note you current code binds the value of the selected option in each <select> to your SelectedCountryId property, but the DefaultModelBinder only binds the first value in the request, so the value of SelectedCountryId would be the value of the selected option in the first row (i.e. the ID associated with 'India' in your image).