Filter WebGrid using DropDownList in ASP.Net MVC

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" })
}

Answer 1

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

Answer 2

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" })
}

Answer 3

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

Answer 4

User1151703306 posted

Thanks so much for this help.