HTMLフォームからコントローラにデータを提供する方法

Question

私のウェブサイトから私のフォームデータを私の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（）に戻したいだけです。

Answer 1

フォームデータをコントローラに戻す必要があります。これは通常、フォームの送信アクションを使用して行われます。 、

HTMLフォームタグに

• お使いのコントローラメソッドを指すように、「アクション」属性を設定します。あなたはいくつかの方法でこれを達成することができます。 formタグにまだ
• 、=がで

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

、

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

は今、あなたは、コントローラに渡された値を得ることができます。