Question

我正在尝试实现一个名为“Multiselect”的JQuery插件，其中包含两面，允许用户从左侧列表框中选择项目到右侧列表框中。但是当我尝试使用MVC Web API实现它时，它失败了： - （

从屏幕截图中可以看出，“to”数组参数为空。 “id”参数很好（因为它是URI的一部分）。这是jquery：

 $("body").on("click", "#post-multi", function () {
    var btn = $("#post-multi");
    var src = btn.attr("post-src");
    var formMethod = btn.attr("post-method");
    var rec = $("#multiselect_to>option").map(function () {
        return $(this).val();
    }).get();

    $.ajax({
        url: src,
        method: formMethod,
        data: rec,
        dataType: "json",
        traditional: true,
        success: function (response, status, xhr) {
            location.reload();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            bootbox.alert("Error: " + errorThrown);
        }
    });
});

以下是“右侧”列表框的HTML，其中包含用户选择的选项：

<div class="col-xs-5">
        <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>
    </div>

Answer 1

希望这个答案让某些人在那里饶恕我花费了多少时间来解决这个问题。此问题是关于了解将COMPLEX类型和SIMPLE类型发送到服务器之间的区别。在我的大多数开发中，我使用“复杂”类型（我发送序列化为视图模型或数据传输对象的数据）。在这种罕见的场合，我发送一个“简单”类型（一个字符串，整数或bool类型的单个数据类型参数;在我的例子中，是一个字符串数组）。

Web API处理“简单”与“复杂”类型的处理方式大致相同，只是必须进行一些调整：

1）在Web API函数中将“FromBody”包含在“simple”类型参数前面（参数名称为IRRELEVANT。您可以将此名称命名为;它不必与名称相匹配你的选择器）：

public IHttpActionResult AlterPerms(int id, [FromBody] string[] to)
        {
            . . .
        }

2）更改Ajax调用以发送空数据参数：data：{''：rec}所以我的案例中的整个代码如下所示：

Web API：

        //api/perms/3
        [Route("api/perms/{id}")]
        [ResponseType(typeof(void))]
        [HttpPost]
        public IHttpActionResult AlterPerms(int id, [FromBody] string[] to)
        {
            permSvc.AlterPermissions(id, to);
            permSvc.Save();
            return StatusCode(HttpStatusCode.NoContent);
        }

JQuery的：

$("body").on("click", "#post-multi", function () {
    var btn = $(this);
    var src = btn.attr("post-src");
    var formMethod = btn.attr("post-method");
    var rec = $("#multiselect_to>option").map(function () {
        return $(this).val();
    }).toArray();

    $.ajax({
        url: src,
        method: formMethod,
        data: { '': rec },
        dataType: "json",
        success: function (response, status, xhr) {
            location.reload();
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            bootbox.alert("Error: " + errorThrown);
        }
    });
});

为MVC Web API实现具有双方的Multiselect jquery插件

1 个答案: