Получить выбранные данные из контейнера div для хранения в базе данных в asp.net mvc - PullRequest
Новая
       7

Получить выбранные данные из контейнера div для хранения в базе данных в asp.net mvc

0 голосов
/ 25 января 2019

У меня есть два контейнера div, один из которых содержит список из базы данных, а другой изначально пуст. Выбранные элементы перетаскиваются из контейнера1 в контейнер2. Итак, в конце у меня есть два контейнера с элементами.

Я хочу сохранить выбранные элементы (содержащиеся в контейнере 2) в базе данных как назначенные элементы. Вот то, что у меня уже есть: 

$(document).ready(function () {

    $('.box-item').draggable({
        cursor: 'move',
        helper: "clone"
    });

    $("#container1").droppable({
        drop: function (event, ui) {
            var itemid = $(event.originalEvent.toElement).attr("itemid");
            $('.box-item').each(function () {
                if ($(this).attr("itemid") === itemid) {
                    $(this).appendTo("#container1");
                }
            });
        }
    });

    $("#container2").droppable({
        drop: function (event, ui) {
            var itemid = $(event.originalEvent.toElement).attr("itemid");
            $('.box-item').each(function () {
                if ($(this).attr("itemid") === itemid) {
                    $(this).appendTo("#container2");
                }
            });
        }
    });

});
/* Styles go here */

.box-container {
    /*height: auto;
    min-height: 500px;*/
    height: 200px;
}

.box-item {
    width: 100%;
    z-index: 1000
}
<div class="row">
            <div class="col-lg-10 col-lg-offset-1">

                @using (Html.BeginForm("AffecterChauffeur", "Chauffeur", FormMethod.Post, new { @class = "col-lg-12", id = "formAssignVehicles" }))
                {
                    <fieldset>
                        <legend>Affecter des voitures par glisser-déposer</legend>
                        @*@{ int counter = 1;}*@
                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-5">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Liste des véhicules</h3>
                                </div>
                                <div id="container1" class="panel-body box-container" style="overflow-y:auto">
                                    @foreach (var voiture in Model.ListeVoituresAffectees)
                                    {
                                        
                                        <div itemid="@voiture.VoitureId" class="btn btn-default box-item">
                                            @Html.DisplayFor(model => voiture.MarqueVoiture.Libelle)
                                        </div>
                                        //counter++;
                                    }

                                </div>
                            </div>
                        </div>

                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-5 col-lg-offset-1">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Liste des véhicules affectées</h3>
                                </div>
                                <div id="container2" class="panel-body box-container" style="overflow-y:auto"></div>
                            </div>
                        </div>

                    </fieldset>
                    <div class="row">
                        <div class="col-lg-3 col-lg-offset-3">
                            <div class="form-group">
                                <input type="submit" class="form-control btn-primary" value="Affecter les voitures">
                            </div>
                        </div>
                        <div class="col-lg-3">
                            <div class="form-group">
                                <input type="reset" class="form-control btn-danger" value="Annuler les affectations"/>
                            </div>
                        </div>
                    </div>
                }

            </div>
        </div>

Модель 

public class AffecterChauffeurVM
{
    TitanContext db = new TitanContext();

    public List<VOITURE> ListeVoituresAffectees;   

    public int ChauffeurId { get; set; }

    [Display(Name = "Nom")]
    public String Nom { get; set; }

    [Display(Name = "Prénom")]
    public String Prenom { get; set; }

    [Display(Name = "Nom")]
    public string NomComplet { get; set; }

    [Display(Name ="Profil")]
    public string Photo { get; set; }
    public virtual AFFECTATION Affectation { get; set; }

    public AffecterChauffeurVM()
    {
        this.ListeVoituresAffectees = db.Voitures.ToList();
    }

}

Контроллер 

[HttpPost]
    public ActionResult AffecterChauffeur(AffecterChauffeurVM AffecterChauffeurVM)
    {
        AFFECTATION Affectation = new AFFECTATION();

        using (IDAL dal = new Dal())
        {
            Affectation.NombreVoituresAffectees = dal.EnregistrerVoituresAffecteesAuChauffeur(AffecterChauffeurVM);
        }

        return View("ListeAffectationsChauffeurs", Affectation);
    }

Пожалуйста, есть идеи, как мне этого добиться?

...