html - 使用 ajax 和 Telerik Kento 打开带有搜索结果的模态

Question

我对使用 Telerik Kendo 有点陌生，这就是我需要做的：

我有一个带有搜索文本框的页面。当您单击搜索按钮时，会出现一个带有建议的剑道网格，当您选择任何建议时，页面底部会出现一个详细信息部分。

我需要的是，当您单击搜索按钮时，应该会打开一个带有 Kendo 网格建议的模态，当您选择任何建议时，模态就会关闭，然后在搜索部分之后显示详细信息表单。

这是此时的代码：

搜索面板：

<div style="margin:5px; padding:10px">
    @using (Ajax.BeginForm("SearchCustomer",
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "searchResults",
            HttpMethod = "POST",
            OnSuccess = "SearchSuccess",
            LoadingElementId = "loadingImage",
            OnFailure = "SearchFail",
        }))
    {
        @Html.AntiForgeryToken()

        <div class="input-group" style="justify-content:right">
            <span class="input-group-btn">
                Buscar Cliente:
                <input id="searchText" placeholder="Identificación o nombre" name="searchText" type="text" class="form-control" style="height:22px;" />
                <input id="distributorId" name="distributorId" type="hidden" class="form-control" value="@Model" />
                
                <button id="btnSearch" type="submit" class="btn btn-default btn-sm" style="margin:0px; padding:0px" @*data-toggle="modal" data-target="#loginModal"*@>
                    <i class="icon-search" style="margin:2px"></i> Buscar
                </button>
            </span>
        </div>
        <br />
    }

    <div id="searchResults" style="margin:2px; padding:3px">
    </div>

</div>

选定客户：

    <script type="text/javascript">

    function onChange(arg) {
        var selectedRows = this.select();
        var dataItem = this.dataItem(selectedRows[0]);

        var url = "@Url.Action("CustomerLookup")" + "?customerId=" + dataItem.CustomerId + "&distributorId=" [e-mail]('_')[1];
        $("#loadingImage").show();

        $('#currentSelectedCustomer').load(url, function (result) {
            $("#loadingImage").hide();
            if (result != "Error") {
                $("#customerPreview").show();
            }
        });
    }
</script>

@(Html.Kendo().Grid<CrediNet.Web.Models.CustomerModel>()
    .Name("CustomersResultGrid")
    .Columns(columns =>
    {
        columns.Bound(p => p.FirstName);
        columns.Bound(p => p.LastName);
        columns.Bound(p => p.LastName2);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
    .Events(events => events.Change("onChange"))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(p => p.CustomerId))
        .Read(r => r.Action("SearchCustomer_Read", "POS", new { searchText = Model.Split('_')[0] }))
    )
)

<div id="customerPreview" style="display:none;">
    <br />
    <div class="widget-box">
        <div class="widget-header widget-header-small">
            <h5 class="lighter">Cliente</h5>
        </div>

        <div class="widget-body">
            <div class="widget-main">
                <div id="currentSelectedCustomer">

                </div>
            </div>
        </div>
    </div>
</div>

然后是当前 celected 客户页面：

@model CrediNet.Web.Models.CustomerModel

<script type="text/javascript">
    function EditCustomer() {
        $("#loadingImage").show();

        var url = "@Url.Action("EditCustomer", new { id = Model.CustomerId })";

        $.ajax({
            url: url,
            success: function (result) {
                $("#selectClientPanel").html(result);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status === 0) {
                    notificationHelper.Show("Servidor no responde", 2, false);
                } else {
                    notificationHelper.Show(xhr.responseText, 2, false);
                }
            },
            complete: function (jqXHR, status) {
                $("#loadingImage").hide();
            }
        });
    }
</script>

<!-- Se inhabilitará hasta encontrar la forma de que no se repitan los Clientes y se pueda editar el mismo-->
<button id="btnEditCustomer" onclick="EditCustomer();" class="btn btn-purple btn-sm">
    <i class="icon-pencil"></i> Editar cliente
</button>
<br />
<br />

<div class="form-horizontal">

    @if (Model.Flag)
    {
        <div class="form-group">
            <div class="col-xs-2">
            </div>
            <div class="col-xs-8">
                <strong>
                    <span style="color: red;">
                        Este cliente ha sido Inactivado. <br />
                        Razón: @Model.FlagComments
                    </span>
                </strong>
            </div>
        </div>
    }

    <!-- info básica -->
    <div class="form-group">
        @Html.LabelFor(m => m.FirstName, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>
                @Html.DisplayFor(m => m.FirstName) @Html.DisplayFor(m => m.LastName) @Html.DisplayFor(m => m.LastName2)
            </strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.DrivingLicenceCode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.DrivingLicenceCode)</strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.IFECode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.IFECode)</strong>
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(m => m.PassportCode, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Html.DisplayFor(m => m.PassportCode)</strong>
        </div>
    </div>
    
    <!-- dirección -->
    <div class="form-group">
        @Html.LabelFor(m => m.SimpleAddressModel, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            <strong>@Model.SimpleAddressModel.StreetName #@Model.SimpleAddressModel.ExtNumber @Model.SimpleAddressModel.IntNumber [e-mail] @Model.SimpleAddressModel.CityName</strong>
        </div>
    </div>
    
    <!-- Teléfonos -->
    <div class="form-group">
        @Html.LabelFor(m => m.PhoneNumbers, new { @class = "control-label col-xs-2" })
        <div class="col-xs-8">
            @foreach (var phone in Model.PhoneNumbers)
            {
                <div><strong>@phone.Phone</strong></div>
            }
        </div>
    </div>

</div>


<script>
    @if(Model.Flag)
    {
        <text>
            $("#CustomerId").val(0);
            $('#btnSubmitSale').prop('disabled', true);
            bootbox.alert("Este cliente ha sido desactivado. <br />Razón: @Model.FlagComments");
        </text>
    }
    else
    {
        <text>
            $("#CustomerId").val(@Model.CustomerId);
            $('#btnSubmitSale').prop('disabled', false);
        </text>
    }
    
    //$("#showPoints").val(@Model.IsDistributor.ToString().ToLower());

    if (@Model.IsDistributor.ToString().ToLower() == true) {
      $(".points").removeAttr("hidden");
    }

    if (@Model.IsDistributor.ToString().ToLower() == true) {
        $("#isDistributor").prop("checked", true);
        $("#pointCheck").css("display", "inline");
    } else {
        $("#isDistributor").prop("checked", false);
        $("#pointCheck").css("display", "none");
    }
    
    $( "#isDistributor" ).trigger( "change" );

</script>

有任何想法吗？

标签： htmlasp.net-mvckendo-uikendo-gridasp.net-ajax