C# 从控制器返回值到视图的正确方法

假设我有以下控制器：

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();
        }

运营商列表（联邦快递、美国邮政、Ups）如下所示（索引视图）：

@使用（Html.BeginForm（“GetQuote”、“ShippingCalculator”、FormMethod.Get））
{ 
@Html.ListBox（“carrierName”，新选择列表（Model.carriers））
获得报价
}  

---

如何在不转到其他视图的情况下在下拉列表旁边显示Quote？我是说，在同一个索引页上。我正在寻找如何做到这一点的最佳实践。

选项1：早期加载，即在索引方法中加载承运商和报价，并将viewModel返回到视图。如果你没有什么选择，那就好了

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

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

要完成选项1，只需准备一个viewModel对象，该对象将包含带有报价详细信息的承运商列表。类似这样的方法会奏效：

Dictionary<string, Quote>

字典

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

将方法更改为

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>

@Html.ListBox（“carrierName”，新选择列表（Model.carriers））
获取报价//注释类型=“按钮”
var url='@url.Action（“GetQuote”）；
$（'#getquote'）。单击（函数（）{
var carrier=$（'#carrierName'）.val（）；
$.getJSON（url，{carrierName:carrier}，函数（结果）{
$（“#引号”）。文本（回复）；
});
});    

此操作不需要表单。为按钮单击编写JavaScript（jQuery）函数，该函数将通过ajax调用返回数据。

@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>