Javascript 根据上一页中的选定值显示不同的表单字段-c#razorview_Javascript_C#_Jquery_Asp.net Mvc_Razor

Javascript 根据上一页中的选定值显示不同的表单字段-c#razorview

javascript c# jquery asp.net-mvc razor

Javascript 根据上一页中的选定值显示不同的表单字段-c#razorview,javascript,c#,jquery,asp.net-mvc,razor,Javascript,C#,Jquery,Asp.net Mvc,Razor,我有一个“createnew”按钮，它调用Create.cshtml，捕获文本框的值并插入到SQLServer表中。这个很好用。但现在我想创建这两种风格，意思是：当我点击“创建新”按钮时，我想显示一个包含两个选项的下拉列表-“味道a”和“味道B”。选择“Flavor A”时，我想显示一组文本框，选择Flavor B时，我想显示两个额外的文本框。两种风格都应该写入同一个db表。我不知道如何实现将URL中的味道传递到Create.cshtml并显示该版本的表单 Create.cshtml 风味A：

我有一个“createnew”按钮，它调用Create.cshtml，捕获文本框的值并插入到SQLServer表中。这个很好用。但现在我想创建这两种风格，意思是：当我点击“创建新”按钮时，我想显示一个包含两个选项的下拉列表-“味道a”和“味道B”。选择“Flavor A”时，我想显示一组文本框，选择Flavor B时，我想显示两个额外的文本框。两种风格都应该写入同一个db表。我不知道如何实现将URL中的味道传递到Create.cshtml并显示该版本的表单

Create.cshtml 风味A：

@using (Html.BeginForm("Create", "Flavors", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <table align="center" width="65%">
        <tr>
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <td nowrap align="right">
                <b>Serial</b>
            </td>
            <td>
                @Html.EditorFor(model => model.Serial, new { htmlAttributes = new { @class = "mytextBoxstyle" } })
            </td>
            <td nowrap align="right">
                <b>Name</b>
            </td>
            <td>
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "mytextBoxstyle" } })


             </td>
<td nowrap align="right">
                    <b>Address</b>
                </td>
                <td>
                    @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "mytextBoxstyle" } })
                </td>
</tr>
</table>
}

控制器

//namespace Testy20161006.Controllers
public class FlavorViewModel
{
    public List<SelectListItem> FlavorDDL { get; set; }
    public string SelectedFlavor { get; set; }
    public bzFlav Flavor { get; set; }

    public FlavorViewModel()
    {
        this.FlavorDDL = new List<SelectListItem>();
        SelectListItem f1 = new SelectListItem();
        f1.Selected = true;
        f1.Text = "FlavorA";
        f1.Value = "FlavorA";
        SelectListItem f2 = new SelectListItem();
        f2.Text = "FlavorB";
        f2.Value = "FlavorB";
        this.FlavorDDL.Add(f1);
        this.FlavorDDL.Add(f2);
    }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut117(FlavorViewModel fvm)
    {
        using (user7221204 db = new user7221204())
        {
            bzFlav flav = new bzFlav
            {
                Address = fvm.Flavor.Address,
                Email = fvm.Flavor.Email,
                Flavor = fvm.Flavor.Flavor,
                Name = fvm.Flavor.Name,
                Phone = fvm.Flavor.Phone,
                Serial = fvm.Flavor.Serial
            };

            db.bzFlavs.Add(flav);
            db.SaveChanges();
        }

        return View(fvm);
    }

    public ActionResult Tut117()
    {
        FlavorViewModel fvm = new FlavorViewModel();
        return View(fvm);
    }

//名称空间testy2016 1006.控制器
公共类模型
{
公共列表{get；set；}
公共字符串SelectedFlavor{get；set；}
公共bzFlav味道{get；set；}
公共视图模型（）
{
this.FlavorDDL=新列表（）；
SelectListItem f1=新建SelectListItem（）；
f1.所选=真；
f1.Text=“FlavorA”；
f1.Value=“FlavorA”；
SelectListItem f2=新建SelectListItem（）；
f2.Text=“FlavorB”；
f2.Value=“FlavorB”；
this.FlavorDDL.Add（f1）；
此.FlavorDDL.Add（f2）；
}
}
公共类HomeController:控制器
{
[HttpPost]
公共行动结果Tut117（FlavorViewModel fvm）
{
使用（user7221204 db=newuser7221204（））
{
bzFlav flav=新的bzFlav
{
地址=fvm.Flavor.Address，
Email=fvm.Flavor.Email，
味道=fvm.Flavor.Flavor，
Name=fvm.Flavor.Name，
Phone=fvm.Flavor.Phone，
Serial=fvm.Flavor.Serial
};
db.bzFlavs.Add（flav）；
db.SaveChanges（）；
}
返回视图（fvm）；
}
公共行动结果（第117页）
{
FlavorViewModel fvm=新的FlavorViewModel（）；
返回视图（fvm）；
}

景色

@{
    Layout = null;
}
@model Testy20161006.Controllers.FlavorViewModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut117</title>
    <style type="text/css">
        .Hide {
            visibility: hidden;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#FlavorDDL").change(function () {
                if ($("#FlavorDDL option:selected").val() == "FlavorB") {
                    $(".HideShow").removeClass("Hide");
                }
                else {
                    $(".HideShow").addClass("Hide");
                    $(".HideShow").val("");
                }
            })
        })
    </script>
