【问题标题】:How to postback to a controller function when a value is selected from dropdown从下拉列表中选择值时如何回发到控制器函数
【发布时间】:2012-04-02 18:35:24
【问题描述】:

我在视图上创建了一个下拉列表并显示了一个列表。

@Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.List, "ID", "Name"))

当用户从下拉列表中选择值时,我想刷新页面。 我不知道如何在不单击任何按钮的情况下将选择事件从下拉列表映射到控制器功能。

在视图加载时,有一个控制器函数正在用列表填充视图。

public ActionResult Populate()
{
  List<string> list = get it from sql server
  ViewModel viewModel = new ViewModel();
  viewModel.list = list;
   return view();
}

但是如何调用控制器函数,它将所选值作为 Id 并检索数据并使用结果刷新页面。

【问题讨论】:

    标签: c# html asp.net-mvc asp.net-mvc-3 razor


    【解决方案1】:

    如果没有 javascript 帮助,您将无法做到这一点。只需绑定选择事件并发送表单或发出 ajax 请求。

    使用 jQuery:

    $('#yourDropDownId').change(function(){
        $('#yourFormId').submit();
    });
    

    或者,如果您需要提交的 ajax 调用,请使用 $.post$.get

    【讨论】:

    • 你能分享一个例子……或与此相关的博客文章吗?
    【解决方案2】:

    将此添加到您的布局中:

    <script type="text/javascript">
        $(document).ready(function () {
            $('select:[autopostback=true],input[type=checkbox]:[autopostback=true],input[type=radio]:[autopostback=true]').live('change',function () {
                $(this).closest('form').submit();
            });
        });
    </script>
    

    在你看来:

    @using (Html.BeginForm())
    {
        @Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.List, "ID", "Name"), new { autopostback = "true" })
    }
    

    当您更改下拉列表的选择时,您的下拉列表所在的表单将被提交。如果该表单的操作结果是同一页面,它将重新加载任何正在更新的内容

    【讨论】:

      【解决方案3】:
      $(document).ready(function() {
         $("#ddl").change(function() {
             var strSelected = "";
             $("#ddl option:selected").each(function() {
                 strSelected += $(this)[0].value;
             });
             var url = "/Home/MyAction/" + strSelected;
      
             $.post(url, function(data) {
                 // do something if necessary
             });
         });
      });
      

      <%=Html.DropDownListFor(m => m.SelectedId, new SelectList(Model.List, "ID", "Name"), new { onchange="this.form.submit();" })%>
      

      【讨论】:

      • 如果您决定稍后增强功能,此方法可能很容易添加 ajax 行为。
      【解决方案4】:

      这很简单。在您的 javascript 中,您有:

       $(document).ready(function () {
                  $('#SelectedId').change(function () {
                      var id = $(this).val();
                      $.getJSON("/YourController/YourAction", { id: id},
                      function (data) {               
                          $("#SomeDivSelector").html(data);
                      });
                  });
      
              });
      

      您的控制器应如下所示:

      [AcceptVerbs(HttpVerbs.Get)]
      public JsonResult YourAction(int id)
      {
        //do something
        return Json(ControlToString("~/Views/YourController/YourView.cshtml", yourModelWithData), JsonRequestBehavior.AllowGet);
      }
      

      并且定义了 ControlToString:

       private string ControlToString(string controlPath, object model)
              {
                  //CshtmlView control = new CshtmlView(controlPath);
                  RazorView control = new RazorView(this.ControllerContext, controlPath, null, false, null);
      
                  this.ViewData.Model = model;
      
                  using (System.Web.UI.HtmlTextWriter writer = new System.Web.UI.HtmlTextWriter(new System.IO.StringWriter()))
                  {
                      control.Render(new ViewContext(this.ControllerContext, control, this.ViewData, this.TempData, writer), writer);
      
                      string value = ((System.IO.StringWriter)writer.InnerWriter).ToString();
                      return value;
                  }
              }
      

      问候。

      【讨论】:

        【解决方案5】:

        您想要应用的内容,与您所使用的技术概念相反。 MVC 基于 ASP.NET 技术,但执行方式不同。 MVC 不使用更好的 ASP.NET 生命周期,因此,不会“回发”。 MVC - 基于架构模式的根,允许分离任何系统的不同层,因此对当前技术的开发方法是完全不同的。进一步了解 MVC:http://www.asp.net/mvc

        如果您仍想实现您的问题,您可以使用 ASP.NET 概念并使用 DropDownList 控件的 AutoPostback 属性。

        【讨论】:

          猜你喜欢
          • 2014-08-22
          • 1970-01-01
          • 2014-10-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多