0

I am developing an ASP.Net MVC 3 Web Application. One of my Razor Views contains a few Textboxes and a Drop Down List. When the User selects an option from the Drop Down List, I need a Partial View, or something like this, to appear below the Drop Down List preferable without a post back.

The thing is, it isn't as easy as a simply JQuery Hide and Show for the Partial View, when the User selects an option from the Drop Down List, I need their option to be sent to a method in the Controller, perform some logic based on this option, and then return some data to the Partial View.

I haven't really got much experience with AJAX, but I get the feeling this is the technology I need to use in order to fulfil my problem.

Has anyone ever had to code anything similar to what I have described above? And if so, is AJAX what I need to use?

Also, if anyone knows of any tutorials or code snipets I could look at to help, that would be greatly appreciated.

Thanks.

UPDATE

I have followed Ryan's answer, but unfortunately I am still having some problems. I have created the following JavaScript file which is then referenced in my View

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

});

View

    <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>

My Controller then looks like this

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

    LocumEntities context = new LocumEntities();

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

        return View(test);
    }
}

However, my method 'SomePartialView' never gets hit. Does anyone know why?

Thanks.

4

3 回答 3

6

是的，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);
    }
}

那里有一个交互式局部视图，其中填充了下拉列表中的值。

于 2012-07-10T09:41:52.173 回答
2

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

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

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

在change您的下拉事件中，将所选值发送到您想要的控制器操作，该操作会将其传递给局部视图并返回呈现的 html。html 是在datavar 中接收的，并且可以附加到 dom 中，无论您想要它在哪里（参见 jQuery 文档）。

于 2012-07-10T09:43:13.860 回答
1

这是一个常见的用例。

你需要做的是

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

在 jQuery 中，它是这样的：

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

此调用的第二个参数应根据您从表单中收集的数据准备。（如果你不知道怎么做，那就学习 javascript）

于 2012-07-10T09:42:22.770 回答