Question

我有一张表格。在表单中，我从用户捕获一些数据。当我单击一个按钮时，我需要处理该数据并在kendo网格中显示结果。我怎么做？

这是我的代码。我不知道如何将模型传递给控制器以捕获用户输入，同时使用kendu网格来显示它？

 @model RSMembers.Areas.Brokers.Models.RateCalculatorModel

@{
    Layout = null;
}

@using (Ajax.BeginForm("CalculateRate", new AjaxOptions { UpdateTargetId = "result" }))
{
    @Html.HiddenFor(_=>_.BrokerEmail)
    <div>
        <p>
            <a id="calculateRate" href="#"><br/>Indicative rate calculator</a>
        </p>
        <div id="rateCalculatorPlaceHolder" style="display: none">
            <br/>
            <div class="pull-left col-md-3 form-group">
                <label>Broker</label>
                @Html.DropDownListFor(_ => _.BrokerId, Model.Brokers)
            </div>
            <div class="pull-left col-md-3 form-group">
                <label>Credit Tier</label>
                @Html.DropDownListFor(_ => _.CreditTierId, Model.CreditTiers)
            </div>
            <div class="pull-left col-md-3 form-group">
                <label>Amount</label>
                @Html.TextBoxFor(_ => _.Amount, new {@class = "form-control col-md-3"})
            </div>
            <div class="form-group col-md-9">
                <input type="submit" class="btn btn-primary btn-square pull-right" value="Calculate" />
            </div>
        </div>
    </div>
}
<div id="result" style="clear: both"></div>

<script type="text/javascript">
    $(document).ready(function () {

        $(function () {
            $("#calculateRate").click(function (e) {
                e.preventDefault();
                $("#rateCalculatorPlaceHolder").slideToggle();
                $("#rateCalculatorResultDiv").hide();
            });
        });
        $(function () {
            $('form').submit(function () {
                $("#rateCalculatorResultDiv").show();
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            $('#result').html(result);
                        }
                    });
                }
                return false;
            });
        });
        $(function () {
            $('form').submit(function () {
                $("#rateCalculatorResultDiv").show();
                if ($(this).valid()) {
                    $.ajax({
                        url: this.action,
                        type: this.method,
                        data: $(this).serialize(),
                        success: function (result) {
                            $('#result').html(result);
                        }
                    });
                }
                return false;
            });
        });
    });
</script>

    using System.Collections.Generic;

namespace RSMembers.Areas.Brokers.Models
{
    public class RateCalculatorResultModel
    {
        public List<RateCalculatorResultModelItem> Items { get; set; }
    }

    public class RateCalculatorResultModelItem
    {
        public string Term { get; set; }
        public string MonthlyRepayment { get; set; }
        public string ComparisonRate { get; set; }
        public string BrokerFee { get; set; }
        public string CAF { get; set; }
        public string RAC { get; set; }
    }
}


    @using Kendo.Mvc.UI
@model RSMembers.Areas.Brokers.Models.RateCalculatorResultModel

<div id ="rateCalculatorResultDiv">
@(Html.Raw("&nbsp;"))
@(Html
        .Kendo()
        .Grid<RSMembers.Areas.Brokers.Models.RateCalculatorResultModelItem>()
        .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(c => c.Term).Width(100).Title("Term");
                    columns.Bound(c => c.ComparisonRate).Width(200).Title("Estimated Comparison Rate");
                    columns.Bound(c => c.MonthlyRepayment).Width(200).Title("Estimated Monthly Payment");
                    columns.Bound(c => c.BrokerFee).Width(200).Title("Broker Fee");
                    columns.Bound(c => c.CAF).Width(200).Title("Credit Assistance Fee");
                    columns.Bound(c => c.RAC).Width(200).Title("Risk Assurance Charge");
                })
                .Scrollable()
                .Groupable()
                .Sortable()
                .Resizable(resize => resize.Columns(true))

      )
</div>



    [HttpPost]
    public ActionResult CalculateRate(RateCalculatorModel model)
    {
        var brokerName = getBrokerList(model.BrokerEmail).Single(_ => _.Value == model.BrokerId.ToString()).Text;
        var broker = brokerService.GetBrokerByName(brokerName);
        var creditTier = mapCreditTier(int.Parse(getCreditTierList().Single(_ => _.Value == model.CreditTierId.ToString()).Value));
        var  fakeUser = new RSUser { Identity = new Identity() };
        var loanTerms = new [] {6, 9, 12, 24, 36, 48, 60};
        var viewModel = new RateCalculatorResultModel {Items = new List<RateCalculatorResultModelItem>()};
        var  userApplication = applicationRepository.CreateUserApplication();
        userApplication.BrokerId = broker.Id;

        foreach(var term in loanTerms) {
            var lRequest = new LoanRequest
            {
                Amount = model.Amount.ToPence(),
                Term = term
            };
            var appContainer = containerFactory.CreateFeeApplicationContainer(fakeUser, userApplication, lRequest);
            var borrowerOrder = generateBorrowerOrder(broker.Id.ToString(), int.Parse(model.Amount), lRequest.Term, creditTier);

            viewModel.Items.Add(new RateCalculatorResultModelItem
            {
                BrokerFee = (broker.GetSettingGroupValue(BorkerSettingGroup.SettingGroupNames.BrokerFee, appContainer, x => x.AsMoney()) ?? Currency.Zero).ToString("0.00"),
                Term = term.ToString(), 
                ComparisonRate = borrowerOrder.ProductRate.AsPaddedPercentage(1),
                CAF = (broker.GetSettingGroupValue(BorkerSettingGroup.SettingGroupNames.RSFee, appContainer) ?? Currency.Zero).ToString("0.00"),
                RAC = borrowerOrder.CreditRateFee.ToString("0.00"),
                MonthlyRepayment = borrowerOrder.MonthlyRepayment.FormatAsPoundsAndPence(),
            });
        }

         return PartialView();
    }

Answer 1

更改

 .Kendo()
    .Grid<RSMembers.Areas.Brokers.Models.RateCalculatorResultModelItem>()
    .Name("grid")

到

  @(Html.Kendo()
  .Grid(Model)
  .Name("grid")
    .DataSource
    (
     dataSource => dataSource.Ajax()
     .ServerOperation(false)
     )

如何在kendu网格中显示结果

1 个答案: