ASP.Net MVC 3下拉列表

Question

我正在开发一个ASP.Net MVC 3 Web应用程序。 我的一个“剃刀视图”包含一些文本框和一个下拉列表。 当用户从下拉列表中选择一个选项时，我需要一个局部视图或类似的东西出现在下拉列表下方，最好不要回发。

事实是，这不像部分视图的简单JQuery隐藏和显示那样简单，当用户从下拉列表中选择一个选项时，我需要将其选项发送到Controller中的方法，并执行一些操作。逻辑基于此选项，然后将一些数据返回到部分视图。

我实际上对AJAX并没有太多的经验，但是我感到这是我为了解决问题而需要使用的技术。

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

另外，如果有人知道我可以帮助的任何教程或代码片段，将不胜感激。

谢谢。

更新

我遵循了瑞安的回答，但是不幸的是我仍然遇到一些问题。 我创建了以下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变量中接收，并且可以随您所需的位置附加到dom（有关此信息，请参阅jQuery文档）。

Answer 3

这是一个常见的用例。

您需要做的是

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

在jQuery中，它是这样的：

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

该调用的第二个参数应根据您从表单中收集的数据来准备。 （如果您不知道如何，请学习javascript）