jquery - I have two Partial view and I want to hide them depending on dropdownList value change -
i have 2 customer type , use service known type in wcf customer type main customer , sub customer. have dropdown list select customer type when select main customer need sub customer partial view hidden , 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"; } <h2>customerdata</h2> @using (html.beginform()) { @html.antiforgerytoken() @html.validationsummary(true) <fieldset> <legend>customer data</legend> <div class="editor-label"> @html.labelfor(model => model.customerid) </div> <div class="editor-field"> @html.editorfor(model => model.customerid) @html.validationmessagefor(model => model.customerid) </div> <div class="editor-label"> @html.labelfor(model => model.cardid) </div> <div class="editor-field"> @html.editorfor(model => model.cardid) @html.validationmessagefor(model => model.cardid) </div> <div class="editor-label"> @html.labelfor(model => model.type) </div> <div class="editor-field"> @html.dropdownlist("ddlcustomertype",(selectlist)viewbag.ddlcustomertype,new{@id="ddlcustomertype"}) @html.validationmessagefor(model => model.type) </div> <div class="editor-label"> @html.labelfor(model => model.nationalityid) </div> <div class="editor-field"> @html.dropdownlist("ddlnationality") @html.validationmessagefor(model => model.nationalityid) </div> <div class="editor-label"> @html.labelfor(model => model.familyname) </div> <div class="editor-field"> @html.editorfor(model => model.familyname) @html.validationmessagefor(model => model.familyname) </div> <div class="editor-label"> @html.labelfor(model => model.firstname) </div> <div class="editor-field"> @html.editorfor(model => model.firstname) @html.validationmessagefor(model => model.firstname) </div> <div class="editor-label"> @html.labelfor(model => model.fathername) </div> <div class="editor-field"> @html.editorfor(model => model.fathername) @html.validationmessagefor(model => model.fathername) </div> <div class="editor-label"> @html.labelfor(model => model.grandfathername) </div> <div class="editor-field"> @html.editorfor(model => model.grandfathername) @html.validationmessagefor(model => model.grandfathername) </div> and write j-query code hide/show 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> <div id="maincustomerdiv"> @html.partial("maincustomerdata") </div> <div id="subcustomerdiv"> @html.partial("subcustomerdata") </div> <p> <input type="submit" value="create" /> </p> </fieldset> } <div> @html.actionlink("back list", "index") </div> when run application "i try change dropdown list values partial view not hidden"
add # char element selectors :)
$("#ddlcustomertype").change(function hidecontrols() { var val = $("#ddlcustomertype").val(); if (val == 2) { $("#maincustomerdiv").hide(); $("#subcustomerdiv").show(); } else if (val == 3) { $("#subcustomerdiv").hide(); $("#maincustomerdiv").show(); } });
Comments
Post a Comment