从视图中的下拉列表容器中获取值-MVC

Question

大家好，我有一些MVC应用程序，我尝试从下拉列表容器中获取值。我试图以这种方式推荐How to get DropDownList SelectedValue in Controller in MVC，但是在某些情况下它可以工作，而在其他情况下却不能。

在我看来，我有两个下拉列表容器和两个按钮，用于从一个列表选择和删除到另一个列表（javascript offcourse）。

当我在容器Bool中有3位Authors并从其中删除一位时，在我的控制器中，如果if语句中我得到那个Request.Form [“ ChoosenAuthors”]为空，并且他还有2位Authors容器。

我的观点：

ChoosenAuthos

我在该页面上运行的javascript：

@model PrivateLibrary.Models.Book

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script type="text/javascript" src="~/Scripts/CreateBook.js"></script>


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Book_Id)

    <div class="form-group">
        @Html.LabelFor(model => model.Book_Name, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Book_Name, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Book_Name, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ISBN_Number, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ISBN_Number, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.ISBN_Number, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Book_Desription, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Book_Desription, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Book_Desription, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.User_Id, "User_Id", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("User_Id", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.User_Id, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <b>Authors: </b>
                    @Html.DropDownList("Authors", new SelectList(ViewBag.Authors, "Value", "Text"), htmlAttributes: new { size = "10", @class = "form-control", Multiple = "multiple", style = "width:150px;height : 200px" })
                </div>
                <div class="col-sm-2 btn-group-vertical">
                    <br><br><br>
                    <button type="button" class="btn btn-primary btn-md" id="choose">Choose</button>
                    <button type="button" class="btn btn-primary btn-md" id="remove">Remove</button>
                </div>
                <div class="col-sm-2">
                    <b>Choosen Authors:</b><br>
                    @Html.DropDownList("ChoosenAuthors", new SelectList(ViewBag.ChoosenAuthors, "Value", "Text"), htmlAttributes: new { size = "10", @class = "form-control", Multiple = "multiple", style = "width:150px;height : 200px" })
                </div>
            </div>
        </div>
    </div>


    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

我的控制器：

$(function () {
$('#choose').click(function () {
    inHTML = "";
    $("#Authors option:selected").each(function () {
        inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
    });
    $("#Authors option:selected").remove();
    $("#ChoosenAuthors").append(inHTML);
});

$('#remove').click(function () {
    inHTML = "";
    $("#ChoosenAuthors option:selected").each(function () {
        inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
    });
    $("#ChoosenAuthors option:selected").remove();
    $("#Authors").append(inHTML);
});

$("form").submit(function (e) {
    $("#ChoosenAuthors option").attr("selected", "selected");
});

});