Как предоставить данные из 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

• В виде тега, установите «действие» атрибут, чтобы указать на метод контроллера.
• еще на виде тега, установите "метод" атрибут кнопки форме от типа "пост"
• изменить кнопку = ввести = отправить

Javascript

• в ваша кнопка метод щелчок, добавьте:

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

Вам также необходимо изменить способ вашего контроллера, чтобы принять параметры, которые отправляет ваша форма. Вот хороший пример того, как все это сделать в MVC 5 здесь: http://weblogs.asp.net/scottgu/asp-net-mvc-preview-5-and-form-posting-scenarios

Answer 2

Вы можете использовать приведенный ниже код, чтобы передать требуемые параметры из html в post post.

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

Теперь вы можете получить переданные значения в контроллер.