将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对象。