locked
Filter WebGrid using DropDownList in ASP.Net MVC RRS feed

  • Question

  • User1151703306 posted

    Hi all,

    I need Populate a DropDownList from values obtained from a database table using MySql database and view model using ASP NET MVC.

    After populate a DropDownList I need filter WebGrid using the value selected on DropDownList.

    This is the tutorial

    But I have this error

    CS1503: Argument 1: cannot convert from 'string' to 'System.Collections.Generic.IEnumerable<dynamic>'

    Help me to do it.

    My code below

    model.cs

    public List<SelectListItem> CityUO_List { get; set; }
    
    public List<PersonModel> CityUO { get; set; }

    controller.cs

            public static List<SelectListItem> PopulateDates(string UserUO)
            {
                List<SelectListItem> items = new List<SelectListItem>();
                string cs = ConfigurationManager.ConnectionStrings["cn"].ConnectionString;
    
                using (MySqlConnection con = new MySqlConnection(cs))
                {
                    string sql = @String.Format(" SELECT City FROM `dotable`WHERE UOR = @UOR; ");
    
                    using (MySqlCommand cmd = new MySqlCommand(sql))
                    {
                        cmd.Parameters.AddWithValue("@UOR", System.Web.HttpContext.Current.Session["UserUO"]);
                        cmd.Connection = con;
                        con.Open();
                        using (MySqlDataReader sdr = cmd.ExecuteReader())
                        {
                            while (sdr.Read())
                            {
                                items.Add(new SelectListItem
                                {
                                    Text = sdr["City"].ToString(),
                                    Value = sdr["City"].ToString()
                                });
                            }
                        }
    
                        cmd.Connection.Close();
                    }
                }
    
                return items;
            }
    
            public ActionResult RecoveryAll()
            {
                PersonModel model = new PersonModel();
                model.CityUO_List = PopulateDates(null);
                return View(model);
            }
    
            [HttpPost]
            public ActionResult RecoveryAll(PersonModel model)
            {
                model.CityUO_List = PopulateDates(???);
                return View(model);
            }

    view

    @model Ins.Models.PersonModel
    
    @{
        WebGrid webGrid = new WebGrid(source: Model.CityUO, canPage: true, canSort: false, rowsPerPage: 10);
    }
    
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "WebGridForm" }))
    {
       @Html.DropDownList("City", Model.CityUO_List, "Select City", new { @id = "ddlCity" })
    }
    Tuesday, January 26, 2021 4:27 PM

