如何在asp.net MVC剃刀中的webgrid中级联下拉 [英] how to cascade drop down within a webgrid in asp.net MVC razor

问题描述

我在webgrid中遇到层叠下拉列表的问题。

这是场景。

i有两个下拉列表，一个用于表名，一个用于列名。我的级联必须以这样一种方式工作，即选择后表后，与该表相关的列应仅反映在下一个下拉列表中。然后我根据一些primaryKey选择一个tableName，外键关系应该从一个方法中选择一个列，该方法在一个方法中创建一个实体数据模型的对象，该方法返回一个包含列名的Json对象

我打算在我的视图中使用JQuery，但由于我是编码的新手，我被卡住了:( ...有人可以建议我的代码出了什么问题。



我的观点如下：

< div id =   grid> 
 @ wg.GetHtml（
 tableStyle：  gridTable，
 headerStyle：  gridHead，
 rowStyle：  gridRow，
 footerStyle：  gridFooter，
 alternatingRowStyle：  gridAltRow ，
列：wg.Columns（
 wg.Column（  DestnColumn ， 目标列），
 wg.Column（标题：  SourceTable，格式：@item => Html.DropDownList（  value，（IEnumerable< SelectListItem>）Model.SourceColumnModel [ 0 ]。SourceTables）），
 wg.Column（header：  ColumnNames，格式：@item => Html.DropDownList（  value， new  SelectList（string.Empty，  input_field_id ，  input_field_name）， 选择列）），
  //   wg.Column（标题：SourceColumn，格式：@ item1 => Html.DropDownList（value1，（IEnumerable< SelectListItem>）Model.S sourceColumnModel [0] .SourceColumnsNames））， 
 wg.Column（  DataSize， 大小），
 wg.Column（  DataType， 数据类型））
 
）
）
 < /   div  >  
 
< script type =    text / javascript> 
 $（ document ）。ready（ function （）{
 
 $（ ＃SourceTable）。change（ function （）{
 $（ ＃ColumnNames）。empty（） ; 
 $ .ajax（{
 type：'  POST'，
 url：'  @ Url.Action（GetColumn）'，
 dataType： '  json'，
 data：{id：$（ ＃SourceTable）。val（）}，
成功： function （SourceColumn）{
 $ .each（SourceColumn， function （i，Colmn）{
 $（  #ColumnNames）。append（' < option value =' + SourceColumn。值+ ' >' + 
 SourceColumn.Text + ' < / option>'）; 
}）; 
}，
错误： function （ex）{
 alert（' 无法检索列。' + ex）; 
} 
}）; 
  return   false ; 
}）
}）; 
 
< / script> 

我的控制器如下：

  public  JsonResult GetColumn（ string  TableName）
 {
 List< string> ColName =  new  List< string>（）; 
  int  id =（ from  m  in  db.inputs 其中 m.input_name == TableName 选择 m）.Max（p = < span class =code-keyword>>  p.input_id）; 
 input_field Ifield =  new  input_field（）; 
  var  str =（ from  m  in  db.input_field 其中 m.input_id == id 选择  new  {m.input_field_name，m.input_field_id}）。ToList（）; 
 
 
  return  Json（ new  SelectList（str，  input_field_id，  INPUT_FIELD_NAME））; 
} 

我试图在第二个下拉列表中填充值。

请帮助我的人



谢谢和问候

Archana Rajan

解决方案

（ document ）。ready（ function （）{

（ ＃SourceTable）。change（ function （）{

（ ＃ColumnNames ）空（）;

Hi,

I am facing issue with cascading dropdown list inside a webgrid.
Here is the scenario.
i have two drop down lists, one for table name and one for column names. My cascading has to work in such a way that the after table is selected the columns related to that table should only reflect in the next drop down. Also then i choose a tableName based on some primaryKey , Foreign Key relation the columns should be selected from a method which creates an object of entity data model in a method which inturn returns a Json Object containing the column names
I intend to do it with a JQuery in my view but as i'm new to coding i'm stuck :( ... can someone please advice on what is going wrong with my code.

My View is as Follow"

<div id="grid">
        @wg.GetHtml(
        tableStyle: "gridTable",
        headerStyle: "gridHead",
                rowStyle: "gridRow",
        footerStyle: "gridFooter",
                alternatingRowStyle: "gridAltRow",
        columns: wg.Columns(
                             wg.Column("DestnColumn", "Destination Column"),
                                     wg.Column(header: "SourceTable", format: @item => Html.DropDownList("value", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceTables)),
                                     wg.Column(header: "ColumnNames",format: @item => Html.DropDownList("value",new SelectList(string.Empty,"input_field_id","input_field_name"),"Select Column")),
                                   // wg.Column(header: "SourceColumn", format: @item1 => Html.DropDownList("value1", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceColumnsNames)),
                                             wg.Column("DataSize", "Size"),
                                     wg.Column("DataType", "Data Type"))

    )
        )
    </div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#SourceTable").change(function () {
            $("#ColumnNames").empty();
            $.ajax({
                type: 'POST',
                url: '@Url.Action("GetColumn")',
                dataType: 'json',
                data: { id: $("#SourceTable").val() },
                success: function (SourceColumn) {
                    $.each(SourceColumn, function (i, Colmn) {
                        $("#ColumnNames").append('<option value="' + SourceColumn.Value + '">' +
                        SourceColumn.Text + '</option>');
                    });
                },
                error: function (ex) {
                    alert('Failed to retrieve columns.' + ex);
                }
            });
            return false;
        })
    });

</script>

my controller is as follow:

public JsonResult GetColumn(string TableName)
{
    List<string> ColName = new List<string>();
     int id = (from m in db.inputs where m.input_name == TableName select m).Max(p => p.input_id);
    input_field Ifield = new input_field();
    var str = (from m in db.input_field where m.input_id == id select new { m.input_field_name, m.input_field_id }).ToList();


    return Json(new SelectList(str, "input_field_id", "input_field_name"));
}

I am trying to populate value in second dropdown list .
Please help me out people

Thanks and regards
Archana Rajan

解决方案

(document).ready(function () {

("#SourceTable").change(function () {

("#ColumnNames").empty();

这篇关于如何在asp.net MVC剃刀中的webgrid中级联下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！