如何使用淘汰赛js在引导模式中获取选定的行

Question

我正在尝试使用 Knockout JS 创建一个主从页面，如下图所示

我在详细信息中从引导模式获取值时遇到问题。例如，点击子客户端栏的浏览按钮后，会在引导模式中出现子客户端列表。

单击选择链接后，我无法将值（SubsidiaryClientID、SubsidiaryClientNo 和 Name）返回到父页面。如何获取这些值并设置到父页面？

代码如下：

查看：Create.cshtml

<form action="~/Invoice/CreateKO" method="post">
    <div class="form-horizontal">
        <hr />

        <div class="form-group">
            <label class="control-label col-md-2">Office</label>
            <div class="col-md-10">
                <select name="OfficeID" id="OfficeID" class="form-control" data-bind="options: Offices, optionsText: 'Name', optionsValue: 'OfficeID', optionsCaption: '-- Please Select --', value: OfficeID"></select>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">Client</label>
            <div class="col-md-10">
                <input type="hidden" name="ClientID" id="ClientID" data-val-required="The Client field is required."
                       data-val-number="The field Client must be a number." data-val="true" data-bind="value: ClientID" />
                <div class="form-inline">
                    <input type="text" name="ClientName" id="ClientName" readonly="readonly" value="" class="form-control" style="width: 280px" />
                    <button type="button" class="btn btn-primary" data-bind="click: browseClient, enable: OfficeID()">...</button>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped table-hover table-condensed">
                <thead>
                    <tr>
                        <th></th>
                        <th>Subsidiary Client</th>
                        <th>Firm's Matter</th>
                        <th>eBilling Matter</th>
                        <th>Invoice No</th>
                        <th>Attachment</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: Invoices, visible: Invoices().length > 0">
                    <tr>
                        <td><a href="#" data-bind="click: $parent.removeInvoice">Remove</a></td>
                        <td>
                            <input type="hidden" data-bind="value: SubsidiaryClientID" />
                            <input type="text" class="form-control" data-bind="value: SubsidiaryClientNo" readonly="readonly" />
                            <input type="text" class="form-control" data-bind="value: SubsidiaryClientNo" readonly="readonly" />
                            <button type="button" class="btn btn-primary" data-bind="click: browseSubsidiaryClient">...</button>
                        </td>
                        <td>
                            <input type="text" class="form-control" data-bind="value: FirmMatterNo" readonly="readonly" />
                            <input type="text" class="form-control" data-bind="value: FirmMatterDescription" readonly="readonly" />
                            <input type="text" class="form-control" data-bind="value: FirmMatterLocation" readonly="readonly" />
                            <input type="text" class="form-control" data-bind="value: LocationDescription" readonly="readonly" />
                            <button type="button" class="btn btn-primary" data-bind="click: browseFirmMatter">...</button>
                        </td>
                        <td>
                            <input type="hidden" data-bind="value: ClientMatterID" />
                            <input type="text" class="form-control" data-bind="value: ClientMatterNo" readonly="readonly" />
                            <input type="text" class="form-control" data-bind="value: ClientMatterDescription" readonly="readonly" />
                            <button type="button" class="btn btn-primary" data-bind="click: browseClientMatter">...</button>
                        </td>
                        <td>
                            <input type="text" class="form-control" data-bind="value: InvoiceNo" />
                        </td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <a href="#" data-bind="click: addInvoice">Add Row..</a>
        <br />
        <br />

        <div class="form-group">
            <div class="col-md-12">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </div>
    </div>
</form>

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

<!-- Client Modal -->
@{ Html.RenderPartial("~/Views/Client/_Modal.cshtml"); }

<!-- SubsidiaryClient Modal -->
@{ Html.RenderPartial("~/Views/SubsidiaryClient/_Modal.cshtml"); }

<!-- LookupFirmMatter Modal -->
@{ Html.RenderPartial("~/Views/LookupFirmMatter/_Modal.cshtml"); }

<!-- ClientMatter Modal -->
@{ Html.RenderPartial("~/Views/ClientMatter/_Modal.cshtml"); }

