c# - C# MVC4：替换当使用 jQuery 从 Html.DropDownList 进行选择时

Question

<div>在从下拉列表中选择相应的字符串（延迟加载）后，我需要能够将数据填充到对象的某个部分或其他类型的部分中。

在下拉列表中进行更改时，我希望调用控制器中的方法，该方法将填充<div id=result></div>该方法的输出。

也许我处理这个问题是错误的。我怀疑问题出在我的 JavaScript 中。这是我的方法：

看法：

    <div>@Html.DropDownList("MyDDL") </div>
    <br>
    <div id="result"></div>

JavaScript：

<script type ="text/javascript">
    $(document).ready(function () {
        $("#MyDDL").change(function () {
            var strSelected = "";
            $("#MyDDL option:selected").each(function () {
                strSelected += $(this)[0].value;
            });
            var url = "HomeController/showInfo";

            //I suspect this is not completely correct:
            $.post(url, {str: strSelected},function (result) {
                $("result").html(result);
            }); 
        });
    });
</script>

控制器（也许我不应该使用PartialViewResult）：

public ActionResult Index()
    {
        List<string> myList = new List<string>();
        List<SelectListItem> MyDDL = new List<SelectListItem>();
        myList.Add("Tim");
        myList.Add("Joe");
        myList.Add("Jim");

        //fill MyDDL with items from myList
        MyDDL = myList
             .Select(x => new SelectListItem { Text = x, Value = x })
             .ToList();

        ViewData["MyDDL"] = MyDDL;

        return View();
    }

    [HttpPost]
    public PartialViewResult showInfo(string str)
    {
        Person p = new Person(str); //name is passed to constructor
        p.LoadInfo();     //database access in Person Model
        ViewBag.Info = p.Info;
        return PartialView("_result");
    }

_result.cshtml：

<p>
@ViewBag.Info
</p>

感谢您。

Answer 1

稍微改变你的脚本。结果 div 的 jQuery 选择器中缺少 #。使用下面给出的代码

$.post(url, {str: strSelected},function (result) {
                $("#result").html(result);
            }); 

Answer 2

因此，我进行了以下更改并且效果很好：

看法：

<div><%= Html.DropDownList("MyDDL") %> </div>
<br>
<span></span>

JavaScript：

<script type ="text/javascript">
$(document).ready(function () {
    $("#MyDDL").change(function () {
        var strSelected = $("#MyDDL option:selected").text();
        var url = "/Home/showInfo";
        $.post(url, {str: strSelected},function (result) {
            $("span").html(result);
        }); 
    });
});

_result.cshtml：

@ViewBag.Info

控制器保持不变。

Answer 3

在我看来，如果 javascript 在本地不需要 put $.post(url, {str: strSelected},function (result) {

您可以使用

        //I suspect this is not completely correct:
                       $("#result").html(result);

试试看

Answer 4

p.LoadInfo() 如果它有任何价值，您是否尝试过调试？我对你的脚本也有一些建议：

尝试添加keyup您的事件，以便在使用箭头键盘而不是单击的情况下获得值：

$("#MyDDL").on("change keyup", function () {
            // you can get the dropdown value with this
            var strSelected = $(this).val();