Перезагрузить страницу на основе выбора из выпадающего списка MVC - PullRequest
0 голосов
/ 06 ноября 2018

У меня есть рабочее решение, но я не знаю, как перезагрузить страницу после выбора определенного идентификатора из выпадающего списка. Мой список заполняется из БД. Когда я выбираю его, я вижу идентификатор и соответствующие данные для него. Тем не менее, нет никаких изменений на экране.

Класс модели:

 public List<Hello> getID()
        {
            var que = (from rel in db.Table1
                       select new Hello
                       {
                           ID = rel.R_ID
                       }).ToList();
            return que;
        }

public List<Hello> getStuff()
        {
            var que = (from wre in db.View
                       select new Hello
                       {
                           ID = wre.R_ID,
                           Summary = wre.Summary,
                           Description = wre.Description

                       }
         }

getHello () - это тот же точный метод, что и getStuff (), просто принимает параметр идентификатора строки.

Класс контроллера:

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

[HttpPost]
        public JsonResult getDataBySelectedID(string selectedId)
        {
            var que = test.getHello(selectedId);
             return Json(que, JsonRequestBehavior.AllowGet);

        }

Partial_View Класс:

 <div class="container">
        <table id="myTable" align="left">
            <tr>
                <th>@Html.DisplayNameFor(model => model.R_ID)</th>
                <th>@Html.DisplayNameFor(model => model.Summary)</th>
                <th>@Html.DisplayNameFor(model => model.Description)</th>
            </tr>

     @foreach (var item in Model)
        {
          <tr id="Home">

              <td>@Html.DisplayFor(x => item.R_ID)</td>
              <td>@Html.DisplayFor(x => item.Summary)</td>
              <td>@Html.DisplayFor(x => item.Description)</td>
           </tr>
         }
  </table>
 </div>

Просмотр класса:

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

    <script>

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

@foreach (var item in Model)
            {
                <tr>
                    <td>
                        @{Html.RenderPartial("Partial_Index", item);}
                    </td>
                </tr>
            }

Как я могу перезагрузить страницу с выбранным значением и соответствующими ему данными?

Любая помощь будет оценена!

Спасибо.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Как описано в комментариях, вам нужно как-то загрузить свои данные на свою страницу. Я рекомендую вам сделать это через частичное представление.

1) Создание многоразового частичного вида

Сначала создайте частичное представление, которое ссылается на вашу модель. Для этого создайте представление, как обычно для вашего контроллера, и отметьте опцию «Частичное представление». Обязательно выберите свою модель в раскрывающемся списке моделей.

Затем переместите .cshtml, который ссылается на вашу модель, из вашего текущего представления в ваше частичное представление. Например, если у вас есть таблица, в которой перечислены поля вашей модели, вы бы вырезали всю таблицу в свое частичное представление. Вы хотите включить минимальный объем кода, необходимый для частичного представления (иначе не копируйте весь свой вид в него).

2) Ссылка на частичное представление в текущем представлении

Теперь, когда у вас настроено частичное представление, вы должны использовать его в существующем представлении для загрузки таблицы. Прежде чем продолжить, убедитесь, что это работает. Вы можете использовать вспомогательный метод @Html.RenderPartial(string ViewName, object Model) для его рендеринга. Подробнее. Таким образом, вы можете разместить эту строку там, где ваш теперь вырезанный код был: @RenderPartial("MyPartialView", model), где «MyPartialView» - это имя вашего частичного представления, а модель - это нужный вам объект модели. перейти в частичный вид.

3) Добавление методов для визуализации частичного представления на контроллере

На данный момент вам просто нужно иметь возможность обновить частичное представление после использования AJAX. Во-первых, вам нужно добавить возможность визуализировать частичное представление в виде строки, чтобы вы могли легко внедрить его в свое представление. Я рекомендую вам сделать это, реализовав интерфейс контроллера и позволяя вашему контроллеру наследовать необходимые методы от этого. В моих программах у меня есть следующий интерфейс контроллера, от которого наследуются мои контроллеры:

public class IBaseController : Controller
    {    
        internal string PartialViewToString(string partialViewName, object model = null)
        {
            ControllerContext controllerContext = new ControllerContext(Request.RequestContext, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindPartialView(controllerContext, partialViewName) ?? throw new FileNotFoundException("Partial view cannot be found."),
                model
            );
        }

        protected string ViewToString(string viewName, object model = null)
        {
            ControllerContext controllerContext = new ControllerContext(Request.RequestContext, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindView(controllerContext, viewName, null) ?? throw new FileNotFoundException("View cannot be found."),
                model
            );
        }

        protected string ViewToString(string viewName, string controllerName, string areaName, object model = null)
        {
            RouteData routeData = new RouteData();
            routeData.Values.Add("controller", controllerName);

            if (areaName != null)
            {
                routeData.Values.Add("Area", areaName);
                routeData.DataTokens["area"] = areaName;
            }

            ControllerContext controllerContext = new ControllerContext(HttpContext, routeData, this);

            return ViewToString(
                controllerContext,
                ViewEngines.Engines.FindView(controllerContext, viewName, null) ?? throw new FileNotFoundException("View cannot be found."),
                model
            );
        }
        private string ViewToString(ControllerContext controllerContext, ViewEngineResult viewEngineResult, object model)
        {
            using (StringWriter writer = new StringWriter())
            {
                ViewContext viewContext = new ViewContext(
                    ControllerContext,
                    viewEngineResult.View,
                    new ViewDataDictionary(model),
                    new TempDataDictionary(),
                    writer
                );

                viewEngineResult.View.Render(viewContext, writer);

                return writer.ToString();
            }
        }
    }

Затем на вашем контроллере вы можете наследовать от этого интерфейса следующим образом:

public class ExampleController : IBaseController
{

}

Теперь вы можете использовать новые методы, чтобы легко преобразовать частичное представление в строку.

В вашем действии getDataBySelectedID это то, что вы хотите сделать.

[HttpPost]
public JsonResult getDataBySelectedID(string selectedId)
{
    var que = test.getHello(selectedId);
    string partialViewString = PartialViewToString("MyPartialView", que);
    return Json(partialViewString, JsonRequestBehavior.AllowGet);
}

Возможно, вам придется изменить приведенное выше утверждение в соответствии с вашими потребностями, но оно должно приблизить вас.

4) Внедрение частичного просмотра страницы в AJAX Success

Теперь мы настроили частичное представление для обработки данных модели, которые мы хотим обновить. Мы обновили наш вид для загрузки из частичного вида по умолчанию. Мы реализовали интерфейс контроллера, который позволит использовать визуализацию этого частичного представления в строку, чтобы мы могли внедрить его в нашу страницу. Теперь нам просто нужно сделать эту инъекцию.

Сначала оберните предыдущий оператор setup @Html.RenderPartial() в div. Давайте дадим ему идентификатор partialViewDiv. Это позволит нам легко нацелиться на него с помощью jQuery.

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

            var $partialViewDiv = $('#partialViewDiv');

            $.ajax({
                method: "POST",
                dataType: "json",
                url: url,
                data: {
                    selectedId: selectedId
                }
            })
                .done(function (response, status, jqxhr) {
                   $partialViewDiv.html(response);
                   // Do any other updates here.
                })
                .fail(function (reponse, status, error) {
                    $partialViewDiv.html('');
                    // Handle your error here.
                });
        });
     });

Опять же, это в основном псевдокод, поэтому вам, возможно, придется внести некоторые изменения. Но в этот момент вы должны быть примерно там, где вам нужно. Вызов AJAX должен обновить ваше представление путем перезагрузки частичного представления с вашими новыми данными модели.

Советы

  • Загрузка такого частичного представления может привести к поломке некоторых обработчиков событий jQuery, в зависимости от вашего приложения. Если это произойдет, посмотрите на это.
  • Вы можете вернуть любую строку из контроллера с помощью вызова AJAX. При необходимости вы можете вернуть частичные представления, отличные от того, что вы изначально загрузили. Просто используйте методы из интерфейса, и вы можете визуализировать все, что вам нужно.

Приведенный выше код является лишь некоторыми общими рекомендациями. Не зная вашей полной реализации, я не могу предоставить 100% работающий, без ошибок код. Но, если у вас есть какие-либо проблемы, пишите здесь, и я постараюсь помочь.

0 голосов
/ 06 ноября 2018

Решение, которое я вижу, с php

location.reload();

Так вы перезагрузитесь, но если вы хотите перезагрузить данные, вы можете использовать что-то вроде

window.location.replace("PathToThePage.php?YourDataName=YourData");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...