Как добавить SelectedItem из раскрывающегося списка в <Table> с помощью списка моделей <>

Я работаю над страницей, которая добавит выбранный элемент из раскрывающегося списка в список <> с помощью кнопки onclick.

Проблема в том, что новый выбранный элемент перезаписывает старое значение.

Я просто хотел бы отобразить таблицу из выбранных элементов следующим образом:

#---Model-----Remove-----
1   Model#1       x
2   Model#2       x
3   Model#3       x
4   Model#4       x
5   Model#5       x
-------------------------

Пожалуйста, посмотрите мой код ниже,

ModelDescription.cs (модель):

 public class ModelDescription
{
    public string modelDesc { get; set; }
}

метод в контроллере:

public ActionResult StockOnHand()
    {
        bindModelDesc();
        return View();
    }

 public void bindModelDesc()
    {
        var mc = db.ModelMaster_tbl.ToList();
        List<SelectListItem> mclist = new List<SelectListItem>();
        mclist.Add(new SelectListItem { Text = "--Select Model Type--", Value = "0" });
        mclist.Add(new SelectListItem { Text = "--Select All Model--", Value = "1" });

        foreach (var m in mc.Select(x => x.modelDesc).Distinct())
        {
            mclist.Add(new SelectListItem { Text = m, Value = m });

            ViewBag.ModelDescs = mclist;
        }
    }

   public ActionResult AddToListSOH(ModelDescription model)
    {
        var result = new List<ModelDescription>();
        var res = db.ModelMaster_tbl.Where(x => x.modelDesc == model.modelDesc).SingleOrDefault();

        result.Add(new ModelDescription { modelDesc = res.modelDesc });

        return PartialView("AddToListSOH", result);
    }

StockOnHand.cshtml (просмотреть):

@using (Html.BeginForm("StockOnHand", "PWSupermarket", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<div class = "card">
    <div class = "card-body">
        <form class = "form-horizontal" role = "form">
            <h5 class = "card-title">Stock On Hand</h5>
            <p class = "card-text">Generates the buildable quantity of a unit. </p>
            <hr />
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            @if (TempData["Message"] != null)
            {
                <span class = "text-success"><strong>@TempData["Message"]</strong></span>
            }

            <div class = "form-group">
                @Html.LabelFor(model => model.modelDesc, htmlAttributes: new { @class = "col-md-3 control-label" })
                <div class = "col-md-10">
                    @Html.DropDownListFor(model => model.modelDesc, ViewBag.ModelDescs as List<SelectListItem>, htmlAttributes: new { @class = "form-control" })
                    <button class = "btn btn-outline-primary mt-1" type = "button" onclick = "AddToList()">Add To List</button>
                </div>

            </div>

            <div id = "foo1" class = "mt-2">

            </div>

        </form>
    </div>
</div>
}

Javascript для частичного отображения списка выбранных элементов:

  <script type = "text/javascript">

     function AddToList() {
        $.ajax({
            type: "Get",
            url: '@Url.Action("AddToListSOH", "PWSupermarket")',
            data: { modelDesc: $('#modelDesc').val() },
            contentType: "application/html; charset=utf-8",
            success: function (result) {
                $('#foo1').html(result);
            },
            error: function (ex) { alert('failed.'); }
        })
    }

</script>

AddToListSOH.cshtml (частичный просмотр списка выбранных элементов):

@model IEnumerable<MESProject_P1_csmvc.Models.ModelDescription>

<div>
@{ var count = 0;}
<table class = "table table-sm table-striped" @*style = "font-size: .7rem;"*@>
    <caption>List of Models</caption>
    <thead class = "thead-dark">
        <tr>
            <th>#</th>
            <th>Model</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                   @count
                </td>
                <td>
                    @Html.DisplayFor(i => item.modelDesc)
                </td>
            </tr>

        }
    </tbody>
</table>
</div>

снимок экрана страницы

Вы должны сделать List <SelectListItem> в контроллере, где вы можете определить Selected true.

