locked
How can I dynamically add an array of drop-down lists in my view? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User568202912 posted

    Hi,

    I'm trying to create a view that has an array of resource records, e.g.:

    (Add Resource)
    [  Role Name ] [ Location (drop down) ]   (Remove)
    [  Role Name ] [ Location (drop down) ]   (Remove)
    [  Role Name ] [ Location (drop down) ]   (Remove)

    The Role Name field is a text box while the Location field is a select drop-down list, always with the same four options.

    Clicking the "Add Resource" button dynamically creates a new row while the "Remove" button removes a row.  Ideally, I'd like that code to live on the client, but if it's easier to have it post back to the server to generate a new row that's OK.

    I have a Model.Resource class that has fields for Id, RoleName (string), and LocationId (int).  This List<Resource> is part of a larger class:  Parent.

    How can I accomplish this?  I'm not even sure how the elements should be named on the client (selectedLocationId[0], selectedLocationId[1] or some other way?)  Once I get the final postback from the client, how do I retrieve the list of items?  Can I get them from the ViewModel, or would I have to look at Request.Form or something?

    Thanks for your help.
     - Ed.

    Monday, April 27, 2020 2:37 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User1686398519 posted

    Hi,  ed_m

    According to your needs, I made an example. I created a class "Location" to use as a data source for the drop-down list.I used modal and partial views to add new ones.

    More details, you could refer to below code:

    ResourceTestController

    public ActionResult Index()

        {

            getPosition();

            return View(db.Resources.ToList());

        }

        public ActionResult Add()

        {

            getPosition();

            return PartialView("Add");

        }

        [HttpPost]

        public ActionResult Add(Resource resource)

        {

            string locationId = Request["locationId"];

            resource.LocationId = Int32.Parse(locationId);

            db.Resources.Add(resource);

            db.SaveChanges();

            return RedirectToAction("Index");

        }

        public ActionResult Delete(int Id)

        {

            Resource resource = db.Resources.Find(Id);

            db.Resources.Remove(resource);

            db.SaveChanges();

            return RedirectToAction("Index");

        }

        public void getPosition()

        {

            List<SelectListItem> itemList = new List<SelectListItem>();

            var locationList = db.Locations.ToList();

            locationList.ForEach(l =>

            {

                SelectListItem item = new SelectListItem()

                {

                    Value = l.LocationId.ToString(),

                    Text = l.LocationUrl

                };

                itemList.Add(item);

 

            });

            SelectList select = new SelectList(itemList, "Value", "Text");

            ViewBag.select = select;

        }

    Index

    @Html.ActionLink("Add", "Add", "ResourceTest", new { @class = "btn btn-primary", data_toggle = "modal", data_target = "#MyModal" })

 

<table>

    <thead>

        <tr>

            <td>

                @Html.Label("RoleName", htmlAttributes: new { @class = "control-label col-md-2" })

            </td>

            <td>

                @Html.Label("Position", htmlAttributes: new { @class = "control-label col-md-2" })

            </td>

            <td>

                @Html.Label("Operation", htmlAttributes: new { @class = "control-label col-md-2" })

            </td>

        </tr>

    </thead>

 

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>

                    @Html.Label(item.RoleName, htmlAttributes: new { @class = "control-label col-md-2" })

                </td>

                <td>

                    @Html.DropDownList("locationId", new SelectList(ViewBag.select, "Value", "Text", item.LocationId) as SelectList, new { @class = "form-control" })

                </td>

                <td>

                    @Html.ActionLink("Delete", "Delete", "ResourceTest", new { Id = item.Id },new { @class = "btn btn-primary"})

                </td>

            </tr>

        }

    </tbody>

</table>

 

<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="MyModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

 

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

    Add

    @model yihuisun.Models.Resource

@using (Html.BeginForm())

{

    <div class="modal-header">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <h4 class="modal-title" id="MyModalLabel">Products Create</h4>

    </div>

    <div class="modal-body">

 

        <div class="form-horizontal">

            <div class="form-group">

                @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-3" })

                <div class="col-md-10">

                    @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control" } })

                </div>

            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.RoleName, htmlAttributes: new { @class = "control-label col-md-3" })

                <div class="col-md-10">

                    @Html.EditorFor(model => model.RoleName, new { htmlAttributes = new { @class = "form-control" } })

                </div>

            </div>

            <div class="form-group">

                @Html.LabelFor(model => model.LocationId, htmlAttributes: new { @class = "control-label col-md-3" })

                <div class="col-md-10">

                    @Html.DropDownList("locationId", ViewBag.select as SelectList, new { @class = "form -control" })

                </div>

            </div>

        </div>

    </div>

    <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">close</button>

        <button type="submit" class="btn btn-primary">save</button>

    </div>

}

    Resource

    public class Resource

    {

        [Key]

        public int Id { get; set; }

        public string RoleName { get; set; }

        public int LocationId { get; set; }

}

    Location

    public class Location

    {

        [Key]

        public int LocationId { get; set; }

        public string LocationUrl { get; set; }

    }


    Here is the result.

     
     

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 28, 2020 11:13 AM