ASP.NET MVCのビューからコントローラへのHTMLフォームデータの受け渡し

Question

JavaScriptにはかなり新しく、フォームデータを取得しようとしており、JSON objectに組み込みました。 AJAXを呼び出してフォームの結果を取得し、フォーム結果をajax.done()関数内に表示します。今私はフォームデータの値を "警告"しています。 JSON Objectを作成してAJAXコールに追加するにはどうすればよいですか？

---

HTML

<div class="container"> 
<form action="" id="sasTokenOptions" method="post"> 
    <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

$(".sasToken").hide(); 

$(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() { 
    $.ajax({ 
     url: "/GenerateSasController/GenerateSas", 
     method: post, 
     data: data 
    }).done(function (responce) { 
     var token = FormData(responce); 
     $("#SasToken").text(token).show(); 
    }); 
    $(".sasToken").show(); 
    //generate a SAS and display it to screen 
}); 

}); 

コントローラ

public class GenerateSasController : Controller 
{ 
    // GET: GenerateSas 
    public ActionResult Index() 
    { 
     return View(new GenerateSasViewModel()); 
    } 

    [HttpPost] 
    public ActionResult GenerateSas(string optradio, string optcheck) 
    { 
     //if (ModelState.IsValid) 
     //{ 
     // var connection = new GenerateSas() 
     // { 
     //  SasDuration = viewModel.SASDuration, 
     //  SasPrivilages = viewModel.SASPermissions 
     // }; 
     //} 

     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() 
     { 
      //cast the enum to an int 

      Permissions = SharedAccessBlobPermissions.Read 
     }); 

     return View(); 
    } 
} 

Answer 1

私はこのようなJSONオブジェクトを作成します。次に

var data = { 
    optradio: "", 
    optcheck: "", 
} 

をあなたがする必要があるだろう、すべてはJSONがあなたの変更イベントであなたのラジオボタン/チェックボックスの選択された値に基づいて、プロパティをオブジェクトに設定されています。すなわち

data.optradio = $('input[name=optradio]:checked', '#sasTokenOptions').val(); 

ajax呼び出しに渡すデータは、設定してサーバーに送信したオブジェクトです。

Answer 2

WebMethodディレクティブを使用してパブリック共有メソッド（VB）またはパブリック静的メソッド（C＃）を作成します。これにより、メソッドはWebサービスのようにアクセス可能になります。次に、jQueryを使用してajaxCallがWebサービスを指し示すようにします。そのajax呼び出しでは、中括弧で囲んでデータを提供します...これはJSONオブジェクトに変換されます。