Question

假设我有以下控制器：

public ActionResult Index()
        {
            var model = new ShippingCalculatorModel();
            model.carriers.AddRange(new[] { "Fedex", "Usps", "Ups" });
            return View(model);
        }  
   public double GetQuote(string carrierName)
        {               
            ICarrier carrier = null;
            var company = new Comapny();
            switch (carrierName)
            {
                case "Fedex":
                    carrier = new Fedex();
                    break;
                case "Usps":
                    carrier = new USPS();
                    break;
                case "Ups":
                    carrier = new UPS();
                    break;
                default:
                    carrier = new Null();
                    break;
            }
            company.SetCarrier(carrier);
            return company.GetQuote();
        }

运营商列表（Fedex，Usps，Ups）显示在列表框中，如下所示（索引视图）：

   @using (Html.BeginForm("GetQuote","ShippingCalculator", FormMethod.Get))
{ 
@Html.ListBox("carrierName", new SelectList(Model.carriers)) <!--I want to show quote after button click HERE -->
    <button type="submit">Get Quote</button>
}

如何在不进入其他视图的情况下在下拉列表旁边显示引用？我的意思是，在同一个索引页面上。我正在寻找有关如何做到这一点的最佳实践。

Answer 1

选项1：提前加载，即在Index方法中加载运营商和报价，并将viewModel返回到视图。如果您选择的话很好。

选项2：按需加载，即最初仅显示载体。在选择列表中的项目时，发送AJAX调用以获取引用并显示它。如果您有大量项目并且一次加载所有引号会减慢第一个响应，则此选项很有用。

选择取决于您的UI / UX设计。

要完成选项1，您只需准备一个viewModel对象，该对象将包含带有引用详细信息的运营商列表。这样的事情会起作用：

Dictionary<string, Quote>

要完成选项2，正如Peter在评论中所建议的那样，您将需要编写一个将在列表项单击事件上调用的JavaScript函数。在此方法中，您可以获取所选列表项并将其发送到AJAX请求中。

Answer 2

将您的方法更改为

public JsonResult GetQuote(string carrierName)
{
  ICarrier carrier = null;
  ....
  company.SetCarrier(carrier);
  return Json(company.GetQuote(), JsonRequestBehavior.AllowGet);
}

然后在视图中

@Html.ListBox("carrierName", new SelectList(Model.carriers))
<div id="quote"></div>
<button type="button" id="getquote">Get Quote</button> // note type="button"

<script>
  var url = '@Url.Action("GetQuote")';
  $('#getquote').click(function() {
    var carrier = $('#carrierName').val();
    $.getJSON(url, { carrierName: carrier }, function(result) {
      $('#quote').text(response);
    });
  });    
</script>

正确的方法返回值从控制器查看

2 个答案: