ASP.Net MVC Dropdownlist List selected item values not displayed in the same View

Question

我試圖在我的視圖中顯示一個下拉列表，並且我能夠在下拉列表中生成列表項，一旦選擇了一個項目，我就會嘗試收集所選項目的詳細信息並將其顯示在同一個視圖中。

在我的控制器中，我得到了所選項目的命中，我的 jquery 正確地將項目 ID 重定向到 ActionMethod 並填充模型並返回視圖，但數據沒有顯示在視圖中。

我的索引視圖：

@model PWBMS.WebUI_1.Viewmodels.CustomerViewModel 

<div class="row">
    <h3 class="col-md-3">
        <i class="glyphicon glyphicon-user"></i>
        <strong>
            &nbsp;&nbsp;&nbsp;Customer&nbsp;
            <span id="cidd"> @Html.DropDownListFor(model => model.CustomerId, new SelectList(ViewBag.Customers, "CustomerId", "ShortName"), "Select Customers", htmlAttributes: new { @class = "form-control rtscustomtextboxmiddle", @id = "custId" })</span>
        </strong>
    </h3> 
</div>

  @if(Model != null)
  { 
     @Model.ShortName
  }

我的 jQuery 對下拉列表中的選定項進行綁定：

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

            $("#cidd").change(function () {
                var y = $("#custId option:selected").val();
                $.ajax({
                    url: "@Url.Action("Index", "Customer3")",
                    method: "get",
                    async: "false",
                    data: { id: y }
                });
            });
        });
    </script> 
}

我的控制器：

public ActionResult Index(int? id)
    {
        if(id is null)
        {
            ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
            return View();
        }
        var vm1 = db.Customers.SingleOrDefault(x => x.CustomerId == id);
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        CustomerViewModel cvm = new CustomerViewModel
        {
            CustomerId = vm1.CustomerId,
            ShortName = vm1.ShortName
        };
        return View( cvm);
    }

擊中數據的屏幕截圖： 我的模型值的第二個屏幕截圖

我希望這不會因為重復而關閉，因為我為我的獨特情況尋找解決方案但我找不到。

我什至嘗試將結果集放在局部視圖中，它正在獲得正確的結果，但仍然沒有顯示它。

我知道我做錯了什么，但不確定我做錯了什么。 請幫我指出我的錯誤。 謝謝。

Answer 1

實際上，您正在發出一個您不在視圖上處理的 ajax 請求，有兩種方法可以解決它，一種只需在更改事件上發布表單或重定向到同一視圖

document.location.href = '/controllerName/actionName/' + y;

如果您真的想使用 ajax，請更新您的代碼，如下所示

<div class="result"></div>

$.ajax({
    url: "@Url.Action("Index", "Customer3")",
    method: "get",
    async: "false",
    data: { id: y }
})
.done(function(r) {
    $('.result').html(r.ShortName);
})

您還需要更新操作

    if(id.HasValue)
    {
        var vm1 = db.Customers.SingleOrDefault(x => x.CustomerId == id.Value);
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        CustomerViewModel cvm = new CustomerViewModel
        {
            CustomerId = vm1.CustomerId,
            ShortName = vm1.ShortName
        };      
        
        return Json(cvm, JsonRequestBehavior.AllowGet);
    }
    else
    {
        ViewBag.Customers = db.Customers.OrderByDescending(o => o.CustomerId).ToList();
        return View();      
    }

請注意，在使用 Ajax 請求時，與 ViewBag 相關的內容將不起作用，上面的代碼只是為了讓您了解，如果您還想更新這些值，只需相應地創建一個 ViewModel 並以 json 形式返回。