從下拉列表中選擇一個值后，MVC重新加載頁面

Question

我有一個可行的解決方案，但是從下拉列表中選擇了某個ID后，我不知道如何重新加載頁面。 我的列表是從數據庫中填充的。 選擇它后，我可以看到它的ID和相應的數據。 但是，屏幕上沒有任何變化。

控制器類：

public ActionResult Index()
        {
            var model = test.getStuff();
            ViewBag.IDs = new SelectList(test.getID(), "", "ID");
            return View(model);
        }

[HttpPost]
        public ActionResult getDataBySelectedID(string selectedId)
        {
            var que = test.getHello(selectedId);
            return View(que);

        }

查看類別：

@Html.DropDownList("ID", ViewBag.IDs as SelectList) 

 $(document).ready(function () {
     $("#ID").on("change", function () {
            var selectedId = this.value;
            var url = "/Sample/getDataBySelectedID";

            $.ajax({
                method: "POST",
                dataType: "json",
                url: url,
                data: {
                    selectedId: selectedId
                }
            });
        });
     });

我如何能夠使用所選值及其對應的數據重新加載頁面？

任何幫助，將不勝感激！

謝謝。

Answer 1

在getDataBySelectedID中，返回類似於Index的視圖，該Index是應用了過濾器的構造模型並返回View（model）

Answer 2

無需在您的情況下使用ajax

只是做一個

window.location.href =  "/Sample/getDataBySelectedID?selectedId=" +selectedId;

在您的onchange函數中，並在您的視圖中將其返回

[HttpGet]
        public ActionResult getDataBySelectedID(string selectedId)
        {
            var que = test.getHello(selectedId);
            return View("~/Index.cshtml",que);

        }

希望“ que”與您在Index函數上使用的模型相同

Answer 3

由於要在更改下拉列表選擇后重新加載頁面，因此應處理change事件以使用如下查詢字符串進行重定向：

$("#ID").on("change", function () {
   var selectedId = $(this).val();

   window.location.href = '@Url.Action("getDataBySelectedID", "Sample")' + '?selectedId=' + selectedId;
});

請注意， window.location.href 使用HTTP GET方法 ，因此目標操作必須使用[HttpGet]而不是[HttpPost] ：

[HttpGet]
public ActionResult getDataBySelectedID(string selectedId)
{
    var que = test.getHello(selectedId);
    // don't forget to repopulate ViewBag from SelectList here

    return View("Index", que); // return same page with different model contents
}

確保getHello()方法的返回類型與getStuff()方法相同，以避免傳遞與模型項相關的異常。

但是，如果要提交表單並在以后再次顯示，請改用$('form').submit() ：

jQuery的

$("#ID").on("change", function () {
   $('form').submit();
});

調節器

[HttpPost]
public ActionResult getDataBySelectedID(ViewModel model)
{
    // do something

    return View(model);
}