Question

enter image description here 我希望能够选择具有数值的下拉列表，并使用所选值来确定需要添加到实体表的对象列表的大小。我无法计算初始化列表。此外，每次用户选择不同的项目时，我都需要刷新部分视图。假设用户首先选择3并且部分包含三个div块，但稍后将选择更改为1，则partial应该只有一个块。我一直在尝试不同的方式，但没有运气。任何帮助将受到高度赞赏。

这是我到目前为止所做的事情： jQuery for ajax call：

$(function () {
    $('#drpSelect').change(function () {
        $.ajax({
            type: 'GET',
            url: '/EduKate/_Test',
            data: null,
            success: function (data) {
                $("#result").append(data);                    
            }
        });
        return false;    
    });
});

下拉：

    <select id="drpSelect">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>

Create.cshtml文件中的目标div

    //some other html helpers for other properties ...
//where I want the partial
        <div id="result"></div>

PartialView：_Course.cshtml

@model List<EduKate.DataModel.Course>

@foreach (var item in Model)
{
    <div class="course">
    @Html.LabelFor(model => item.CourseID)
    @Html.TextBoxFor(model => item.CourseID)

    @Html.LabelFor(model => item.Credits)
    @Html.TextBoxFor(model => item.Credits)

    @Html.LabelFor(model => item.Title)
    @Html.TextBoxFor(model => item.Title)
    </div>
}

ActionResult在“课程”视图上呈现部分视图：

 public ActionResult _Test(int value)
    {            
        EdukateViewModel edukateViewModel = new EdukateViewModel();
        //
        for(int i = 0; i < value; i++)
        {
            Course course = new Course();
            edukateViewModel.CourseList.Add(course);
        }
        return PartialView("_Course", edukateViewModel.CourseList);
    }

创建操作的获取和发布方法

 public ActionResult Create()
    {
        return View();
    } 

    [HttpPost]
    public ActionResult Create(EdukateViewModel edukateViewModel)
    {
        try
        {
            //List<course> property in viewmodel is always null
            edukateRepository.Insert(edukateViewModel);
            return RedirectToAction("Index");
        }
        catch(Exception exp)
        {
            return View();
        }
    }

Answer 1

div没有更新的原因是事件边界丢失了，因为我认为你替换了整个div，包括下拉代码..使用jquery`on'api来绑定事件

$(function () {
    $(document).on('change','#drpSelect',function () {
        $.ajax({
            type: 'GET',
            url: '/EduKate/_Test',
            data: null,
            success: function (data) {
                $("#result").append(data);                    
            }
        });
        return false;    
    });
});

使用ajax创建视图的MVC 3部分视图

1 个答案: