在下拉列表更改事件中使用 ajax 更改视图

Question

I need to change the view in same page using ajax when the user changes the option of the drop-down list.当用户更改下拉列表的选项时，我需要使用 ajax 更改同一页面中的视图。

Up until now in my view I have the drop down list到目前为止，在我看来，我有下拉列表

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

Then in a script (which I found from another question)然后在一个脚本中（我从另一个问题中找到）

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

And in the controller I am using ViewBag values to save the drop-down list values and whatever else is needed for the graph which loads in a different script again with ViewBag values.在 controller 中，我使用 ViewBag 值来保存下拉列表值，以及使用 ViewBag 值再次加载到不同脚本中的图形所需的任何其他内容。 I have managed to pass the selected value (strSelected) but the view does not reload with the new data.我设法传递了选定的值（strSelected），但视图没有重新加载新数据。

How should I make the ajax event?我应该如何进行 ajax 事件？

Answer 1

Change your script ajax call by calling an action result as follows通过调用如下操作结果来更改脚本 ajax 调用

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

and in the controller the actionresult will be like the following which returns the html partial view that you need to append在 controller 中，actionresult 将如下所示，返回 html 部分视图，您需要 append

 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 will be a partial view with the html content as //content is dummy,change the content as you want myhtml.cshtml将是带有 html 内容的部分视图 //content is dummy, 根据需要更改内容

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

Answer 2

So I changed the所以我改变了

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

To至

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

adding also an id to the main div.还向主 div 添加一个 id。 And the script to和脚本

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

It seems to work.它似乎工作。 Only issue now is that the css breaks.现在唯一的问题是 css 坏了。 It pushes the graph and drop-down list to the right breaking the functionality.它将图形和下拉列表推到右侧，破坏了功能。

在下拉列表更改事件中使用 ajax 更改视图

问题描述

2 个解决方案

解决方案1
1 2019-10-01 13:58:44

解决方案2
0 2019-09-30 21:07:38

在下拉列表更改事件中使用 ajax 更改视图

问题描述

2 个解决方案

解决方案1 1 2019-10-01 13:58:44

解决方案2 0 2019-09-30 21:07:38

解决方案1
1 2019-10-01 13:58:44

解决方案2
0 2019-09-30 21:07:38