部分视图中的明确值(多个)

时间:2017-03-30 05:59:35

标签: javascript jquery asp.net asp.net-mvc

我有一个用户两次的patialview

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>

现在我想根据状态下拉列表更改删除状态和邮政编码。

假设我选择上面的下拉列表然后它应该删除上面或当前的div状态和邮政编码 如果我选择下面的下拉列表而不是下面的状态,则应删除zipcode。

但是在我的情况下,当我选择下面的下拉时间时,它总是在上面清楚。 我的java脚本如下所示。

$(".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("");
}
}
})

我已经绑定了像这样的部分视图

@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" } })

并尝试通过JQ以下删除  $(本).closest(&#39; .Address2&#39)。发现(&#39; .Clr&#39;)VAL(&#34;&#34);

但结果相同。

1 个答案:

答案 0 :(得分:1)

您对HtmlFieldPrefix的使用正确地生成了唯一的id属性,但您使用new { @id=".." }会覆盖该属性并生成重复的id属性,这些属性是无效的html,以及您的jquery选择器只会选择第一个。

将其更改为使用类名和相对选择器

@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" })

然后脚本变为

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

作为旁注,使用EditorTemplate生成控件更容易。假设您的班级为Address.cs,则将您的部分重命名为/Views/Shared/EditorTemplates/Address.cshtml(即匹配班级名称),然后在主视图中将其变为

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