CODEWITHSUNDEEP
javascriptjqueryasp.netasp.net-mvc
ishan joshi
ishan joshi

Reputation: 270

clear value in Partial view(Multiple)

I have one patialview which is user two time

Parialview:

<divclass="row Address2">
    <divclass="col-sm-4">
        <divclass="md-form">
                @Html.DropDownListFor(m=>m.StateId,Model.States,"--SelectState--",new{@id="addressState",@class="posT mdb-select",@autocomplete="off"})
        </div>
    </div>
    <divclass="col-sm-4">
        <divclass="md-form">
            <divclass="loader-div">
                @Html.TextBoxFor(m=>m.City,new{@id="addressCity",@autocomplete="off",@class="form-control Clr"})
            </div>
        </div>
    </div>
    <divclass="col-sm-4">
        <divclass="md-form">
            <divclass="loader-div">
                @Html.TextBoxFor(m=>m.Zipcode,new{@id="addressZipcode",@autocomplete="off",@class="form-control Clr",})
            </div>
        </div>
    </div>
</div>

Now I want to Delete State and zipcode base on state dropdown change.

Suppose i select above dropdown then its should delete above or current div state and zipcode if i select below dropdown than below state and zipcode should be delete.

But in my case when i select below dropdown that time its always clear above. My java script as bellow.

$(".mdb-select").change(function(){
if($(this).closest('.Address2').find('#addressState').val()==''){

$(this).closest('.Address2').find('#addressCity').val("");
$(this).closest('.Address2').find('#addressZipcode').val("");

//$(this).parents('.Address2').find('#addressCity').val("");
//$(this).parents('.Address2').find('#addressZipcode').val("");
}
}
})

and i have bind partialview like this

@Html.Partial("_AddressPartial", feedback.AddressProperty, new ViewDataDictionary() { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "AddressProperty" } })

 and

 @Html.Partial("_AddressPartial", feedback.EscrowProperty, new ViewDataDictionary() { TemplateInfo = new TemplateInfo() { HtmlFieldPrefix = "EscrowProperty" } })

and also try to remove by below JQ $(this).closest('.Address2').find('.Clr').val("");

but Result is same.

Upvotes: 0

Views: 906

Answers (1)

user3559349
user3559349

Reputation:

Your use of HtmlFieldPrefix correctly generates unique id attributes but your use of new { @id=".." } is overriding that and generating duplicate id attributes which is invalid html, and your jquery selectors will only ever select the first one.

Change it to use class names and relative selectors instead

@Html.DropDownListFor(m => m.StateId, Model.States,"--SelectState--", new { @class="posT mdb-select", @autocomplete="off"})
@Html.TextBoxFor(m => m.City, new { @class="city form-control Clr", @autocomplete="off",})
@Html.TextBoxFor( m=> m.Zipcode, new {@class="zipcode form-control Clr", @autocomplete="off" })

Then the scripts becomes

$('.mdb-select').change(function() {
    var state = $(this).val();
    var container = $(this).closest('.Address2');
    container.find('.city').val('');
    container.find('.zipcode').val('');
});

As a side note, it easier to use an EditorTemplate to generate the controls. Assuming your class is Address.cs, then rename your partial to /Views/Shared/EditorTemplates/Address.cshtml (ie to match the class name), and then in the main view it becomes

@Html.EditorFor(m => m.AddressProperty)
@Html.EditorFor(m => m.EscrowProperty)

Upvotes: 1

Related Questions