In my application there are more than 10 partial views in the main view, also there is a combo box. When the user selects combobox value, I have hide and show the relevant partial views in the main view.
My error is, when user select a value from the combo box and if the user fills some data on that showed partial view and change the combo box value again to another one, the existing partial view data showed when submit the request.
I want to clear the partial view data when user change the combo box values.
This is the combo box, there I'm loading the Request types from the session
<div class="form-group row">
@Html.LabelFor(model => model.ReqType, htmlAttributes: new { @class = "control-label col-md-3" })
<div class="col-sm-8">
@Html.DropDownListFor(model => model.ReqType, ReqTypes, "Select Request Type", new { @class = "js-dropdown" })
@Html.ValidationMessageFor(model => model.ReqType, "", new { @class = "text-danger" })
</div>
</div>
As an example I will show 2 different partial views
This is one partial view
<fieldset id="pnlGeneralItms" style="display:@(Model.GeneralItmsList == null || Model.GeneralItmsList.Count == 0? "none":"")">
<legend>
<h5>General Request Attachments / Bills</h5>
</legend>
<ul id="RequItms" style="list-style-type: none">
@if (Model != null && Model.GeneralItmsList != null)
{
foreach (Asp_PASMVC.Models.GeneralItms Itms in Model.GeneralItmsList)
{
Html.RenderPartial("_GeneralItms", Itms);
}
}
</ul>
<button type="button" id="addAnotherItm" class="btn btn-success" href="#">Add Line</button>
<script type="text/javascript">
$(function () {
// $("#movieEditor").sortable();
$("#addAnotherItm").click(function () {
$.get('/AppRequests/GeneralItmsPartialView', function (template) {
$("#RequItms").append(template);
});
});
});
</script>
<hr />
<br />
</fieldset>
This is how I hide and show the partial views, when combo box change the value
<script>
$('#ReqType').change(function () {
if ($(this).val() == '1') {
$('#pnlPurchaseItem').show();
$('#pnlGeneralItms').hide();
}
else if ($(this).val() == '2') {
$('#pnlGeneralItms').show();
$('#pnlPurchaseItem').hide();
}
</script>
I wanna know when partial view hiding if there is existing data entered by user, delete the data.