@section Scripts {
    @Scripts.Render("~/bundles/knockout")
    <script>
        function Invoice() {
            var self = this;

            self.SubsidiaryClientID = ko.observable();
            self.SubsidiaryClientNo = ko.observable();
            self.SubsidiaryClientName = ko.observable();
            self.FirmMatterNo = ko.observable();
            self.FirmMatterDescription = ko.observable();
            self.FirmMatterLocation = ko.observable();
            self.LocationDescription = ko.observable();
            self.ClientMatterID = ko.observable();
            self.ClientMatterNo = ko.observable();
            self.ClientMatterDescription = ko.observable();
            self.InvoiceNo = ko.observable();

            self.browseSubsidiaryClient = function () {
                if ($("#ClientID").val() == "0") {
                    alert("Please select client");
                    $("#btnLookupClient").focus();
                    return false;
                }
                $.ajax({
                    type: "GET",
                    url: '@Url.Content("~/SubsidiaryClient/Lookup?officeID=")' + $("#OfficeID").val() + '&clientID=' + $("#ClientID").val(),
                    cache: false
                }).done(function (data) {
                    if (!data.message) {
                        $("#lookup-subsidiaryclient-container").html(data);
                        $("#subsidiaryClientModal").modal({ show: true, backdrop: true });
                    } else {
                        $("#subsidiaryClientModal").modal("hide");
                        alert(data.message);
                    }
                });
            };
            self.browseFirmMatter = function () {

            };
            self.browseClientMatter = function () {

            };
        }
        function InvoiceCreateViewModel() {
            var self = this;

            // Non-editable data
            self.Offices = ko.observableArray();

            // Editable data
            self.OfficeID = ko.observable();
            self.ClientID = ko.observable(0);
            self.Invoices = ko.observableArray([]);

            // Operations
            self.browseClient = function () {
                $.ajax({
                    type: "GET",
                    url: '@Url.Content("~/Client/LookupHasEBilling?c_officeID=")' + $("#OfficeID").val(),
                    cache: false
                }).done(function (data) {
                    if (!data.message) {
                        $("#lookup-client-container").html(data);
                        $("#clientModal").modal({ show: true, backdrop: true });
                    } else {
                        $("#clientModal").modal("hide");
                        alert(data.message);
                    }
                });
            }
            self.addInvoice = function () {
                self.Invoices.push(new Invoice());
            };
            self.removeInvoice = function (invoice) {
                self.Invoices.remove(invoice);
            }
        }

        $(document).ready(function () {
            var invoiceCreateViewModel = new InvoiceCreateViewModel();

            $.getJSON("@Url.Content("~/Office/GetOffices")", null, function (data) {
                invoiceCreateViewModel.Offices(data);
            });

            ko.applyBindings(invoiceCreateViewModel);

            $("#subsidiaryClientModal").on("click", "#btnSubmitSubsidiaryClient", function (e) {
                e.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "@Url.Content("~/SubsidiaryClient/Lookup")",
                    data: {
                        officeID: $("#OfficeID").val(),
                        clientID: $("#ClientID").val(),
                        filterField: $("#SubsidiaryClientFilterField").val(),
                        filterOperator: $("#SubsidiaryClientFilterOperator").val(),
                        filterValue: $("#SubsidiaryClientFilterValue").val()
                    },
                    cache: false
                }).done(function (data) {
                    $("#lookup-subsidiaryclient-container").html(data);
                });
            });
        });

        function setClient(clientID, name) {
            document.getElementById("ClientID").value = clientID;
            document.getElementById("ClientName").value = name;

            $("#clientModal").modal("hide");
        }

        function setSubsidiaryClient(subsidiaryClientID, subsidiaryClientNo, name) {
            document.getElementById("SubsidiaryClientID").value = subsidiaryClientID;
            document.getElementById("SubsidiaryClientNo").value = subsidiaryClientNo;
            document.getElementById("SubsidiaryClientName").value = name;
            $("#subsidiaryClientModal").modal("hide");
        }
    </script>
}

查看：_Modal.cshtml（SubsidiaryClient的Modal）

<div class="modal fade" id="subsidiaryClientModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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>
                <h4 class="modal-title" id="myModalLabel">Lookup Subsidiary Client</h4>
                @using (Html.BeginForm())
                {

                    <div class="form-inline">
                        <div class="form-group">
                            @Html.DropDownList("SubsidiaryClientFilterField",
                            new List<SelectListItem>
                            {
                                new SelectListItem { Text = "Subsidiary Client No", Value = "SubsidiaryClientNo" },
                                new SelectListItem { Text = "Name", Value = "Name" }
                            },
                            new { @class = "form-control" })
                        </div>
                        <div class="form-group">
                            @Html.DropDownList("SubsidiaryClientFilterOperator",
                            new List<SelectListItem>
                            {
                                new SelectListItem { Text = "Contains", Value = "Contains" },
                                new SelectListItem { Text = "Does Not Contain", Value = "Does Not Contain" },
                                new SelectListItem { Text = "=", Value = "=" },
                                new SelectListItem { Text = "<>", Value = "<>" },
                                new SelectListItem { Text = ">", Value = ">" },
                                new SelectListItem { Text = "<", Value = "<" },
                                new SelectListItem { Text = ">=", Value = ">=" },
                                new SelectListItem { Text = "<=", Value = "<=" }
                            },
                            new { @class = "form-control" })
                        </div>
                        <div class="form-group">
                            @Html.TextBox("SubsidiaryClientFilterValue", null, new { @class = "form-control", @placeholder = "Enter keyword" })
                        </div>
                        <input type="submit" id="btnSubmitSubsidiaryClient" value="Search" class="btn btn-primary" />
                    </div>
                }
            </div>
            <div class="modal-body" id="lookup-subsidiaryclient-container">
            </div>
        </div>
    </div>
