Question

我正在开发一个ASP.Net MVC 3 Web应用程序。我的一个Razor Views包含一些Textbox和一个下拉列表。当用户从下拉列表中选择一个选项时，我需要一个部分视图或类似的东西，以便在没有回复的情况下显示在下拉列表下方。

问题是，它不像简单的JQuery隐藏和显示部分视图那么容易，当用户从下拉列表中选择一个选项时，我需要将它们的选项发送到Controller中的方法，根据此选项执行一些逻辑，然后将一些数据返回到部分视图。

我对AJAX没有多少经验，但我觉得这是我需要使用的技术来解决我的问题。

有没有人必须编写类似于我上面描述的代码？如果是这样，我需要使用AJAX吗？

此外，如果有人知道我可以帮助的任何教程或代码snipets，那将非常感激。

感谢。

更新

我跟着Ryan的回答，但不幸的是我仍然遇到了一些问题。我创建了以下JavaScript文件，然后在我的视图中引用

$(document).ready(function () {

$("#myDDL").change(ChangeEventOfDDL);

function ChangeEventOfDDL(){
var dropDownValue = $('#myDDL').val();
//alert(dropDownValue);
$.ajax({ type: "GET",
       url: '@Url.Action("SomePartialView","testAjax")',
       data: {
           id: dropDownValue
       },
       success: function(data) {
             $('#someDivToLoadContentTo').html(data);
       }
    });
}

});

查看

    <select id="myDDL">
    <option></option>
    <option value="1">F1</option>
    <option value="2">F2</option>
    <option value="3">ST1</option>
    <option value="4">ST2</option>
    </select>


<div id="someDivToLoadContentTo">

</div>

我的控制器看起来像这样

public class testAjaxController : Controller
{
    //
    // GET: /testAjax/

    LocumEntities context = new LocumEntities();

    public ActionResult SomePartialView(int id)
    {
        var test = "Hello World";

        return View(test);
    }
}

然而，我的方法'SomePartialView'永远不会被击中。有谁知道为什么？

感谢。

Answer 1

是的Ajax在这里最容易使用。有很多很好的Ajax教程，只要记住Ajax所做的实际上是后台POST，所以你可以做你通常用MVC做的一切，除了在现有的页面中。

我让这个工作的方式是让你的代码像这样：

public class SomeController{
    public ActionResult SomePartialView(){
         // Do some logic
         return View("SomePartial");
    }
}

你的Ajax会是这样的：

function ChangeEventOfDDL(){
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

我希望至少有一点帮助。

最重要的是使用Ajax，您可以向函数添加数据对象，该函数作为查询字符串传递。这意味着您可以使用ajax轻松地从页面发送值。使用上面的示例，Javascript将是：

function ChangeEventOfDDL(){
    var dropDownValue = $('#ddl').val();
    $.ajax({
           url: '@Url.Action("SomePartialView","Some")',
           data: {
               id: dropDownValue
           }
           success: function(data) {
                 $('#someDivToLoadContentTo').html(data);
           }
    });
}

Id值与MVC类中方法的参数相关联：

public class SomeController{
    public ActionResult SomePartialView(int id){
         // Do some logic 
         var model = MakeModelWithSupplierId(id);
         return View("SomePartial",model);
    }
}

并且您有一个交互式部分视图，其中已填充了下拉列表中的值。

Answer 2

由于控制器也可以返回部分视图，因此您可以执行以下操作：

$('#idofyourdropdown').change(function () {
 var theValue = $(this).val();

  $.post('@Url.Action("Action","Controller")', {nameOfParameter: theValue, function(data) {
     $('#divWhereYouWantToAttachData').html(data);
  });
});

在下拉菜单的change事件中，将所选值发送到所需的控制器操作，该操作会将其传递给部分视图并返回呈现的html。 html在data var中收到，可以附加到dom，无论你想要它（请参阅jQuery文档）。

Answer 3

这是一个常见的用例。

您需要做的是

创建一个可以获取所需参数的控制器方法（在您这样做之前阅读MVC模型绑定）
编写javascript，它将从您的表单中获取您想要的数据，并调用您的新控制器方法并呈现下面的结果

在jQuery中它是这样的：

$("#yourDIV").load('/area/controller/method', { property1: 'asasd', property2: 'asdasdadfa'})

此调用的第二个参数应根据您从表单中获取的数据进行准备。（如果你不知道如何，那么学习javascript）

ASP.Net MVC 3下拉列表

3 个答案: