Question

我无法理解如何将表单数据从我的网站传回我的Controller，并使用该代码获得更强大的应用程序。我的索引页面上有一个表单，其中所有表单都是radio buttons和checkboxes根据所选内容，我希望将该数据传递回我的Controller，在那里发生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页面中有一些单选按钮和复选框。我只想将该数据返回给我的Controller，在那里它创建Azure实例并创建一个SAS令牌，然后将其返回给View（）。

Answer 1

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

HTML

在表单标记上，将“action”属性设置为指向控制器方法。
仍然在表单标记上，将“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

Answer 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 
    });

在Controller动作方法中，

[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();
    }

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

如何从HTML表单向Controller

2 个答案: