如何从 HTML 表单向控制器提供数据答案

【问题标题】：How to provide data from HTML form to Controller如何从 HTML 表单向控制器提供数据
【发布时间】：2016-04-26 21:11:37
【问题描述】：

我无法理解如何将表单数据从我的网站传回我的Controller 并将该代码用于更强大的应用程序。我的索引页面上有一个表单，其中只有 radio buttons 和 checkboxes 根据选择的内容，我想将该数据传递回我的控制器，在该控制器中正在生成 Azure SAS。

HTML

<div class="container">
<form id="sasTokenOptions">
    <div class="row">
        <div class="col-xs-6">
            <div class="card">
                <div class="card-title">SAS Token Duration</div>
                <p></p>
                <p>Please select a the duration of the SAS Token.</p>
            </div>

            <div class="container">
                <div class="radio" id="">
                    <label><input type="radio" name="optradio" value="1" />1 hour</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="24" />24 hours</label>
                </div>
                <div class="radio">
                    <label><input type="radio" name="optradio" value="720" />30 days</label>
                </div>
            </div>
        </div>

        <div class="col-xs-6">

            <div class="card">
                <div class="card-title">SAS Token Access Permission</div>
                <p></p>
                <p>Please select the SAS Token's permission.</p>
            </div>
            <div class="container">
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="1">Read</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="2">Write</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="8">List</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="optcheck" value="4">Delete</label>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-6">
        <button type="button" class="btn btn-primary btn-sm" id="btn-genSas">Generate SAS Token</button>
    </div>
</form>
</div>

JavaScript

$(document).ready(function () {

$('input[name=optradio]').on('change', function () {
    alert($('input[name=optradio]:checked', '#sasTokenOptions').val());
})

$('input[name=optcheck]').on('change', function () {
    var result = null; 
    $('input[name=optcheck]:checked', "#sasTokenOptions").each(function () {

        switch ($('input[name=optcheck]:checked', "#sasTokenOptions").val()) {
            case( $('input[name=optcheck]:checked', "#sasTokenOptions") == 1 || "1"):
                result = "Read";
                break;
            case ($('input[name=optcheck]:checked', "#sasTokenOptions") == 2 || "2"): 
                result = "Write";
                break;
            case ($('input[name=optcheck]:checked', "#sasTokenOptions") == 8 || "8"):
                result = "List";
                break;
            case ($('input[name=optcheck]:checked', "#sasTokenOptions") == 4 || "4"):
                result = "Delete";
                break;
        }

        alert(result);
    })
});

$("#btn-genSas").click(function () {
    $(".sasToken").show();
    //generate a SAS and display it to screen
});

});

控制器

    [HttpPost]
    public ActionResult GenerateSas()
    {

        string connectionString = "DefaultEndpointsProtocol=https;AccountName=;AccountKey=;";

        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(connectionString);

        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

        CloudBlobContainer container = blobClient.GetContainerReference("publiccontainer");

        var sasToken = container.GetSharedAccessSignature(new SharedAccessBlobPolicy()
        {
            Permissions = SharedAccessBlobPermissions.Read
        });

        return View();
    }

如您所知，我的 HTML 页面中有一些带有单选按钮和复选框的表单。我只想将该数据返回到我的控制器，它正在创建 Azure 实例并创建一个 SAS 令牌，然后将其返回给 View()。

【问题讨论】：

在GenerateSas() 控制器中，我看不到任何获取表单值的代码，例如Request.Form["optradio"];

标签： javascript c# jquery html azure

【解决方案1】：

您需要将表单数据发布回您的控制器，这通常使用表单上的提交操作来完成。您可以通过以下几种方式完成此操作：

HTML

在表单标签上，将“action”属性设置为指向您的控制器方法。
还是在form标签上，把“method”属性设置为“post”
将表单的按钮从 type=button 更改为 type=submit

Javascript

在您的按钮单击方法中，添加：

$('#sasTokenOptions').submit();

您还需要更改控制器的方法以接受表单回传的参数。这里有一个很好的例子来说明如何在 MVC 5 中完成所有这些操作：http://weblogs.asp.net/scottgu/asp-net-mvc-preview-5-and-form-posting-scenarios

【讨论】：

【解决方案2】：

您可以使用下面的代码将所需的参数从 html 传递到控制器发布操作。

<form action="" id="sasTokenOptions" method="post">
...
</form>

在按钮点击处理程序中，

    $("#btn-genSas").click(function () {
         document.getElementById("#sasTokenOptions").action="/YourControllerName/GenerateSas";
document.getElementById("#sasTokenOptions").submit();
        $(".sasToken").show();
        //generate a SAS and display it to screen 
    });

在控制器动作方法中，

[HttpPost]
    public ActionResult GenerateSas(string optradio, string optcheck)
    {

        string connectionString = "DefaultEndpointsProtocol=https;AccountName=;AccountKey=;";

        CloudStorageAccount storageAccount = CloudStorageAccount.Parse(connectionString);

        CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

        CloudBlobContainer container = blobClient.GetContainerReference("publiccontainer");

        var sasToken = container.GetSharedAccessSignature(new SharedAccessBlobPolicy()
        {
            Permissions = SharedAccessBlobPermissions.Read
        });

        return View();
    }

现在您可以在控制器中获取传递的值。

【讨论】：