ASP.net MVC and View inside bootstrap modal - asp.net-mvc

Question

I've been hitting a wall for awhile regarding this problem. I'm not sure how to do a postback in modal without refreshing the main view.
I have a view which has the following bootstrap modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria- hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
#Html.Partial("~/Views/Kontakt/BasicCreate.cshtml", new IDE3_CRM.ViewModels.BasicKontaktViewModel())
</div>
</div>
</div>
BasicCreate View
#model IDE3_CRM.ViewModels.BasicKontaktViewModel
#{
Layout = null;
}
#using (Html.BeginForm("BasicCreate", "Kontakt", FormMethod.Post, new { id = "basicCreate" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.HiddenFor(model => Model.idFirma)
//Similar forms group are intentionally ommited, one below is left for the reference
<div class="form-group">
<label class="control-label col-md-2">Bilješke</label>
<div class="col-md-10">
#Html.TextAreaFor(model => model.Biljeske, new { #class = "form-control", #rows = "5" })
#Html.ValidationMessageFor(model => model.Biljeske)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Spremi" class="btn btn-default" />
</div>
</div>
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('#basicCreate').submit(function () { // you can use any selector that match your form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize()
}).done(function (data) {
// Do something when server returns success!
});
return false; // prevent the form submission
});
})
</script>
BasicCreate controller:
[HttpPost]
[ValidateAntiForgeryToken]
public void BasicCreate([Bind(Include = "idKontakt,idOvlasti,idFirma,Username,Password,Ime,Prezime,Funkcija,Tel1,Mob1,Fax,Email1,Adresa1,Grad,Drzava,PostanskiBroj,Biljeske,Aktivan")] BasicKontaktViewModel kontakt, int? idCompany)
{
if (ModelState.IsValid)
{
Kontakt _kontakt = new Kontakt();
_kontakt.Adresa1 = kontakt.Adresa1;
_kontakt.Aktivan = true;
_kontakt.Biljeske = kontakt.Biljeske;
_kontakt.Drzava = "Hrvatska";
_kontakt.Email1 = kontakt.Email1;
_kontakt.Funkcija = kontakt.Funkcija;
_kontakt.Grad = kontakt.Grad;
_kontakt.idFirma = kontakt.idFirma;
_kontakt.idOvlasti = 4;
_kontakt.Ime = kontakt.Ime;
_kontakt.Mob1 = kontakt.Mob1;
_kontakt.Password = kontakt.Password;
_kontakt.Prezime = kontakt.Prezime;
_kontakt.Tel1 = kontakt.Tel1;
_kontakt.Username = kontakt.Username;
db.Kontakt.Add(_kontakt);
db.SaveChanges();
}
}
Whenever I click submit inside modal whole view gets submitted and what I'd like to accomplish is to submit only BasicCreate. For the reference, BasicCreate controller fires ok, and new Kontakt gets created.
EDIT
I've been experimenting with variety of approaches and I was able to localize the problem but not the reason for it. It seems that BasicCreate controller does postback no matter what type I set as the return object whether it be void, ActionResult, an empty view... It always postbacks and redirects to /Kontakt/BasicCreate

Answer 1

You can use an AJAX call like this:
$('form').submit(function () { // you can use any selector that match your form
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize()
}).done(function(data){
// Do something when server returns success!
});
return false; // prevent the form submission
});
Then you might want to add validation or check server result