Question

我将模型IEnumerable传递给视图。将模型附加到下拉列表

 @Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))
 <p id="result"></p>

我有改变的javascript我正在选择值

<script>
$(function () {
    $("#ddlOffers").change(function () {
        alert(this.value);
    });
});
</script>

正在检索正确的值Id。在从列表中选择时，我想根据选择从模型（例如Title，CreatedBy ...等）中获取记录详细信息。

如何使用javascript中选择的值ID从模型中选择正确的数据？然后我应该将数据附加到p标签？我是在正确的轨道上吗？或者是否有更简单的解决方案？

感谢阅读。

Answer 1

假设您的模型是

public class Model {
 public int Id,
 public string Title,
 public int CreatedBy
 /*Other Properties*/
}

当你通过这个陈述时

@Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))

你在html方面得到的所有内容都可以检查HTML文件的来源

<select>
<option value="1">Title 1</option>
<option value="2">Title 2</option>
<option value="3">Title 3</option>
<option value="4">Title 4</option>
<option value="5">Title 5</option>
</select>

所以你看到获取其他属性的问题是它们在HTML页面中不存在，因此无法通过javascript直接检索。

您可以做的是通过手动创建html属性中的html属性中所需的所有数据。

@foreach（模型中的var m） { @ m.Title }

现在，当您处理更改时，即使数据将在HTML中可用，因此您也可以访问它。有这样的东西

<script>
$(function () {
    $("#ddlOffers").change(function () {
        var createdBy = $(this).data('createdBy');
        alert(createdBy);
    });
});
</script>

或者您可以做的是，如果您想稍后将其转换为大型应用程序，此方法只会对您有所帮助。

在javascript中选择值后，您将ajax请求发送到服务器上的另一个操作，并返回您需要的所有字段。

更新： -
3.您还可以在视图中将模型序列化为JSON，然后在需要时使用js访问信息。为此，我通常使用Newtonsoft Json（install-package newtonsoft.json），然后在视图中执行类似这样的操作

<script>
var model = @JsonConvert.SerializeObject(Model);
</script>

Answer 2

@Html.DropDownList做的是生成这样的html：

<select id="ddlOffers" name="ddlOffers">
    <option value="somevalue">sometext</option>
    ... for all your options
</select>

如果您只需要选择的值，则jquery中有一个快捷方式：

<script>
$(function () {
    $("#ddlOffers").change(function () {
        alert($(this).val());
    });
});
</script>

或者如果您需要除值之外的任何内容，您可以通过

获取所选的<option>

<script>
$(function () {
  $("#ddlOffers").change(function () {
     console.log($(this).find("option:selected"));
     console.log($("#ddlOffers option:selected"));  //both of them do the same thing
  });
});
</script>

Answer 3

我以前接触过的方法是使用这样的表格：

            @using (Ajax.BeginForm("ActionName", "ControllerName",new AjaxOptions{HttpMethod = "POST"}))
            {
                @Html.DropDownList("ddlOffers", new SelectList(Model,"Id","Title"))

                <button type="submit">Submit</button>
            }

让表单提交给控制器并将下拉值设置为您的ID字段，然后当它回发到控制器时，根据ID获取完整对象

MVC从javascript中选择模型的数据

3 个答案: