将表单从模态局部视图发布到具有routeprefix属性的不同控制器

时间:2016-09-06 21:25:18

标签: c# asp.net-mvc forms html.beginform

我有一个带有表单的局部视图 - 我从Home控制器启动此部分。

@using (Html.BeginForm("CloudContent","Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="container"></div>
    <input type="submit" name="PostMe" title="Submit" value="Submit Form" /> 
    @Html.HiddenFor(m => m.MyProperty);
    @Html.HiddenFor(m => m.SelectedIds);
}

我想将此表单发布到Files控制器,但文件控制器有一个路由前缀: [RoutePrefix("sth/api/v1/files")]

这导致我的表单操作为空。

似乎没有添加到命名路由,所以我不能使用beginrouteform。另外,我对应用程序的影响很小,所以最好以我的形式或部分视图处理......

我想在文件控制器中发布的方法:

[HttpPost]
[Route("getcloudcontent")]
public List<ConnectedFile> CloudContent(CloudFilesModel model)
{
    //do magic
}

1 个答案:

答案 0 :(得分:1)

<强>更新

这是另一个包含部分视图/子操作的示例:

<强> HomeController.cs:

using System.Web.Mvc;

public class HomeController : Controller
{
    [Route("~/")]
    public ActionResult Index()
    {
        return View();
    }

    [Route("ModalContent")]
    [ChildActionOnly]
    public ActionResult ModalContent()
    {
        return View();
    }
}

<强> FilesController.cs:

using System.Web.Mvc;

[RoutePrefix("sth/api/v1/files")]
public class FilesController : Controller
{
    [HttpPost]
    [Route("getcloudcontent")]
    public ActionResult CloudContent(string model)
    {
        return Content("test");
    }
}

<强>视图\主页\ Index.cshtml:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Show modal
    </button>

    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    @Html.Action("ModalContent")
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

<强>视图\主页\ ModalContent.cshtml:

@using (Html.BeginForm("CloudContent", "Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="container"></div>
    <input type="submit" name="PostMe" title="Submit" value="Submit Form" />
}

<强>的Global.asax.cs:

using System.Web.Mvc;
using System.Web.Routing;

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        RouteTable.Routes.MapMvcAttributeRoutes();
    }
}

结果HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Show modal
    </button>

    <div class="modal fade" id="myModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form action="/sth/api/v1/files/getcloudcontent" enctype="multipart/form-data" method="post">
                        <div id="container"></div>
                        <input type="submit" name="PostMe" title="Submit" value="Submit Form" />
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

您的代码存在一些不同之处。我运行了你的代码,它没有任何问题。

以下是代码:

<强> FilesController.cs:

using System.Web.Mvc;

namespace Controllers
{
    [RoutePrefix("sth/api/v1/files")]
    public class FilesController : Controller
    {
        [Route("")]
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [Route("getcloudcontent")]
        public ActionResult CloudContent(string model)
        {
            return Content("test");
        }
    }
}

<强> Index.cshtml:

@using (Html.BeginForm("CloudContent", "Files", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div id="container"></div>
    <input type="submit" name="PostMe" title="Submit" value="Submit Form" />
}

<强>的Global.asax.cs:

using System.Web.Mvc;
using System.Web.Routing;

public class MvcApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        RouteTable.Routes.MapMvcAttributeRoutes();
    }
}

当我转到http://localhost/sth/api/v1/files时,我看到以下HTML:

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
    <form action="/sth/api/v1/files/getcloudcontent" enctype="multipart/form-data" method="post">    <div id="container"></div>
    <input type="submit" name="PostMe" title="Submit" value="Submit Form" />
</form>
</body>
</html>

请注意,表单操作具有包含前缀的正确URL。