</div>

控制器：

public ActionResult Lookup(short officeID, int clientID, string filterField, string filterOperator, string filterValue, int? page)
{
    var subsidiaryClients = db.SubsidiaryClients.Where(sc => sc.OfficeID == officeID && sc.ClientID == clientID);

    if (!string.IsNullOrEmpty(filterValue))
    {
        if ("Contains".Equals(filterOperator))
        {
            subsidiaryClients = subsidiaryClients.Where(filterField + ".Contains(@0)", filterValue);
        }
        else if ("Does Not Contain".Equals(filterOperator))
        {
            subsidiaryClients = subsidiaryClients.Where("!" + filterField + ".Contains(@0)", filterValue);
        }
        else
        {
            subsidiaryClients = subsidiaryClients.Where(filterField + " " + filterOperator + " @0", filterValue);
        }
    }

    subsidiaryClients = subsidiaryClients.OrderBy(sc => sc.Name);

    ViewBag.officeID = officeID;
    ViewBag.clientID = clientID;
    ViewBag.filterField = filterField;
    ViewBag.filterOperator = filterOperator;
    ViewBag.filterValue = filterValue;

    var pagedSubsidiaryClients = subsidiaryClients.ToPagedList(page ?? 1, Global.RowsPerPage);
    var subsidiaryClientsVM = Mapper.Map<IEnumerable<SubsidiaryClient>, IEnumerable<SubsidiaryClientViewModel>>(pagedSubsidiaryClients.ToArray());
    var pagedSubsidiaryClientsVM = new StaticPagedList<SubsidiaryClientViewModel>(subsidiaryClientsVM, pagedSubsidiaryClients.GetMetaData());

    return PartialView("_Lookup", pagedSubsidiaryClientsVM);
}

部分视图显示 SubsidiaryClient 的数据：

<table class="table table-striped table-hover table-condensed">
    <tr>
        <th></th>
        <th>Subsidiary Client No</th>
        <th>Name</th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td><a href="javascript:setSubsidiaryClient('@item.SubsidiaryClientID', '@item.SubsidiaryClientNo', '@item.Name.Replace("'", "\\'")')" class="glyphicon glyphicon-ok-sign"></a></td>
            <td>@Html.DisplayFor(modelItem => item.SubsidiaryClientNo)</td>
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
        </tr>
    }
</table>

Answer 1

抱歉，Willy，我曾在 asp .net 上工作过，所以我只提供了敲除和 html 中的示例代码。希望对你有帮助

HTML

// Parent Page Code
<!-- ko foreach: ClientList -->
<!-- ko if: isActive -->
<div class="col-xs-12">
    <div class="col-xs-4" data-bind="text: SubsidiaryClientID"></div>
    <div class="col-xs-4" data-bind="text: SubsidiaryClientNo"></div>
    <div class="col-xs-4" data-bind="text: SubsidiaryClientName"></div>
</div>
<!-- ko -->
<!-- /ko -->

// Modal Box List
<!-- ko foreach: ClientList -->
<div class="col-xs-12" data-bind="click: $parent.Add">
    <div class="col-xs-4" data-bind="text: SubsidiaryClientID"></div>
    <div class="col-xs-4" data-bind="text: SubsidiaryClientNo"></div>
    <div class="col-xs-4" data-bind="text: SubsidiaryClientName"></div>
</div>
<!-- /ko -->

淘汰赛

// Child view-model for Client List

SubsidiaryClientVM = function(){

    this.SubsidiaryClientID = ko.observable();
    this.SubsidiaryClientNo = ko.observable();
    this.SubsidiaryClientName = ko.observable();
    this.isActive = ko.observable(false);

}

// Parent view model
vm = function(){
    var self = this;
    this.ClientList = ko.observableArray();

    // fill the array on search etc...
    this.onSearch = function(){
        self.ClientList(jQuery.map(data.Clients, function (item) {
            return new SubsidiaryClientVM(item);
        }));
    }

    this.Add = function(item){
        ko.utils.arrayForEach(self.ClientList, function(list){
            if(list.SubsidiaryClientID == item.SubsidiaryClientID){
                list.isActive(!list.isActive());
            }
        });
    }
}

Answer 2

您可以在每一行定义自己的属性并将该 ro 分配给 js 函数。

像这样：

@foreach (var item in Model)
    {
        <tr>
            <td><a href="" data-SubClientID="@item.SubsidiaryClientID" data-SubClientNo="@item.SubsidiaryClientNo" class="glyphicon glyphicon-ok-sign clickablerow"></a></td>
            <td>@Html.DisplayFor(modelItem => item.SubsidiaryClientNo)</td>
            <td>@Html.DisplayFor(modelItem => item.Name)</td>
        </tr>
    }


$(document).on('.clickablerow','click',function()
{
    var clientid=$(this).attr('data-SubClientID');

    ....
})