將ASP.NET MVC中的HTML表單數據傳遞給控制器​​ASP.NET MVC

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對象。