ASP.Net MVC 3下拉列表

Question

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

问题是,当用户从下拉列表中选择一个选项时,它并不像简单的JQuery Hide and Show for Partial View那样容易,我需要将它们的选项发送到Controller中的方法,执行一些基于此选项的逻辑,然后将一些数据返回到部分视图.

我对AJAX没有太多经验,但我觉得这是我需要使用的技术才能解决我的问题.

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

此外,如果有人知道任何教程或代码snipets我可以看到帮助,这将不胜感激.

谢谢.

UPDATE

我跟着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);
    }
}

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