我有两个部分视图，我想隐藏它们取决于dropdownList值的变化 [英] I have two Partial view and I want to hide them depending on dropdownList value change
问题描述
我有两种客户类型我在WCF中使用服务已知类型，客户类型是主要客户和子客户。我有下拉列表选择客户类型当我选择主要客户时我需要隐藏子客户部分视图反之亦然
@model SoqiaRazorProject.CustomerService.CustomerData
< script src =〜/ Scripts / jquery-1.8.2.min.js>< / script>
< script src =〜/ Scripts / jquery.validate.min.js>< / script>
< script src =〜/ Scripts / jquery.validate.unobtrusive。 min.js>< / script>
@ {
ViewBag.Title =客户数据;
}
客户数据
@using（Html.BeginForm（））{
@ Html.AntiForgeryToken（）
@ Html.ValidationSummary（true）
客户数据
@ Html.LabelFor（model => model.CustomerID）
@ Html.EditorFor（model => model.Cu stomerID）
@ Html.ValidationMessageFor（model => model.CustomerID）
@ Html.LabelFor（model => model.CardID）< br $>
@ Html.EditorFor（model => model.CardID）
@ Html.ValidationMessageFor（model => model.CardID）
@ Html.LabelFor（model => model。类型）
@ Html.DropDownList（ddlCustomerType，（SelectList）ViewBag.ddlCustomerType，new {@ id =ddlCustomerType }）
@ Html.ValidationMessageFor（model => model.Type）
@ Html.LabelFor（model => model.NationalityID）
@ Html.DropDownList（ddlNationality）
@ Html.ValidationMessageFor（model => model.Nat ionalityID）
@ Html.LabelFor（model => model.FamilyName）
@ Html.EditorFor（model => model.FamilyName）
@ Html.ValidationMessageFor（model => model.FamilyName）
@ Html.LabelFor（model => model.FirstName）
@ Html.EditorFor（model => model.FirstName）
@ Html.ValidationMessageFor（model => model.FirstName）
@Html。 LabelFor（model => model.FatherName）
@ Html.EditorFor（model => model.FatherName）
@ Html.ValidationMessageFor（model => model.FatherName）
@ Html.LabelFor（model => model.GrandFatherName）
@ Html.EditorFor（model => model.GrandFatherName）
@ Html.ValidationMessageFor（model => model.GrandFatherName）
我写这个J-Query代码来隐藏/显示部分视图
@ Scripts.Render（〜/ bundles / jquery）
< script src =〜/ Scripts / jquery-1.8.2.min.jstype =text / javascript>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（ddlCustomerType）。change（function HideControls（）{
var val = $（ddlCustomerType）。val（）;
if（val == 2）{
$（MainCustomerDiv）。hide （）;
$（SubCustomerDiv）。show（）;
}
else if（val == 3）{
$（SubCustomerDiv）。hide（）;
$（MainCustomerDiv）。show（）;
}
}）
}）;
< / script>
@ Html.Partial（MainCustomerData）
@ Html.Partial（SubCustomerData）
< input type =submitvalue =创建/>
}
@ Html.ActionLink（返回列表，索引）
当我运行应用程序时我尝试更改下拉列表值但是部分视图未隐藏
I have Two Customer Type And I use Service Known Type in WCF the Customer Type is Main Customer And Sub Customer. I have Dropdown List to select Customer Type When I select The Main Customer I need The Sub Customer Partial View to be hidden And vice versa
@model SoqiaRazorProject.CustomerService.CustomerData
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@{
ViewBag.Title = "Customer Data";
}
CustomerData
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
Customer Data
@Html.LabelFor(model => model.CustomerID)
@Html.EditorFor(model => model.CustomerID)
@Html.ValidationMessageFor(model => model.CustomerID)
@Html.LabelFor(model => model.CardID)
@Html.EditorFor(model => model.CardID)
@Html.ValidationMessageFor(model => model.CardID)
@Html.LabelFor(model => model.Type)
@Html.DropDownList("ddlCustomerType",(SelectList)ViewBag.ddlCustomerType,new{@id="ddlCustomerType"})
@Html.ValidationMessageFor(model => model.Type)
@Html.LabelFor(model => model.NationalityID)
@Html.DropDownList("ddlNationality")
@Html.ValidationMessageFor(model => model.NationalityID)
@Html.LabelFor(model => model.FamilyName)
@Html.EditorFor(model => model.FamilyName)
@Html.ValidationMessageFor(model => model.FamilyName)
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
@Html.LabelFor(model => model.FatherName)
@Html.EditorFor(model => model.FatherName)
@Html.ValidationMessageFor(model => model.FatherName)
@Html.LabelFor(model => model.GrandFatherName)
@Html.EditorFor(model => model.GrandFatherName)
@Html.ValidationMessageFor(model => model.GrandFatherName)
and I write this J-Query Code to Hide/Show The Partial view
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("ddlCustomerType").change(function HideControls() {
var val = $("ddlCustomerType").val();
if (val == 2) {
$("MainCustomerDiv").hide();
$("SubCustomerDiv").show();
}
else if (val == 3) {
$("SubCustomerDiv").hide();
$("MainCustomerDiv").show();
}
})
});
</script>
@Html.Partial("MainCustomerData")
@Html.Partial("SubCustomerData")
<input type="submit" value="Create" />
}
@Html.ActionLink("Back to List", "Index")
When I Run the application "I try to change the dropdown list values But The Partial View Not Hidden"
推荐答案
（document）.ready（function（）{
(document).ready(function () {
（ddlCustomerType）。 （函数HideControls（）{
var val =
("ddlCustomerType").change(function HideControls() {
var val =
（ddlCustomerType）。val（）;
if（val == 2）{
("ddlCustomerType").val();
if (val == 2) {
这篇关于我有两个部分视图，我想隐藏它们取决于dropdownList值的变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
