Question

我正在创建一个能够使用ajax MVC 5选择多个值的查找页面。

用户在点击查找按钮之前选择subsidiaryClientID，然后它将基于subsidiaryClientID以模态形式显示公司事项列表。选择1个或多个公司的事项后，单击保存将所选公司的事项发送给控制器。我正在使用jquery ajax将所选公司的事务发送给控制器

问题是我不知道应该如何使用这种技术发送所选数据。

$.ajax({
    type: "POST",
    data: ???
});

我尝试使用$('form').serialize()发送数据，但它不起作用。如何解决这个问题？

查看：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            </div>
            <div class="modal-body" id="lookup-timekeeper-container">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="btnSave" onclick="javascript:getMultipleFirmMatter()" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

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

    <div class="form-horizontal">
        <h4>Client's Matter</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.SubsidiaryClientID, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.SubsidiaryClientID, new SelectList(Model.SubsidiaryClients, "SubsidiaryClientID", "Name"), "-- Please Select --", new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SubsidiaryClientID)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.FirmMatters, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="form-inline">
                    <button class="btn btn-primary" id="btnLookupFirmMatter" data-id="@Model.SubsidiaryClientID" data-toggle="modal" data-target="#myModal">Lookup Firm Matter</button>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10" id="selectedFirmMatters">

            </div>
        </div>

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

脚本：

$("#btnLookupFirmMatter").click(function () {
    var url = '@Url.Content("~/FirmMatter/Search?subsidiaryClientID=")' + $("#SubsidiaryClientID").val();
    $.get(url)
        .done(function (data) {
            if (!data.message) {
                $("#lookup-timekeeper-container").html(data);
                $("#myModal").modal(show = true, backdrop = true);
            } else {
                alert(data.message);
                $('#myModal').modal('hide');
            }
        });
});

$("#btnSave").click(function () {
    $.ajax({
        type: "POST",
        url: '@Url.Content("~/FirmMatter/Search/")',
        data: ???
        traditional: true
    })
    .done(function (data) {
        $("#selectedFirmMatters").html(data);
    });

    $('#myModal').modal('hide');
});

控制器：

public ActionResult Search(int subsidiaryClientID)
{
    var firmMatters = db.FirmMatters.Where(fm => fm.SubsidiaryClientID == subsidiaryClientID);
    List<AssignedFirmMatterData> assignedFirmMattersData = new List<AssignedFirmMatterData>();
    foreach (FirmMatter firmMatter in firmMatters.ToList())
    {
        assignedFirmMattersData.Add(new AssignedFirmMatterData{
            FirmMatterID = firmMatter.FirmMatterID,
            FirmMatterNo = firmMatter.FirmMatterNo,
            Description = firmMatter.Description,
            Assigned = false
        });
    }
    return PartialView("_LookupMultiple", assignedFirmMattersData);
}

[HttpPost]
public ActionResult Search(List<AssignedFirmMatterData> assignedFirmMattersData)
{
    // assignedFirmMattersData is null, how to get the user selected data?
}

部分视图：

@model List<Application.ViewModels.AssignedFirmMatterData>

<div class="table-responsive">
    <table class="table table-striped table-hover table-condensed">
        <tr>
            <th></th>
            <th>No</th>
            <th>Description</th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                @Html.HiddenFor(modelItem => item.FirmMatterID)
                <td>@Html.CheckBoxFor(modelItem => item.Assigned)</td>
                <td>@Html.DisplayFor(modelItem => item.FirmMatterNo)</td>
                <td>@Html.DisplayFor(modelItem => item.Description)</td>
            </tr>
        }
    </table>
</div>

Answer 1

将html表单更改为具有表单ID：

@using (Html.BeginForm("Search", "YouController", FormMethod.Post, new {id = "form1" }))


And Send with ajax:

var myData = $('#form1').serializeArray(); 
$.ajax({
    type: "POST", 
    datatype: 'JSON',
    data:  { assignedFirmMattersData:  JSON.stringify(myData)},
});

如何将多个选定数据从模态发送到控制器

1 个答案: