Passing HTML form data from View to Controller in ASP.NET MVC

Question

I am pretty new to JavaScript and I am trying to get my form data and built it into a JSON object. Then make an AJAX call to get the form's results and pass display the form results within a ajax.done() function. Right now I have the values of the form data just being "alerted". How do I go about creating a JSON Object and adding it to my AJAX call?

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

Similar to http://stackoverflow.com/questions/17370062/posting-json-data-via-jquery-to-asp-net-mvc-4-controller-action — abhinav pratap, Apr 27 '16 at 14:56

score 2 · Accepted Answer · answered Apr 27 '16 at 15:00

I would create the JSON object like this:

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

Then all you would need to do is set the JSON objects properties based on the selected values of your radio buttons/checkboxes in your change events. i.e.

data.optradio = $('input[name=optradio]:checked', '#sasTokenOptions').val();

The data that you are passing into your ajax call would be your object that you set and sent up to the server.

score -1 · Answer 2 · answered Apr 27 '16 at 14:52

Create public shared method (VB) or public static method (C#) using the WebMethod directive. This will make your method accessible like a web service. Then use jQuery to make the ajaxCall pointing to your webservice. In that ajax call you will provide the data in between curly brackets...this will be converted to a JSON object.

Passing HTML form data from View to Controller in ASP.NET MVC

2 Answers2