在具有剃刀视图的asp.net mvc中将级联应用于列中的下拉列表答案

【问题标题】：Applying cascading to dropdownlist in a column in asp.net mvc with razor view在具有剃刀视图的asp.net mvc中将级联应用于列中的下拉列表
【发布时间】：2016-01-11 06:30:22
【问题描述】：

我遇到了一个问题。我有一个视图，它在 webgrid 中有两列下拉列表。其中一列用于从下拉列表中选择多个表名。第二列应该与第一列级联并返回在第一列中选择的表的列名。我设法将它级联到第一行，但不知何故它不适用于列名下拉列表中的其余列。我正在从模型中枚举表名。基于表名，我使用 javascript 级联仅适用于第一行的列名。请就我如何为列中的所有下拉菜单级联提供建议

我的下拉菜单查看代码如下：

 <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("SourceTable", format: @item => Html.DropDownList("SourceTable", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceTables,"Select Source")),
                                                   wg.Column("ColumnNames", format:@item=> Html.DropDownList("ColumnNames",new SelectList(string.Empty, "Value", "Text"), "Select Column", new { style = "width:200px" })),
                               // 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>

我的 Javascript 如下：

$(document).ready(function () {

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

我返回 JSON 的方法如下：

public JsonResult GetColumn(string TableName)
{    ArrayList id1 = new ArrayList();
List<SelectListItem> str = new List<SelectListItem>();
var temp = (from m in db.inputs where m.input_name == TableName select m).First<input>().input_id;
ArrayList FieldName = new ArrayList();
 int id = Convert.ToInt32(temp);
var s = (from m in db.input_field where m.input_id == id select m.input_field_name);
var i =(from m in db.input_field where m.input_id == id select m.input_field_id);
int j = 0;
foreach(int iq in i)
{

    id1.Add(j);
    j++;
}
foreach (string Field in s)
{
    FieldName.Add(Field);
}
for(j =0; j< id1.Count; j++)
{
    str.Add(new SelectListItem{Text= FieldName[j].ToString(),Value = id1[j].ToString() });
}

return Json(new SelectList(str, "Value", "Text"));
}

请多多指教

the HTML rendering

渲染html的代码如下：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>SelectSrcAndDestn - Quick Analytics - Dashboard</title>

    <meta name="viewport" content="width=device-width" />
    <link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.6.2.js"></script>

</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title"><a href="/">your logo here</a></p>
            </div>
            <div class="float-right">
                <section id="login">
                        <ul>
    <li><a href="/Account/Register" id="registerLink">Register</a></li>
    <li><a href="/Account/Login" id="loginLink">Log in</a></li>
</ul>

                </section>
                <nav>
                    <ul id="menu">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">

        <section class="content-wrapper main-content clear-fix">

<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function () {

    $("select.dropdownSource").live("change", (function () {
        $("select.clsColumnNames").empty();

         $.ajax({
            type: 'POST',
            url: '/Home/GetColumn',
            dataType: 'json',
            data: { TableName: $(this).find("option:selected").text() },
            success: function (str) {

                $.each(str, function (Value, Text) {
                    //alert(Value + ' ' + Text.Value);
                    $(".clsColumnNames").append('<id ="' + Value + '"/>')
                    $(".clsColumnNames").append('<option value ="' + Value + '">' +
                    Text.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Failed to retrieve columns.' + ex);
            }
        });
        return false;
    })
)});

</script>














<style type="text/css">
    .gridTable {
    margin: 4px;
    padding: 10px;
    border: 1px #333 solid;
        border-collapse: collapse;
        min-width: 550px;
        background-color: #999;
        color: #999;
    }

.gridHead th {
    font-weight: bold;
    background-color: #ffd800;
    color: #333;
    padding: 10px;
}

.gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover {
    color: #333;
}

.gridHead a:hover {
    text-decoration: underline;
    background-color: #f67f7f;
}

.gridTable tr.gridAltRow {
    background-color: #c7d1d6;
}

.gridTable tr:hover {
    background-color: #f67f7f;
}

.gridAltRow td {
    padding: 10px;
    margin: 5px;
    color: #333;
}

.gridRow td {
    padding: 10px;
    color: #333;
}

.gridFooter td {
    padding: 10px;
    background-color: #c7d1d6;
    color: #999;
    font-size: 12pt;
    text-align: center;
}

.gridFooter a {
    font-size: medium;
    font-weight: bold;
    color: #333;
    border: 1px #333 solid;
}
</style>





<div id="grid">
        <table class="gridTable">
<thead>
    <tr class="gridHead">
        <th scope="col">
<a href="/Home/SelectSrcAndDestn?sort=DestnColumn&amp;sortdir=ASC">Destination Column</a>            </th>
        <th scope="col">
<a href="/Home/SelectSrcAndDestn?sort=SourceTable&amp;sortdir=ASC">SourceTable</a>            </th>
        <th scope="col">
<a href="/Home/SelectSrcAndDestn?sort=ColumnNames&amp;sortdir=ASC">ColumnNames</a>            </th>
        <th scope="col">
<a href="/Home/SelectSrcAndDestn?sort=DataSize&amp;sortdir=ASC">Size</a>            </th>
        <th scope="col">
<a href="/Home/SelectSrcAndDestn?sort=DataType&amp;sortdir=ASC">Data Type</a>            </th>
    </tr>
</thead>
<tbody>
    <tr class="gridRow">
        <td>Even Date Time</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>Even End Time</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>BP Systolic</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>BP Diastolic</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>BMI</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>Patient ID</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>Age</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>Ethnicity</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>Triglyceride Level</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>Hypertension</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>Family History</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridAltRow">
        <td>Gender</td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
    <tr class="gridRow">
        <td>HDL </td>
        <td><select class="dropdownSource" id="SourceTable" name="SourceTable" style="width:200px"><option value="">Select Source</option>
<option value="1">TableNames</option>
<option value="2">Destination1</option>
<option value="3">Destination2</option>
</select></td>
        <td><select class="clsColumnNames" id="ColumnNames" name="ColumnNames" style="width:200px"><option value="">Select Column</option>
</select></td>
        <td>100</td>
        <td>VARCHAR</td>
    </tr>
</tbody>
</table>

    )
</div>


        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; 2016 - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    <script src="/Scripts/jquery-1.8.2.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"4318bb18b7eb41148557001228ec92d8"}
</script>
<script type="text/javascript" src="http://localhost:50502/b2cd8ef3124349f89d598fb5cd5073f2/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

2016 年 12 月 1 日更新的 Javascript

$(document).ready(function () {

    $("select.dropdownSource").live("change", (function () {
        var columnSelectBox = $(this).parent("td").find("select.clsColumnNames");
        $(columnSelectBox).empty();

         $.ajax({
            type: 'POST',
            url: '/Home/GetColumn',
            dataType: 'json',
            data: { TableName: $(this).find("option:selected").text() },
            success: function (str) {

                $.each(str, function (Value, Text) {
                    //alert(Value + ' ' + Text.Value);

                    $(".clsColumnNames").append('<option value ="' + Value + '">' +
                    Text.Text + '</option>');
                });
            },
            error: function (ex) {
                alert('Failed to retrieve columns.' + ex);
            }
        });
        return false;
    })
)});

2016 年 12 月 1 日的 Html WebGrid 视图：

<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("SourceTable", format: @item => Html.DropDownList("SourceTable", (IEnumerable<SelectListItem>)Model.SourceColumnModel[0].SourceTables, "Select Source", new { style = "width:200px", @class = "dropdownSource" })),
                                                            wg.Column("ColumnNames", format: @item => Html.DropDownList("ColumnName", new SelectList(string.Empty, "Value", "Text"), "Select Column", new {id= string.Empty, style = "width:200px", @class = "clsColumnNames" })),
                               // 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>

Json 方法返回 2015 年 12 月 1 日的列名

public JsonResult GetColumn(string TableName)
{    ArrayList id1 = new ArrayList();
List<SelectListItem> str = new List<SelectListItem>();
var temp = (from m in db.inputs where m.input_name == TableName select m).First<input>().input_id;
ArrayList FieldName = new ArrayList();
 int id = Convert.ToInt32(temp);
var s = (from m in db.input_field where m.input_id == id select m.input_field_name);
var i =(from m in db.input_field where m.input_id == id select m.input_field_id);
int j = 0;
foreach(int iq in i)
{

    id1.Add(j);
    j++;
}
foreach (string Field in s)
{
    FieldName.Add(Field);
}
for(j =0; j< id1.Count; j++)
{
    str.Add(new SelectListItem{Text= FieldName[j].ToString(),Value = id1[j].ToString() });
}

return Json(new SelectList(str, "Value", "Text"));
}

【问题讨论】：

每个元素应该有不同的id。
@FrebinFrancis ...我无法在此网络网格中添加它...关于我如何做到这一点的任何建议？？
您必须为每个下拉列表创建不同的 ID 并设置一个通用类。所以我们可以通过使用类而不是 ID 来使用它
使用 Html.DropDownList("ColumnNames",new SelectList(string.Empty, "Value", "Text"), "Select Column", new { @class="为每个下拉列表设置类clsColumnNames", style = "width:200px" })
你能告诉我如何相应地更改 Javascript ... javascript 新手因此有点困惑

标签： javascript c# asp.net asp.net-mvc razor

【解决方案1】：

请参阅下面的 Jquery 脚本以更新列下拉列表

$("select.dropdownSource").live("change", (function () {
  var columnSelectBox = $(this).parent("td").next("td").find("select.clsColumnNames");
  $(columnSelectBox).empty();

         $.ajax({
            type: 'POST',
            url: '/Home/GetColumn',
            dataType: 'json',
            data: { TableName: $(this).find("option:selected").text() },
            success: function (str) {

          $.each(str, function (Value, Text) {
             $(columnSelectBox).append('<option value ="' + Value + '">' +
             Text.Text + '</option>');
             });
         },
         error: function (ex) {
             alert('Failed to retrieve columns.' + ex);
         }
        });
        return false;
    })

【讨论】：

它有效，但现在如果我在第一个下拉列表中选择 table1 并选择相应的列名，就会出现问题...转到下一个下拉列表并选择 table2，我仍然会在表 1 中获得列各列的下拉菜单...@FrebinFrancis
调用 ajax 方法“GetColumns”时是否会发生任何数据过滤？
nope ... 它采用下拉选择的表名并将其传递给 ajax 方法 GetColumn 并基于该表的列名返回
您确定这些列仅属于选定的表吗？
是的，这是应该出现的，但现在发生的情况是，当我选择 table1 时 col1 出现在下拉列表中，当我在下一个下拉列表中选择 table2 时，table1 的 col1 与 col2 一起出现下拉列表中的表 2...