Md. Abdul Alim 31.10.2018 08:18

@ Md.AbdulAlim Спасибо. но не могли бы вы дать мне более подробную информацию?

LeonardDM 31.10.2018 08:23

Хорошо, я приведу вам пример

Md. Abdul Alim 31.10.2018 08:27

Ваш метод контроллера инициализирует новый List<ModelDescription> каждый раз и добавляет только один элемент в коллекцию, а затем вы создаете партиал на основе этой коллекции. Один из вариантов - включить <table> в главное представление, а часть основана на одной модели, то есть @model ModelDescription, и генерирует только элемент <tr>, а затем вы добавляете его к существующему <table>.

user3559349 31.10.2018 10:45

Но нет причин для отправки обратно в метод контроллера (если вы не хотите что-то сохранять, потому что все данные, которые вам нужны, уже находятся в DOM. Вы можете просто получить выбранные текст и значение параметров и создать элемент <tr> с помощью javascript / jquery на основе этих значений и добавить его к элементу <table> `

user3559349 31.10.2018 10:47

да, я постараюсь сделать это, используя ваши предложения. Я отправлю это здесь, когда закончу. Спасибо..

LeonardDM 08.11.2018 09:37
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
6
74
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пример создания списка SelectListItem

private List<SelectListItem> ModelDeskList(ModelDesk modelDesc)
        {
            List<SelectListItem> selectList = new List<SelectListItem>();
            selectList.Add(new SelectListItem { Value = "", Text = "------Select-----",Selected=true });
            foreach (var model in modelDesc)
            {
                selectList.Add(new SelectListItem { Value = model.Id.ToString(), Text = model.Name});
            }
            return selectList;
}

Надеюсь, ты найдешь в нем свое решение

OP просит не об этом!

user3559349 31.10.2018 08:41

У меня уже есть рабочие коды для выпадающего списка. Я не могу понять, как добавить выбранный элемент в список <> (таблица). спасибо @Md. Абдул Алим.

LeonardDM 31.10.2018 09:18

Согласно правилам переполнения стека у вас нет права голоса, но вы можете принять ответ. Что находится ниже кнопки голосования против

Md. Abdul Alim 31.10.2018 09:35

Извините, но я не могу принять ваш ответ, потому что он не решает мою проблему / вопрос. Благодарность

LeonardDM 31.10.2018 09:39
Ответ принят как подходящий

Я решил свою проблему по этой ссылке:

I'm storing the list of emails in Session["emails"] and every time I add a new email to the list, I just update it a pass it to a new list with all the records and at the end return the partial view.

.NET использует частичное представление несколько раз @Rolando F

Я изменил некоторые из своих кодов:

ModelDescription.cs

public class ModelDescription
{
    public IEnumerable<string> modelsAdded { get; set; }
}

AddToListSOH в контроллере:

 public ActionResult AddToListSOH(string model)
    {
        if (Session["modelInputs"] == null)
        {
            List<string> temphandler1 = new List<string>();
            temphandler1.Add(model);
            Session["modelInputs"] = temphandler1;
        }
        else
        {
            List<string> temphandler2 = new List<string>();
            temphandler2 = (List<string>)Session["modelInputs"];
            temphandler2.Add(model);
            Session["modelInputs"] = temphandler2;
        }

        var result = new ModelDescription { modelsAdded = (List<string>)Session["modelInputs"] }; 


        return PartialView("AddToListSOH", result);
    }

AddToListSOH.cshtml (частичное представление):

<table class = "table table-sm table-striped" @*style = "font-size: .7rem;"*@>
    <caption>List of Models</caption>
    <thead class = "thead-dark">
        <tr>
            <th>#</th>
            <th>Model</th>
            <th>Remove</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.modelsAdded)
        {
            <tr>
                <td>
                   @count
                </td>
                <td>
                    @Html.DisplayFor(i => item)
                </td>
                <td>
                    Remove
                </td>
            </tr>

        }
    </tbody>
</table>

Другие вопросы по теме