Wie Daten vom HTML-Formular zu Controller

Question

bereitstellen Ich habe Probleme zu verstehen, wie meine Formulardaten von meiner Website zurück zu meinem Controller übergeben und diesen Code für eine robustere Anwendung verwenden. Ich habe ein Formular auf meiner Indexseite, wo es nur radio buttons und checkboxes ist. Je nachdem, was ausgewählt ist, möchte ich diese Daten an meinen Controller zurückgeben, wo die Generierung eines Azure SAS stattfindet.

---

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

Wie Sie sehen können, habe ich ein Formular mit einigen Optionsfeldern und Kontrollkästchen in meiner HTML-Seite. Ich möchte diese Daten nur an meinen Controller zurückgeben, wo sie die Azure-Instanz erstellen und ein SAS-Token erstellen und dann zurück an die View() senden.

Answer 1

Sie müssen die Formulardaten an Ihren Controller zurücksenden, was in der Regel mithilfe einer Sendeaktion für das Formular geschieht. Sie können dies in ein paar Möglichkeiten erreichen:

HTML

• Auf dem Formular-Tag, stellen Sie die "action" -Attribut auf Ihre Controller-Methode zu zeigen.
• noch auf dem Formular-Tag, stellen Sie die "Methode" Attribut "post"
• Änderung der Schaltfläche Form von type = Taste =

Javascript

• einzutippen einreichen Ihre Button-Klick-Methode hinzu:

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

Sie müssen auch die Methode Ihres Controllers ändern, um die Parameter zu akzeptieren, die Ihr Formular zurückgibt. Es gibt ein gutes Beispiel, wie all dies in MVC 5 hier getan wird: http://weblogs.asp.net/scottgu/asp-net-mvc-preview-5-and-form-posting-scenarios

Answer 2

Sie können den folgenden Code verwenden, um die erforderlichen Parameter von HTML zu Controller-Post-Aktion übergeben.

<form action="" id="sasTokenOptions" method="post"> 
... 
</form> 

In Schaltfläche Click-Handler,

$("#btn-genSas").click(function() { 
     document.getElementById("#sasTokenOptions").action="/YourControllerName/GenerateSas"; 
document.getElementById("#sasTokenOptions").submit(); 
     $(".sasToken").show(); 
     //generate a SAS and display it to screen 
    }); 

In Controller-Aktion-Methode,

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

Jetzt können Sie die übergebenen Werte in der Steuerung erhalten.