使用Ajax創建視圖的MVC 3 Partialview

Question

我希望能夠選擇一個帶有數字值的下拉列表，並使用選定的值來確定需要添加到實體表中的對象列表的大小。 我無法獲得計數以初始化列表。 另外，每次用戶選擇其他項目時，我都需要刷新partialview。 假設如果用戶首先選擇3，並且partial包含三個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;    
    });
});