从jQuery / javascript执行控制器操作

时间:2013-04-15 14:55:30

标签: javascript jquery asp.net-mvc

我的视图中有一个ListBox - 当我从列表框中选择一个项目时,我想调用一个控制器方法,对该值执行查找,然后用这些值重绘页面。

我的列表框代码和我的jQuery代码如下所示:

@using (Html.BeginForm())
{
  ...
  <h3>Environments</h3>
  @Html.ListBox("Environment",
                 new SelectList(Model.Environments), 
                 new {@id="environmentsListbox"})           
  ...
}

<script>
    $(document).ready(function () {
        $('#environmentsListbox').click(function () {
            var selected = $('#environmentsListbox').find(":selected").text();
            $.ajax({
               url: '@Url.Action("Index")',
               data: { selectedEnvironment: selected },                
               success: function(data) {
                   ---- What to do here?
               }
           });
        });
   });   
</script>

控制器方法如下所示:

 public ActionResult Index(string selectedEnvironment)
 {
     // code omitted for brevity...
     var frameworkConfig = GetInfo(selectedEnvironment);

     return View(frameworkConfig);
 }

调用正常,所选文本确实使其成为控制器方法....但是我如何处理结果?我正在寻找与普通MVC上下文(非js)中使用的@Html.Action("Index", selectedEnvironment)相当的东西。我在data变量中返回了View代码,有没有办法用该值重新加载页面?

我在这篇文章中看到了答案:How to call URL action in MVC with javascript function?并且非常接近我需要做的事情,但是来自该控制器方法的结果视图代码被推送到包含的div标签,而不是当前视图

1 个答案:

答案 0 :(得分:1)

您可以使用jQuery的.html()函数。在你的成功回调中,做这样的事情:

<script>
    $(document).ready(function () {
        $('#environmentsListbox').click(function () {
            var selected = $('#environmentsListbox').find(":selected").text();
            $.ajax({
               url: '@Url.Action("Index")',
               data: { selectedEnvironment: selected },                
               success: function(data) {
                   $('#container').html(data);
               }
           });
        });
   });   
</script>

您希望确保从控制器返回的视图具有您需要的标记(没有任何布局代码等)。直接在浏览器中访问该URL以查看它返回的内容。