Question

我在将部分视图中的数据发布到控制器时出现问题：几句话就没有执行控制器操作。

这是我的ViewModel

public class BloccoQuartiVM: MessaggioVM
{
    public int IdAttivita { get; set; }
    public IList<int> IdPersona { get; set; }
    public IEnumerable<Persona> ElencoPersone { get; set; }
}

Persona班级有int Id和string Name

这是我的部分观点

<form role="form" data-toggle="validator" id="frmBloccoQuarti" name="frmBloccoQuarti">
    <div>
        <div class="cell padding10 size3">
            <label for="IdAttivita">Attivita</label>
            <input type="number" id="IdAttivita" name="IdAttivita" value="@Model.IdAttivita" />
            <br />
            <label for="IdPersona">Persona</label>
            <select id="IdPersona" name="IdPersona" class="selectpicker" data-live-search="true" multiple>
                @if (Model.ElencoPersone != null)
                {
                    foreach (Persona persona in Model.ElencoPersone)
                    {           
                        <option value="@persona.Id">@persona.NomePersona</option>
                    }
                }
            </select>
        </div>
    </div>
</form>

    <div class="cell padding10 size1">
        <div class="form-group">
            <button type="submit" name="BloccaQuarti" class="imgBottone imgBlocca btn btn-primary" id="bloccaQuarti" form="frmBloccoQuarti" />          
        </div>    
    </div>

这是发布的ajax调用

<script type="text/javascript">
    $("#bloccaQuarti").click(function () {
        $.ajax({
            url: "@Url.Action("BloccaQuarti", "Blocchi")",
            type: "post",
            data: $("#frmBloccoQuarti").serialize(),
            success: function (result) {
                $("#bloccoQuarti").html(result);
            },
            error: function (result) {
                alert("errore: ");
            }
        });
    });
</script>

这是Controller BlocchiController

中的操作

[HttpPost]
Public ActionResult BloccaQuarti(BloccoQuartiVM arguments)
{
    // do something with arguments
}

当我点击BloccaQuarti按钮时，此操作不会被调用

如果我删除multiselect一切正常，那么认为问题在其中

调试javascript我看到Persona所选项目（正确？）以这种方式编写：IdPersona=1&IdPersona=2...

我尝试使用public IList<int> IdPersona { get; set; }，array，IEnumerable更改模型List，甚至将类型转换为字符串，但没有任何更改

Answer 1

JQuery serialize方法返回一个编码字符串（参见documentation）

您可以使用serializeObject方法代替the David G. Hong's plugin（请参阅documentation）

<script type="text/javascript">
    $("#bloccaQuarti").click(function () {
        $.ajax({
            url: "@Url.Action("BloccaQuarti", "Blocchi")",
            type: "post",
            data: $("#frmBloccoQuarti").serializeObject(),
            success: function (result) {
                $("#bloccoQuarti").html(result);
            },
            error: function (result) {
                alert("errore: ");
            }
        });
    });
</script>

或者你可以在ajax调用之前构建你的javascript对象：

<script type="text/javascript">
$("#bloccaQuarti").click(function () {
    var data = {
        IdAttivita : $('#IdAttivita').val(),
        IdPersona : $('#IdPersona').val()
    };
    $.ajax({
        url: "@Url.Action("BloccaQuarti", "Blocchi")",
        type: "post",
        data: data,
        success: function (result) {
            $("#bloccoQuarti").html(result);
        },
        error: function (result) {
            alert("errore: ");
        }
    });
});
</script>

Answer 2

根据您的功能，您不需要传递模型。

因为你的部分内部有一个文本框和一个下拉控件   查看，您可以简单地传递三个字符串 - ＆＃34;文本框值＆＃34; ,.   ＆＃34;下拉值＆＃34;以及＆＃34;下拉文字＆＃34;。

就是这样。如果能够以简单的方式实现，为什么需要通过复杂的模型？

即使可以通过复杂的模型，但你不需要这里。

因此，您可以修改您的行动，如下所示

[HttpPost]
Public ActionResult BloccaQuarti(string textvalue, string optionvalue, string optiontext)
{
    // do something with arguments
}

ajax调用将如下所示

<script type="text/javascript">
$("#bloccaQuarti").click(function () {
    var textvalue =  $('#IdAttivita').val();
    var optionvalue = $("#IdPersona option:selected").val();
    var optiontext = $("#IdPersona option:selected").text();

    $.ajax({
       url: "@Url.Action("BloccaQuarti", "Blocchi")",
       type: "POST",
       data: {"textvalue": textvalue, "optionvalue": optionvalue,"optiontext": optiontext},
       success: function (result) {
            $("#bloccoQuarti").html(result);
       },
       error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("errore : " + errorThrown);
        }
    });
});
</script>

Answer 3

As discussed, change the type of your button to Type="button" instead of submit. That can then trigger the ajax post on the intended click event.

Thanks

Answer 4

您的参数未被识别为BloccoQuartiVM元素。尝试将它们作为字符串发送然后进行操作。

[HttpPost]
Public ActionResult BloccaQuarti(string arguments)
{
    // do something with arguments
}

具有MVC和Ajax的Bootstrap MultiSelect DropDown在部分视图中序列化

4 个答案: