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

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

问题描述:

enter image description here我希望能够选择带有数字值的下拉列表,并使用所选值确定需要添加到实体表的对象列表的大小。我一直无法获得计数来初始化列表。此外,我需要每次用户选择不同的项目时刷新partialview。假设如果用户首先选择了3,并且部分包含三个div块,但是稍后将选择改为1,则该部分应该只有一个块。我一直在尝试不同的方式,但没有运气。任何帮助将不胜感激。MVC 3使用ajax创建视图的部分视图

这是我到目前为止已经做的: 的jQuery的Ajax调用:

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

下拉:在Create.cshtml

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

目标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); 
    } 

Get和Post方法的创建操作

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(); 
     } 
    } 
+1

(1)它不工作吗? (2)'EduKate'是你的*控制器的名字?还是你的整个应用的名字? (3)'_Test'需要一个你没有发送的'int'参数。尝试在AJAX URL处追加选定的值,例如'/ EduKate/_Test/x' – 2012-07-25 05:21:07

+0

(1)它不按我想要的方式工作。我可以用一个对象而不是列表强制键入我的部分,然后我可以添加一行。 (2)控制器是EduKateController(整个应用程序也是EduKate)。 (3)你是对的,我没有发送选定的价值。我添加url:'/ EduKate/_Test /'+ this.value并再次尝试(谢谢+1) – antar 2012-07-25 05:42:48

+0

不。请在尝试 – 2012-07-25 05:44:52

之所以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;  
    }); 
}); 
+0

的代码仍然相同。没有运气 – antar 2012-07-25 07:03:55