【问题标题】:how to bind the @html.dropdownlist name with id in mvc using JavaScript formate如何使用 JavaScript 格式将 @html.dropdownlist 名称与 mvc 中的 id 绑定
【发布时间】:2014-05-12 22:53:08
【问题描述】:

我需要使用带有 name 和 id 的 JavaScript 格式在 mvc 中绑定 @html.dropdownlist 。我尝试但没有在 JavaScript 端绑定它没有在客户端传递值。我的列表值格式图像如下所示。如何传递 name 和 id 而不是序列号的值。

【问题讨论】:

  • 收到的json长什么样子?
  • 那我如何实现呢?
  • 你能展示一下User类的样子吗
  • 公共类用户:实体{
  • 请编辑原始问题并在 cmets 中添加模型类

标签: javascript asp.net-mvc-3 jquery html.dropdownlistfor


【解决方案1】:

在您的 ajax 请求中将类型更改为 GET,例如

 $.ajax({
 type: 'GET',
 ...

试试看

$.each(data, function (index, val) {
    $('<option/>',{value:val.Id,text:val.Text}).appendTo("#MyDdl");
 });

【讨论】:

    【解决方案2】:

    您正在向客户端发送一个 SelectList。此类实现 IEnumerable&lt;SelectListItem&gt; 并且 SelectListItem 有 2 个属性:ValueText,您应该将下拉列表绑定到:

    $.ajax({
        type: 'POST',
        url: url,
        data: { id : id },
        success: function (data) {
            $('#MyDdl').empty();
            $.each(data, function () {
                $('#MyDdl').append(
                    $('<option/>', {
                        value: this.Value,
                        html: this.Text
                    })
                );
            });
        }
    });
    

    在您的示例中,您使用的是 val.Id,但没有这样的属性。

    但事实上,您不需要任何 SelectList。只需返回学生集合:

    [HttpPost]
    public ActionResult Some(string id) 
    {
        var students = service.GetAllStudents().ToList();
        students.Insert(0, new StudentModel{ Id = 0, Name = "Select student" });
        return Json(students);
    }
    

    现在您可以将下拉列表绑定到此集合的 IdName 属性:

    $.each(data, function () {
        $('#MyDdl').append(
            $('<option/>', {
                value: this.Id,
                html: this.Name
            })
        );
    });
    

    【讨论】:

    • hai darin,我期待你。我的问题是我的 json 没有重新运行到客户端。它不会在我的客户端触发
    • 你的意思是success 回调没有被触发?你的控制器动作被调用了吗?您的 javascript 控制台中是否有一些错误?你能看到在 FireBug 中发送的 AJAX 请求吗?你在哪里调用这个$.ajax 方法?它在点击或提交处理程序中吗?如果是这样,您是否通过从此处理程序返回 false 来取消默认操作以防止浏览器重定向? StudentModel 实体 JSON 是否可序列化(即它的对象图中不包含任何循环引用)?许多问题将帮助您找到问题。
    猜你喜欢
    • 2019-09-13
    • 1970-01-01
    • 1970-01-01
    • 2011-07-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-13
    • 2015-03-31
    相关资源
    最近更新 更多