</head>
<body>
    @using (Html.BeginForm())
    {
        <div>
            <table>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Serial)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Serial)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Name)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Name)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Address)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Address)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Flavor)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Flavor)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Phone, new { @class = "HideShow Hide" })
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Phone, new { @class = "HideShow Hide" })
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Email, new { @class = "HideShow Hide" })
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Email, new { @class = "HideShow Hide" })
                    </td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(r => r.SelectedFlavor)</td>
                    <td>
                        @Html.DropDownListFor(m => m.SelectedFlavor,
                    new SelectList(Model.FlavorDDL, "Value", "Text"),
                             new { id = "FlavorDDL", @class = "form-control textBoxInput" })
                        @Html.ValidationMessageFor(model => model.SelectedFlavor)
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="submitBtn" type="submit" value="Go" />
                    </td>
                </tr>
            </table>
        </div>
    }
</body>
</html>

@{
布局=空；
}
@模型测试2016 1006.Controllers.FlavorViewModel
图117
.隐藏{
可见性：隐藏；
}
$（函数（）{
$（“#flavordll”）.change（函数（）{
if（$（“#FlavorDDL选项：选中”）.val（）=“FlavorB”）{
$（“.HideShow”）.removeClass（“隐藏”）；
}
否则{
$（“.HideShow”）.addClass（“隐藏”）；
$（“.HideShow”）.val（“”）；
}
})
})
@使用（Html.BeginForm（））
{
@LabelFor（r=>r.Flavor.Serial）
@Html.TextBoxFor（r=>r.Flavor.Serial）
@LabelFor（r=>r.Flavor.Name）
@Html.TextBoxFor（r=>r.Flavor.Name）
@LabelFor（r=>r.Flavor.Address）
@Html.TextBoxFor（r=>r.Flavor.Address）
@LabelFor（r=>r.Flavor.Flavor）
@Html.TextBoxFor（r=>r.Flavor.Flavor）
@LabelFor（r=>r.Flavor.Phone，新的{@class=“HideShow Hide”}）
@TextBoxFor（r=>r.Flavor.Phone，新的{@class=“HideShow Hide”}）
@LabelFor（r=>r.Flavor.Email，新的{@class=“HideShow Hide”}）
@TextBoxFor（r=>r.Flavor.Email，新的{@class=“HideShow Hide”}）
@LabelFor（r=>r.SelectedFlavor）
@Html.DropDownListFor（m=>m.SelectedFlavor，
新的选择列表（Model.flavordll，“值”、“文本”），
新的{id=“FlavorDDL”，@class=“formcontroltextboxinput”}）
@Html.ValidationMessageFor（model=>model.SelectedFlavor）
}

这通常是使用JavaScript和jQuery完成的，在下拉列表中附加一个

onchange

，显示味道a或是“是”的字段，我理解。我不确定在考虑不同页面时如何实现它。比如在不同页面中选择值并在下一页中将其锁定。如果我将能够提供任何片段，这将是非常有用的。谢谢！

//namespace Testy20161006.Controllers
public class FlavorViewModel
{
    public List<SelectListItem> FlavorDDL { get; set; }
    public string SelectedFlavor { get; set; }
    public bzFlav Flavor { get; set; }

    public FlavorViewModel()
    {
        this.FlavorDDL = new List<SelectListItem>();
        SelectListItem f1 = new SelectListItem();
        f1.Selected = true;
        f1.Text = "FlavorA";
        f1.Value = "FlavorA";
        SelectListItem f2 = new SelectListItem();
        f2.Text = "FlavorB";
        f2.Value = "FlavorB";
        this.FlavorDDL.Add(f1);
        this.FlavorDDL.Add(f2);
    }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut117(FlavorViewModel fvm)
    {
        using (user7221204 db = new user7221204())
        {
            bzFlav flav = new bzFlav
            {
                Address = fvm.Flavor.Address,
                Email = fvm.Flavor.Email,
                Flavor = fvm.Flavor.Flavor,
                Name = fvm.Flavor.Name,
                Phone = fvm.Flavor.Phone,
                Serial = fvm.Flavor.Serial
            };

            db.bzFlavs.Add(flav);
            db.SaveChanges();
        }

        return View(fvm);
    }

    public ActionResult Tut117()
    {
        FlavorViewModel fvm = new FlavorViewModel();
        return View(fvm);
    }

@{
    Layout = null;
}
@model Testy20161006.Controllers.FlavorViewModel

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut117</title>
    <style type="text/css">
        .Hide {
            visibility: hidden;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#FlavorDDL").change(function () {
                if ($("#FlavorDDL option:selected").val() == "FlavorB") {
                    $(".HideShow").removeClass("Hide");
                }
                else {
                    $(".HideShow").addClass("Hide");
                    $(".HideShow").val("");
                }
            })
        })
    </script>
</head>
<body>
    @using (Html.BeginForm())
    {
        <div>
            <table>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Serial)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Serial)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Name)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Name)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Address)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Address)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Flavor)
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Flavor)
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Phone, new { @class = "HideShow Hide" })
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Phone, new { @class = "HideShow Hide" })
                    </td>
                </tr>
                <tr>
                    <td>
                        @Html.LabelFor(r => r.Flavor.Email, new { @class = "HideShow Hide" })
                    </td>
                    <td>
                        @Html.TextBoxFor(r => r.Flavor.Email, new { @class = "HideShow Hide" })
                    </td>
                </tr>
                <tr>
                    <td>@Html.LabelFor(r => r.SelectedFlavor)</td>
                    <td>
                        @Html.DropDownListFor(m => m.SelectedFlavor,
                    new SelectList(Model.FlavorDDL, "Value", "Text"),
                             new { id = "FlavorDDL", @class = "form-control textBoxInput" })
                        @Html.ValidationMessageFor(model => model.SelectedFlavor)
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="submitBtn" type="submit" value="Go" />
                    </td>
                </tr>
            </table>
        </div>
    }
</body>
</html>