Passing HTML-Formulardaten aus der Ansicht Controller in ASP.NET MVC

Question

Ich bin ziemlich neu in JavaScript und ich versuche, meine Daten zu erhalten und baute es in ein JSON object. Dann machen Sie einen AJAX Aufruf des Formulars Ergebnisse zu erhalten und die Form Ergebnisse innerhalb einer ajax.done() Funktion übergeben anzuzeigen. Im Moment habe ich die Werte der Formulardaten gerade "alarmiert". Wie gehe ich über ein JSON Object zu schaffen und es zu meinem AJAX Gespräch hinzugefügt wird?

---

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

}); 

-Controller

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

würde ich das JSON-Objekt wie folgt erstellen:

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

Dann alles, was Sie eingestellt tun müssen, würde die JSON-Eigenschaften auf den ausgewählten Werten Ihrer Radiobuttons/Kontrollkästchen in der Änderungsereignisse basierte Objekte. Die

Die Daten, die Sie in Ihren Ajax-Aufruf übergeben, wäre Ihr Objekt, das Sie festlegen und an den Server senden.

Answer 2

erstellen öffentliches gemeinsames Verfahren (VB) oder öffentliche statische Methode (C#), um die WebMethod Direktive. Dadurch wird Ihre Methode wie ein Webdienst zugänglich gemacht. Verwenden Sie dann jQuery, um den AjaxCall auf Ihren Webservice zu verweisen. In diesem Ajax-Aufruf werden Sie die Daten zwischen geschweiften Klammern angeben ... dies wird in ein JSON-Objekt konvertiert.