Question

我在editortemplates视图中有2个级联下拉列表。当我第一次打开视图并加载editortemplate时，下拉列表中的数据加载没有问题。但是，当在我的视图中单击将重复此editortemplate的按钮时，不会加载dropdows数据。我已经使用了路由映射来进行级联下拉，按钮正在调用jquery。任何想法在这里可能是错的？

First time the page is loaded

After clicking in Add Row button, there is still data in the original row but the second row is empty

这是下拉列表的代码：

对于editortemplates视图：

<script type="text/jscript">
$(function () {
    $.getJSON("/Budget/Categories/List/", function (data) {
        var items = "<option value='0'>Select a Category</option>";
        $.each(data, function (i, category) {
            items += "<option value='" + category.Value + "'>" + category.Text + "</option>";
        });
        $("#Category").html(items);
    });

    $("#Category").change(function () {
        $.getJSON("/Budget/SubCategories/List/" + $("#Category > option:selected").attr("value"), function (data) {

            var items = "<option value='0'>Select a SubCategory</option>"; ;
            $.each(data, function (i, subcat) {
                items += "<option value='" + subcat.Value + "'>" + subcat.Text + "</option>";
            });
            $("#SubCategory").html(items);
        })
    });
});
</script>

<label for="Category">Categories</label>
<select id="Category"  name="Category" style = "width:150px"></select>

<label for="SubCategory">SubCategories</label>
<select id="SubCategory"  name="SubCategory"  style = "width:150px"></select>

对于控制器：

[Authorize]
[HttpGet]
public ActionResult GetCategories()
{
    IQueryable categories = _db.categories;
    if (HttpContext.Request.IsAjaxRequest())
    {
        return Json(new SelectList(categories, "idCategory", "CategoryName"), JsonRequestBehavior.AllowGet);
    }
    return View(categories);
}

[Authorize]
[HttpGet]
public ActionResult GetSubCategories(int idCategory)
{
    IQueryable subcategories = _db.subcategories.Where(c => c.idCategory == idCategory);
    if (HttpContext.Request.IsAjaxRequest())
    {
        return Json(new SelectList(subcategories, "idsubCategory", "SubCategoryName"), JsonRequestBehavior.AllowGet);
    }
    return View(subcategories);
}

对于routeconfig：

routes.MapRoute("GetCat", "Budget/Categories/List/",
    new { controller = "Budget", action = "GetCategories" });

routes.MapRoute("GetSubCat", "Budget/SubCategories/List/{idCategory}",
    new { controller = "Budget", action = "GetSubCategories", idCategory = "" });

这是按钮的代码：

对于视图：

<script type="text/jscript">
jQuery(document).ready(function ($) {
    $('#add-bdetail').on('click', function () {
        jQuery.get('/Budget/AddBudgetDetail').done(function (html) {
            $('#bdetail-list').append(html);
        });
    });
});
 </script>

 <div> <input type="button" id="add-bdetail" value="Add row" /></div>

对于控制器：

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult AddBudgetDetail()
{
    return View(new List<budgetdetail>() {  new budgetdetail() });
}

任何想法如何解决这个问题？

映射路由未更新或与buidl级联下拉列表不同的方式？

0 个答案: