javascript - 如何从 HTML 表单向 Controller 提供数据

Question

我无法理解如何将表单数据从我的网站传递回我的 Controller 并使用该代码构建更强大的应用程序。我的索引页面上有一个表单，其中只有单选按钮和复选框根据所选内容，我想将该数据传递回我的 Controller ，在 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
});

});

Controller

    [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 ，在该 Controller 中创建 Azure 实例并创建 SAS token ，然后将其返回到 View()。

Answer 1

您需要将表单数据发布回 Controller ，这通常是使用表单上的提交操作来完成的。您可以通过多种方式实现此目的:

HTML

• 在表单标记上，将“action”属性设置为指向您的 Controller 方法。
• 仍然在表单标签上，将“method”属性设置为“post”
• 将表单按钮从 type=button 更改为 type=submit

Javascript

• 在按钮点击方法中添加:

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

您还需要更改 Controller 的方法以接受表单发回的参数。这里有一个很好的示例，说明如何在 MVC 5 中执行所有这些操作: http://weblogs.asp.net/scottgu/asp-net-mvc-preview-5-and-form-posting-scenarios