Изменить вид с помощью ajax на событие изменения выпадающего списка - PullRequest
Новая
       31

Изменить вид с помощью ajax на событие изменения выпадающего списка

0 голосов
/ 30 сентября 2019

Мне нужно изменить представление на той же странице, используя ajax, когда пользователь изменяет параметр раскрывающегося списка.

До сих пор, на мой взгляд, у меня есть раскрывающийся список 

    <div class="wrapper">
        <div>
            <label>Get cars per people </label>
            @Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { @id = "ddlChangeID" })
        </div>
        <div class="box box-success">
            <div class="box-body">
                <div>
                    <canvas id="myChart"></canvas>
                </div>
            </div>
        </div>
    </div>

Затем в сценарии (который я нашел из другого вопроса) 

$(document).ready(function () {
    $("#ddlChangeID").change(function () {
        var strSelected = "";
        $("#ddlChangeID:selected").each(function () {
            strSelected += $(this)[0].value;
        });
        var url = "/Cars/Index/" + strSelected;
        $.post(url, function (data) {
        });
    });
})

И в контроллере я использую значения ViewBag для сохранения значений раскрывающегося списка и всего, что нужно для графикакоторый загружается в другой скрипт снова со значениями ViewBag. Мне удалось передать выбранное значение (strSelected), но представление не перезагружается с новыми данными.

Как создать событие ajax?

Ответы [ 2 ]

1 голос
/ 01 октября 2019

Измените свой сценарий ajax call, вызвав результат действия следующим образом 

$("#ddlChangeID").change(function () {
  $.ajax({
    url: "/Controller/ActionHtml?id="+$('#ddlChange').val(),
  type: "POST",
  cache: false,
  success: function (result) {
     $("#myChart").html(result);
    },
    error: function () {
       $("#myChart").empty();
    }
 });
});

, и в контроллере результат действия будет похож на следующий, который возвращает частичное представление html, которое вам нужно добавить 

 public ActionResult ActionHtml(string id)
    {
       //Here you can load the data based on the id,pass model to the patial views etc
        ViewBag.id = id;
        return PartialView("~/Views/Shared/myhtml.cshtml");
    }

myhtml.cshtml будет частичным представлением с содержимым html, поскольку // содержимое является фиктивным, измените содержимое по своему желанию 

<!DOCTYPE html>
<html>
<body>
<p>Enter some text in the fields below, then press the "Reset form" button to reset the form.</p>
<form id="myForm">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br><br>
</form>

0 голосов
/ 01 октября 2019

Итак, я изменил 

     @Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { @id = "ddlChangeID" })

на 

     @Html.DropDownList("ddlChange", new SelectList(ViewBag.OptionsList,"Value","Text", ViewBag.selectedValue),new { @onchange = "ChangeOption()" })

, добавив также id к основному div. И скрипт на 

function ChangeOption() {
    var id = $('#ddlChange').val();
    $.ajax({
        url: '/Cars/Index',
        type: "GET",
        data: { Id: id },
        success: function (data) {
            $('#wrapAll').html(data);
        }
    });
}

Вроде работает. Единственная проблема сейчас в том, что CSS ломается. Он сдвигает график и раскрывающийся список вправо, нарушая функциональность.

...