多个提交按钮,具有不同的操作和控制器,但共享输入名称/值

时间:2012-09-25 18:38:47

标签: c# asp.net-mvc c#-4.0 razor angularjs

编辑:阅读问题的底部,看看我的确做了什么。我接受了不同的答案,但因为我的解决方案需要AngularJS。


我正在使用C#4.0和MVC 3 / Razor。我更喜欢利用框架的现有功能而不是创建自己的帮助程序类。以下是我正在做的事情,简化:

这是我的模特:

MyModel.cs

public class MyModel
{
    public string Name { get; set; }
    public int ID { get; set; }
}

我认为,到目前为止:

Index.cshtml

@model IEnumerable<MyModel>

Please select a Model.

<select name="id">
    @foreach (var m in Model)
    {
        <option value="@(m.ID)">@(m.ID) - @(m.Name)</option>
    }
</select>

我的控制员:

MyController.cs

public class MyController : Controller
{
    public ActionResult Index() { /* ... */ }
    public ActionResult Display(int id) { /* ... */ }
    public ActionResult Delete(int id) { /* ... */ }
    public ActionResult Edit(int id) { /* ... */ }
}

在我看来,我想要三个提交按钮,每个按钮链接到不同的控制器/动作,一个用于编辑,删除和显示。但是我希望用户选择传递的ID(通过GET)。我该怎么做?

我知道我可以制作新的控制器操作,其唯一目的是根据value类型submit元素的input来确定要选择的三个中的哪一个,但是这种方法对我来说似乎很难看;我想绕过那一步。理想情况下,我想要像:

@using (Html.BeginForm("", "", FormMethod.Get))
{
    <select name="id">
        @foreach (var m in Model)
        {
            <option value="@(m.ID)">@(m.ID) - @(m.Name)</option>
        }
    </select>

    @Html.SubmitButton("Edit", "My")
    @Html.SubmitButton("Delete", "My")
    @Html.SubmitButton("Display", "My")
}

但我在Html中找不到任何类似的方法签名。


修改

这就是我最终的目标。它使用名为AngularJS的JavaScript库,但不需要额外的JavaScript管道。它只是有效。

@model IEnumerable<MyModel>
<html>
    <head>
        <script type="text/javascript" src="../../Scripts/angular.js"></script>
    </head>
    <body ng-app>
        <select ng-model="ID">
            @foreach (var m in Model)
            {
                <option value="@(m.ID)">@(m.ID) - @(m.Name)</option>
            }
        </select>

        @{
            var forms = new[] 
            {
                new { ActionName = "Display", ControllerName = "My" },
                new { ActionName = "Edit", ControllerName = "My" },
                new { ActionName = "Delete", ControllerName = "My" }
            };

            foreach (var form in forms)
            {
                using (Html.BeginForm(form.ActionName, form.ControllerName, FormMethod.Get))
                {
                    <input type="submit" value="@(form.ActionName)" ng-disabled="ID == null"/>
                    <input type="hidden" name="id" value="{{ID}}"/>
                }
            }
        }

    </body>
</html>

2 个答案:

答案 0 :(得分:2)

您可以(我有)使用属性执行此操作。在主题上尝试了几个different variations后,我决定使用这个:

http://blog.ashmind.com/2010/03/15/multiple-submit-buttons-with-asp-net-mvc-final-solution/

它基本上根据您提交的名称进行路由。对于你的情况:

 <input type="submit" name="delete" value="Delete" />
 <input type="submit" name="Edit" value="Edit" />

和控制器

public class MyController : Controller {
    [HttpParamAction]
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Edit(int id) {
    }

    [HttpParamAction]
    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult Delete(int id) {

    }
}

属性

  public class HttpParamActionAttribute : ActionNameSelectorAttribute {
        public override bool IsValidName(ControllerContext controllerContext,  
                                       string actionName, MethodInfo methodInfo) 


 {

            if (actionName.Equals(methodInfo.Name,  
                                  StringComparison.InvariantCultureIgnoreCase))
                return true;

            if (!actionName.Equals("Action", 
                                   StringComparison.InvariantCultureIgnoreCase))
                return false;

            var request = controllerContext.RequestContext.HttpContext.Request;
            return request[methodInfo.Name] != null;
        }
    }

答案 1 :(得分:1)

对于EditDisplay,显然,您不需要提交表单。你可以使用GET。因此,Html.ActionLink辅助方法可用于显示一个链接,该链接使用户可以使用屏幕(操作方法)。

要从链接的下拉列表中传递所选项目的值,您可以在click事件中使用java脚本获取所选值,并将其发送到action方法。

@Html.ActionLink("Edit","Edit","YourController",null ,new {@class="lnk"})
@Html.ActionLink("Display","Display","YourController",null ,new {@class="lnk"})
@Html.ActionLink("Delete","Delete","YourController",null ,new {@class="lnk"})

现在javascript捕获这些链接的点击事件

$(function(){
  $("a.lnk").click(function(e){
     e.preventDefault();
     var targetUrl=$(this).attr("href");
     var selectedVal=$("#YourDropdownID").val();
     targetUrl=targetUrl+"?id="+selectedVal;
     window.location.href=url;
  });
});

对于删除,您可以显示一个链接,该链接将用户带到确认屏幕,并且您可以在其中设置提交按钮,该按钮会执行 HTTPPOST 提交。

您可以自定义CSS,使a标记看起来像提交按钮

此外,不要使用视图中的foreach循环渲染下拉列表。在MVC中已经有HTML Helper方法可以做到这一点。你应该总是利用它。 Here是解释如何执行此操作的答案。