i must convert data form in JSON format to send to a webAPI.

I have a popupform called from page1:

```
<form id="popupForm" method="post" class="form-horizontal" action="">
<div class="form-group">
    <label class="col-sm-4 control-label" for="Nome">Nome</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Nome" name="Nome" placeholder="Nome" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Cognome">Cognome</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Cognome" name="Cognome" placeholder="Cognome" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Operatore">Operatore</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Operatore" name="Operatore" placeholder="Operatore" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Username">Username</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Username" name="Username" placeholder="Username" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Password">Password</label>
    <div class="col-sm-5">
        <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="GruppoDiLavoro">Gruppo Di Lavoro</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="GruppoDiLavoro" name="GruppoDiLavoro" placeholder="GruppoDiLavoro" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="ProfiloFunzionalità">Profilo Funzionalità</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="ProfiloFunzionalità" name="ProfiloFunzionalità" placeholder="ProfiloFunzionalità" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="LivelloDiAccesso">Livello Di Accesso</label>
    <div class="col-sm-5">
        <select class="form-control" id="LivelloDiAccesso" name="LivelloDiAccesso" placeholder="LivelloDiAccesso">
            @*http://formvalidation.io/examples/bootstrap-combobox/*@
            <option value="1">Consultazione</option>
            <option value="2">Ispettore 1° livello</option>
            <option value="3">Ispettore 2° livello</option>
            <option value="4">Tecnico</option>
            <option value="5">Amministratore</option>
        </select>
     </div>
</div>
<div class="form-group">
    <div class="col-sm-5 col-sm-offset-4">
        <div class="checkbox">
            <label>
                <input type="checkbox" id="Attivo" name="Attivo" />Attivo
            </label>
        </div>
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="DataCreazione">Data Creazione</label>
    <div class="col-sm-5">
        <input type="date" class="form-control" id="DataCreazione" name="DataCreazione" placeholder="DataCreazione" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="DataScadenza">Data Scadenza</label>
    <div class="col-sm-5">
        <input type="date" class="form-control" id="DataScadenza" name="DataScadenza" placeholder="DataScadenza" />
    </div>
</div>
<div class="form-group">
    <label class="col-sm-4 control-label" for="Mail">Mail</label>
    <div class="col-sm-5">
        <input type="text" class="form-control" id="Mail" name="Mail" placeholder="Mail" />
    </div>
</div>
<div class="form-group">
    <div class="col-sm-9 col-sm-offset-4">
        <button type="submit" class="btn btn-primary" name="Save" value="Save">Save</button>
    </div>
</div>

```

page1 have this code:

```
            function OpenPopup(pageUrl) {
            //alert(localStorage.getItem("UtenteIndex"));
            var $pageContent = $('<div/>');
            //$pageContent.load(pageUrl);
            $pageContent.load(pageUrl, function () {
                $('#popupForm', $pageContent).removeData('validator');
                $('#popupForm', $pageContent).removeData('unobtrusiveValidation');
                $.validator.unobtrusive.parse('form');

            });
            $dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
                .html($pageContent)
                .dialog({
                    draggable: true,
                    autoOpen: false,
                    resizable: false,
                    model: true,
                    title: 'Edita Utente',
                    height: 650,
                    width: 900,
                    close: function () {
                        $dialog.dialog('destroy').remove();
                    }
                })

            $('.popupWindow').on('submit', '#popupForm', function (e) {
                var url = $('#popupForm')[0].action;
                //alert($('#popupForm').serialize())
                $.ajax({
                    type: "POST",
                    url: url,
                    data: $('#popupForm').serialize,
                    success: function (data) {
                        if (data.status) {
                            $dialog.dialog('close');
                            oTable.ajax.reload();
                        }
                        alert(url);
                        alert(JSON.stringify(data));
                    },
                    error: function (xhr, status, error) {
                        $dialog.dialog('close');
                        alert(xhr.responseText);
                    }
                })

                e.preventDefault();
            })
            $dialog.dialog('open');
        }

```

The output JSON is not correctly. The code return a string like this:

> 
> !DOCTYPE html>\r\n\r\n\r\n meta http-equiv=\"Content-Type\" 
>  content=\"text/html; charset=utf-8\"/ \r\n \r\n  
> 
>  Utenti\r\n....
> 
> 
> 

What is the best way to stringfy only input data?
where am I wrong?