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

时间:2018-07-25 17:02:45

标签: javascript c# jquery asp.net-mvc razor

我有一个“新建”按钮,该按钮调用Create.cshtml来捕获文本框的值并将其插入到SQLServer表中。这很好。但是现在我想创建2种样式,这意味着:当我单击“新建”按钮时,我想显示一个带有2个选项的下拉菜单-“ Flavor A”和“ Flavor B”。当选择“香料A”时,我想显示一组文本框,当选择“香料B”时,我想显示2个额外的文本框。两种风格都应写入同一数据库表。我不确定如何实现将Flavor通过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>
}

Flavor B应该具有上述所有内容以及2个额外的字段,例如“电话”和“电子邮件”。

在Controller中创建方法:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(FlavorsVM model)
        {
            if (!ModelState.IsValid)
            {
                return View(model);
            }


            Flavor data = new Flavor
            {
                Serial = null,
                Name = null,
                Address = null,
                Flavor = null
            };
            db.Flavors.Add(data);
            db.SaveChanges();

            data.Serial = model.Serial;
            data.Name = model.Name;
            data.Address = model.Address;

            db.Entry(data).State = EntityState.Modified;
            db.SaveChanges();
            return View("Index", db.Flavors.ToList());
        }

1 个答案:

答案 0 :(得分:0)

数据库

CREATE TABLE [dbo].[bzFlav](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Serial] [varchar](25) NULL,
    [Name] [varchar](25) NULL,
    [Address] [varchar](25) NULL,
    [Flavor] [varchar](25) NULL,
    [Phone] [varchar](25) NULL,
    [Email] [varchar](25) NULL,
 CONSTRAINT [PK_bzFlav] PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

控制器

//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>