Answers

  • User1686398519 posted

    Hi Golia, 

    but the webgrid ?

    model.CityUO_List = PopulateDates();

    Based on your description and the code you provided, I understand your needs like this:

    1. You want to use the value of the drop-down list to change the data in your table, right?
    2. According to the code you provided, PopulateDates() is only used to set the drop-down list of City.
      • In other words, for example, when you need to find out the corresponding cities based on the value of State, you can set a parameter called StateId in the PopulateDates(string StateId) method to get the correct cities.
    3. how do i populate the webgrid with the values and then edit it with the selected value in DropDownList?
      1. When you want to change the table data according to the value of the drop-down list, you need to customize a method to change the table data.
      2. I wrote an example, you can refer to it, and modify it according to your actual situation.
        1. Since you only provided part of the code, and did not give your Model (relationship between tables), so I added part of the code based on the code you provided.
        2. In addition, in the example, I used EF to query the data. You can change this to your own query method.

    Model

        public class TestPersonViewModel 
        {
            public string City { get; set; }
            public string State { get; set; }
            public List<SelectListItem> StateUO_List { get; set; }
            public List<SelectListItem> CityUO_List { get; set; }
            public List<PersonModel> CityUO { get; set; }
        }
        public class PersonModel
        {
            [Key]
            public int PersonId { get; set; }
            public string PersonName { get; set; }
            public int CityId { get; set; }
            [ForeignKey("CityId")]
            public City City { get; set; }
            public int StateId { get; set; }
            [ForeignKey("StateId")]
            public State State { get; set; }
        }
        public class City
        {
            [Key]
            public int CityId { get; set; }
            public string CityName { get; set; }
            public int StateId { get; set; }
        }
        public class State
        {
            [Key]
            public int StateId { get; set; }
            public string StateName { get; set; }
        }

    Controller

        public class Test1Controller : Controller
        {
            public DailyMVCDemoContext db = new DailyMVCDemoContext();
            public List<SelectListItem> PopulateCities(string StateId)
            {
                List<SelectListItem> items = getCities(StateId).Select(m => new SelectListItem
                {
                    Text = m.CityName,
                    Value = m.CityId.ToString()
                }).ToList();
                return items;
            }
            public List<City> getCities(string StateId)
            {
                if (String.IsNullOrEmpty(StateId))
                {
                    StateId = "1";//set default value
                }
                var stateId = Int32.Parse(StateId);
                return db.Citys.Where(m => m.StateId == stateId).ToList();
            }
            public ActionResult ChangeCities(string StateId)//change city according to StateId
            {
                return Json(getCities(StateId),JsonRequestBehavior.AllowGet);
            }
            public List<SelectListItem> PopulateStates()
            {
                List<SelectListItem> items = db.States.Select(m => new SelectListItem
                {
                    Text = m.StateName,
                    Value = m.StateId.ToString()
                }).ToList();
                return items;
            }
            public List<PersonModel> PopulatePersonModel(string CityId,string StateId)//get table data
            {
                var list = db.PersonModels.Include(m=>m.City).Include(m=>m.State).ToList();
                if (CityId != null)
                {
                    list=list.Where(m => m.CityId == Int32.Parse(CityId)).ToList();
                }
                if (StateId != null)
                {
                    list=list.Where(m => m.StateId == Int32.Parse(StateId)).ToList();
                }
                return list;
            }
            public ActionResult Index()
            {
                TestPersonViewModel model = new TestPersonViewModel();
                model.StateUO_List = PopulateStates();
                model.CityUO_List = PopulateCities("1");//set default value
                model.CityUO = PopulatePersonModel(null,null);   //default
                return View(model);
            }
            [HttpPost]
            public ActionResult Index(TestPersonViewModel model)
            {
                model.StateUO_List = PopulateStates();
                model.CityUO_List = PopulateCities(String.IsNullOrEmpty(model.State)|model.State== "Select State"? null : (model.State));
                model.CityUO = PopulatePersonModel(String.IsNullOrEmpty(model.City)|model.City == "Select City"? null : model.City, model.State==null?null:(model.State));
                return View(model);
            }
        }

    View

    @model DailyMVCDemo2.Models.TestPersonViewModel
    @{
        WebGrid webGrid = new WebGrid(source: Model.CityUO, canPage: true, canSort: false, rowsPerPage: 10);
    }
    @webGrid.GetHtml(
            htmlAttributes: new { @id = "WebGrid", @class = "Grid table"},
            columns: webGrid.Columns(
                     webGrid.Column("PersonId", "Person Id"),
                     webGrid.Column("PersonName", "Person Name"),
                     webGrid.Column(columnName: "CityName", header: "City",format: item => item.City.CityName),
                     webGrid.Column(columnName: "StateName", header: "State",format: item => item.State.StateName)))
    
    @using (Html.BeginForm("Index", "Test1", FormMethod.Post, new { @Id = "WebGridForm" }))
    {
        @Html.DropDownList("State", Model.StateUO_List, "Select State", new { @id = "ddlState" })
        @Html.DropDownList("City", Model.CityUO_List, "Select City", new { @id = "ddlCity" })
    }
    @section scripts{
        <script type="text/javascript">
            $("body").on("change", "#ddlCity,#ddlState", function () {
                if ($(this).attr("id") == "ddlState") {
                    $.ajax({
                        url: "@Url.Action("ChangeCities")",
                        data: { StateId: $("#ddlState").val() },
                        async: false,
                        success: function (data) {
                            console.log(data)
                            $("#ddlCity").empty();
                            $("#ddlCity").append("<option>Select City</option>");
                            $.each(data, function (key, value) {
                                $("#ddlCity").append("<option value=" + value.CityId + ">" + value.CityName + "</option>");
                            });
                        }
                    });
                }
                $('#WebGridForm')[0].submit();
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 28, 2021 9:35 AM

All replies

  • User1686398519 posted

    Hi Golia, 

    1. CS1503
      1. This is a compiler error, which means that it cannot be converted from TypeA to TypeB.
      2. Can you tell me where did you get this error?
    2. model.CityUO_List = PopulateDates(???);
      1. What is your problem here?
      2. The problem you encountered is that you don’t know how to pass what type of parameters?
      3. According to the method PopulateDates(string UserUO) you wrote, the parameter it receives is a string type.

    Best Regards,

    YihuiSun

    Wednesday, January 27, 2021 3:00 AM
  • User1151703306 posted

    Hi YihuiSun, thanks for reply

    Hi Golia, 

    1. Golia

      CS1503
      1. This is a compiler error, which means that it cannot be converted from TypeA to TypeB.
      2. Can you tell me where did you get this error?

    I have edit and rewrite my code and now the DropDownList is populated and I don't have error...

    the DropDownList is populated from values of

    public static List<SelectListItem> PopulateDates(string UserUO)

    but the webgrid ?

    how do i populate the webgrid with the values and then edit it with the selected value in DropDownList?

    1. Golia

      model.CityUO_List = PopulateDates(???);
      1. What is your problem here?
      2. The problem you encountered is that you don’t know how to pass what type of parameters?
      3. According to the method PopulateDates(string UserUO) you wrote, the parameter it receives is a string type.

    On visual studio I see this 

    model.CityUO_List = PopulateDates();

    as error compilation

    I don’t know how to pass what type of parameters...

    Edit

    model

    public List<SelectListItem> CityUO_List { get; set; }
    
    public List<PersonModel> CityUO { get; set; }

    controller

        public ActionResult RecoveryAll()
        {
            PersonModel model = new PersonModel();
            model.CityUO_List = PopulateDates(null);
            return View(model);
        }
    
        [HttpPost]
        public ActionResult RecoveryAll(PersonModel model)
        {
            model.CityUO_List = PopulateDates();
            return View(model);
        }

    view

    @model Ins.Models.PersonModel
    
    @{
       WebGrid webGrid = new WebGrid(source: Model.CityUO, canPage: true, canSort: false, rowsPerPage: 10);
     }
    
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @Id = "WebGridForm" }))
    {
       @Html.DropDownList("City", Model.CityUO_List, "Select City", new { @id = "ddlCity" })
    }

    Wednesday, January 27, 2021 8:35 AM
  • User1686398519 posted

    Hi Golia, 

    but the webgrid ?

    model.CityUO_List = PopulateDates();

    Based on your description and the code you provided, I understand your needs like this:

    1. You want to use the value of the drop-down list to change the data in your table, right?
    2. According to the code you provided, PopulateDates() is only used to set the drop-down list of City.
      • In other words, for example, when you need to find out the corresponding cities based on the value of State, you can set a parameter called StateId in the PopulateDates(string StateId) method to get the correct cities.
    3. how do i populate the webgrid with the values and then edit it with the selected value in DropDownList?
      1. When you want to change the table data according to the value of the drop-down list, you need to customize a method to change the table data.
      2. I wrote an example, you can refer to it, and modify it according to your actual situation.
        1. Since you only provided part of the code, and did not give your Model (relationship between tables), so I added part of the code based on the code you provided.
        2. In addition, in the example, I used EF to query the data. You can change this to your own query method.

    Model

        public class TestPersonViewModel 
        {
            public string City { get; set; }
            public string State { get; set; }
            public List<SelectListItem> StateUO_List { get; set; }
            public List<SelectListItem> CityUO_List { get; set; }
            public List<PersonModel> CityUO { get; set; }
        }
        public class PersonModel
        {
            [Key]
            public int PersonId { get; set; }
            public string PersonName { get; set; }
            public int CityId { get; set; }
            [ForeignKey("CityId")]
            public City City { get; set; }
            public int StateId { get; set; }
            [ForeignKey("StateId")]
            public State State { get; set; }
        }
        public class City
        {
            [Key]
            public int CityId { get; set; }
            public string CityName { get; set; }
            public int StateId { get; set; }
        }
        public class State
        {
            [Key]
            public int StateId { get; set; }
            public string StateName { get; set; }
        }

    Controller

        public class Test1Controller : Controller
        {
            public DailyMVCDemoContext db = new DailyMVCDemoContext();
            public List<SelectListItem> PopulateCities(string StateId)
            {
                List<SelectListItem> items = getCities(StateId).Select(m => new SelectListItem
                {
                    Text = m.CityName,
                    Value = m.CityId.ToString()
                }).ToList();
                return items;
            }
            public List<City> getCities(string StateId)
            {
                if (String.IsNullOrEmpty(StateId))
                {
                    StateId = "1";//set default value
                }
                var stateId = Int32.Parse(StateId);
                return db.Citys.Where(m => m.StateId == stateId).ToList();
            }
            public ActionResult ChangeCities(string StateId)//change city according to StateId
            {
                return Json(getCities(StateId),JsonRequestBehavior.AllowGet);
            }
            public List<SelectListItem> PopulateStates()
            {
                List<SelectListItem> items = db.States.Select(m => new SelectListItem
                {
                    Text = m.StateName,
                    Value = m.StateId.ToString()
                }).ToList();
                return items;
            }
            public List<PersonModel> PopulatePersonModel(string CityId,string StateId)//get table data
            {
                var list = db.PersonModels.Include(m=>m.City).Include(m=>m.State).ToList();
                if (CityId != null)
                {
                    list=list.Where(m => m.CityId == Int32.Parse(CityId)).ToList();
                }
                if (StateId != null)
                {
                    list=list.Where(m => m.StateId == Int32.Parse(StateId)).ToList();
                }
                return list;
            }
            public ActionResult Index()
            {
                TestPersonViewModel model = new TestPersonViewModel();
                model.StateUO_List = PopulateStates();
                model.CityUO_List = PopulateCities("1");//set default value
                model.CityUO = PopulatePersonModel(null,null);   //default
                return View(model);
            }
            [HttpPost]
            public ActionResult Index(TestPersonViewModel model)
            {
                model.StateUO_List = PopulateStates();
                model.CityUO_List = PopulateCities(String.IsNullOrEmpty(model.State)|model.State== "Select State"? null : (model.State));
                model.CityUO = PopulatePersonModel(String.IsNullOrEmpty(model.City)|model.City == "Select City"? null : model.City, model.State==null?null:(model.State));
                return View(model);
            }
        }

    View

    @model DailyMVCDemo2.Models.TestPersonViewModel
    @{
        WebGrid webGrid = new WebGrid(source: Model.CityUO, canPage: true, canSort: false, rowsPerPage: 10);
    }
    @webGrid.GetHtml(
            htmlAttributes: new { @id = "WebGrid", @class = "Grid table"},
            columns: webGrid.Columns(
                     webGrid.Column("PersonId", "Person Id"),
                     webGrid.Column("PersonName", "Person Name"),
                     webGrid.Column(columnName: "CityName", header: "City",format: item => item.City.CityName),
                     webGrid.Column(columnName: "StateName", header: "State",format: item => item.State.StateName)))
    
    @using (Html.BeginForm("Index", "Test1", FormMethod.Post, new { @Id = "WebGridForm" }))
    {
        @Html.DropDownList("State", Model.StateUO_List, "Select State", new { @id = "ddlState" })
        @Html.DropDownList("City", Model.CityUO_List, "Select City", new { @id = "ddlCity" })
    }
    @section scripts{
        <script type="text/javascript">
            $("body").on("change", "#ddlCity,#ddlState", function () {
                if ($(this).attr("id") == "ddlState") {
                    $.ajax({
                        url: "@Url.Action("ChangeCities")",
                        data: { StateId: $("#ddlState").val() },
                        async: false,
                        success: function (data) {
                            console.log(data)
                            $("#ddlCity").empty();
                            $("#ddlCity").append("<option>Select City</option>");
                            $.each(data, function (key, value) {
                                $("#ddlCity").append("<option value=" + value.CityId + ">" + value.CityName + "</option>");
                            });
                        }
                    });
                }
                $('#WebGridForm')[0].submit();
            });
        </script>
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, January 28, 2021 9:35 AM
  • User1151703306 posted

    Thanks so much for this help.

    Thursday, January 28, 2021 10:23 AM