Question

我对级联下降的部分视图，即国家和州。我使用以下razor视图语句来呈现此局部视图

@{Html.RenderAction("PopulateCountriesDropdown", "Helper");}

它工作得很好。以下是部分视图的完整代码，该代码对控制器的操作方法进行异步调用

<pre>@model OnlineExamSystem.Models.CountryAndStateViewModel
@Html.LabelFor(m => m.c.CountryName)
@Html.DropDownListFor(m => m.c.CountryId, new SelectList(Model.cntlist, "CountryId", "CountryName"),"--Select Country--", new {  @class="aha" })
@Html.Label("State")

注意：，因为我无法编写HTML，即我有一个简单的html选择，用于显示第二个下拉列表以显示class="ddlstates"

的状态

<script type="text/javascript">
$(document).ready(function () {
    $(".aha").change(function () {
        var Url = '/Helper/PopulateStateDropdown';
        var catId = $(this).val();
        //alert(catId);
        var select = $('.ddlstate');
        if (catId != '') {
            $.getJSON("/Helper/PopulateStateDropdown", { id: catId },
                function (ddl) {
                    select.empty();
                    select.append($("<option></option>", { value: 0, text: '--Select State--' }));
                    $.each(ddl, function (index, itemData) {
                        select.append($("<option></option>", { value: itemData.Value, text: itemData.Text }));
                    });
                });
        }
        else {
            select.empty();
            select.append($("<option></option>", { value: 0, text: '--Select State--' }));

        }
    });
});

正如我所说，这样做很好。但这是问题，即当我尝试在同一页面（视图）上再次渲染相同的局部视图时，如下所示

@{Html.RenderAction("PopulateCountriesDropdown", "Helper");}

渲染没问题，但在第二个局部视图中更改国家/地区并未正确选择状态。另外我注意到第一个局部视图调用了两次动作方法

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult PopulateStateDropdown(string id)
{
     var ls = State.GetStateByCountryId(Int32.Parse(id)).AsEnumerable();
     var ddl = ls.Select(m => new SelectListItem() { Text = m.StateName, Value = m.StateId.ToString() });
     return Json(ddl, JsonRequestBehavior.AllowGet);
}

有趣的是，上面的方法根本没有从第二个局部视图调用。

Answer 1

(doucment).ready()在第一次加载页面时将事件绑定到dome元素，它在DOM中找到元素并将事件绑定到它们，在你的情况下作为局部视图，html在页面上动态呈现页面已加载，因此事件未绑定。

在视图中动态添加html时，使用live函数进行事件：

这样做：

$(".aha").live('change',function () {


});

mvc4局部视图在同一视图上使用了两次

1 个答案: