MVC - html.dropdownlist - 直接调用 javascript 或控制器/方法？

MVC - html.dropdownlist - calling javascript or controller/method directly?

提问by ZVenue

In my MVC application, I have a html.dropdownlist in my view. On selection changed - I want the value to be passed on to a method (that returns something like a list or a JsonResult) in the controller.

在我的 MVC 应用程序中，我的视图中有一个 html.dropdownlist。选择更改时 - 我希望将值传递给控制器​​中的方法（返回列表或 JsonResult 之类的内容）。

Q1: How do I do this?

Q1：我该怎么做？

 <%=Html.DropDownList("title", Model.Titleitems, "" )%>

Q2: Is this a good practice (having controller/method name in the view directly) or should I write a JavaScript function and call the appropriate controller/method from inside that JavaScript function? In that case, how can I write a Onchange or OnSelectionChanged event for the above html.dropdownlist control?

Q2：这是一个好的做法（直接在视图中使用控制器/方法名称）还是我应该编写一个 JavaScript 函数并从该 JavaScript 函数内部调用适当的控制器/方法？在这种情况下，如何为上述 html.dropdownlist 控件编写 Onchange 或 OnSelectionChanged 事件？

EDIT:

编辑：

par1 is the dropdownlist selected value I want to pass to this controller/method..

par1 是我想传递给这个控制器/方法的下拉列表选择值。

       public ActionResult GetMethod(string Par1)
        {
            //My code here 

            return Json(varValue, JsonRequestBehavior.AllowGet); 
        }

Now I have the dropdownlist on change taking me to a JavaScript function (as per marteljn suggestion) and in the JavaScript function, I have .ajax call specifying URL and type etc. that takes me to the controller/method code; but still not able to figure out how to pass the selected value to the controller?

现在我有了更改下拉列表，将我带到 JavaScript 函数（根据 marteljn 建议），在 JavaScript 函数中，我有 .ajax 调用指定 URL 和类型等，将我带到控制器/方法代码；但仍然无法弄清楚如何将选定的值传递给控制器​​？

回答by marteljn

Q2 is the answer to Q1. There are no events when using MVC like there are in web forms, so you will write some JavaScript to make a request back to the server.
There are (at least) two ways to go about it:

Q2 是 Q1 的答案。使用 MVC 时没有像 Web 表单那样的事件，因此您将编写一些 JavaScript 来向服务器发出请求。
有（至少）两种方法：

1. Inline Event Handler (not recommended)

   <%=Html.DropDownList("title", Model.Titleitems, new{@onchange = "YourJsFuncHere()"} )%>

2. The JQuery way,

   $("#title").bind("change",function(){
        //Your Code  
        //Use .on instead of bind if you are using JQuery 1.7.x or higher   
        //http://api.jquery.com/on/ 
   });
   

1. 内联事件处理程序（不推荐）

   <%=Html.DropDownList("title", Model.Titleitems, new{@onchange = "YourJsFuncHere()"} )%>

2. JQuery的方式，

   $("#title").bind("change",function(){
        //Your Code  
        //Use .on instead of bind if you are using JQuery 1.7.x or higher   
        //http://api.jquery.com/on/ 
   });
   

Edit - The AJAX Code

编辑 - AJAX 代码

$.ajax({
  "url": "/Controller/Action/" + $("#title").val(),
  "type": "get",
  "dataType" : "json",
  "success": function(data){
    //Your code here
    //data should be your json result
  }
});

Change GetMethod(string Par1)to GetMethod(string id)or change your default route to reflect the Par1parameter.

更改GetMethod(string Par1)到GetMethod(string id)或更改默认路由，以反映Par1参数。

Also, if its not hitting your break point its possible that 1) the AJAX request is not being initied (use firebug to see if it is) 2) Your routes are not configured properly (Look in Global.asax.cs, if you haven't moved the routing somewhere else.

此外，如果它没有达到您的断点，则可能是 1) 未启动 AJAX 请求（使用萤火虫查看是否启动）2）您的路由配置不正确（查看 Global.asax.cs，如果您有' 没有将路由移到其他地方。

回答by Shyju

$(function(){
  $("#title").change(function(){
   var selectedVal=$(this).val();
   $.getJSON("UserController/YourAction",{ id: selectedVal} , function(result ){
       //Now you can access the jSon data here in the result variable
   });

 });

});

Assuming you have an Action method called YourActionin your UserControllerwhich returns JSON

假设您调用YourAction了一个 Action 方法，UserController该方法返回 JSON

public ActionResult YourAction(int id)
{
  //TO DO : get data from wherever you want. 

   var result=new { Success="True", Message="Some Info"};
   return Json(result, JsonRequestBehavior.AllowGet); 

}