ASP.net MVC和View里面的bootstrap模式

时间:2014-11-02 15:45:55

标签: asp.net-mvc twitter-bootstrap bootstrap-modal

关于这个问题我已经有一段时间了。我不确定如何在不刷新主视图的情况下在模态中进行回发。

我有一个视图,其中包含以下bootstrap模式

<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">&times;</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控制器:

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

每当我点击提交内部模态时,整个视图都会被提交,而我想要完成的只是提交BasicCreate。作为参考,BasicCreate控制器触发正常,并创建新的Kontakt。

修改 我一直在尝试各种方法,我能够将问题本地化,但不能解决问题的原因。似乎BasicCreate控制器无论我设置什么类型的返回对象都会回发它是否为void,ActionResult,一个空视图......它总是回发并重定向到/Kontakt/BasicCreate

1 个答案:

答案 0 :(得分:1)

你可以使用这样的AJAX调用:

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

然后您可能想要添加验证或检查服务器结果