堆栈内存溢出
  繁体   English   中英

使用剃刀视图在asp.net mvc中的列中将层叠应用于下拉列表

[英]Applying cascading to dropdownlist in a column in asp.net mvc with razor view

 原文  2016-01-11 06:30:22  4   1    javascript/ c#/ asp.net/ asp.net-mvc/ razor

问题描述

我面临一个问题。 我有一个视图，其中在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"));
}

请同建议

HTML渲染

呈现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>

更新的Javascript为12/01/2016 

$(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;
    })
)});

Html WebGrid视图的日期为12/01/2016： 

<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"));
}

1 个解决方案

解决方案1
 0 已采纳  2016-01-12 09:30:37

请参阅下面的我的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;
    })

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Asp.net MVC中三表级联DropdownList 带有 Razor 的 ASP.NET MVC4 - 按从另一个下拉列表中选择的值过滤下拉列表 如何在ASP.Net Mvc3Razor中动态隐藏dropdownlist2中选定的dropdownlist1选定值 ASP.NET MVC dropdownlist级联错误无法将属性“值”设置为null ASP.NET MVC DropDownlist 事件到局部视图 如何在ASP.NET MVC 3中的Razor视图中编码嵌入式javascript？ 在Asp.Net MVC Razor中将HTML视图作为电子邮件附件发送 ASP.NET MVC 3剃刀视图中的jQuery自定义验证 ASP.NET MVC的层叠DropDownList 级联下拉列表而不在asp.net中重新加载页面
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM