我需要做的是显示一个弹出窗口向我的@R_301_457@添加一条新记录,即时通讯使用bootstrap 3我很喜欢它,因为我没有使用单行jquery,而且我有非常好的形式(obvIoUlsy他们基于jquery ).
我通过ajax验证我的表单,但现在的问题是我的模态永远不会关闭,当我尝试重定向到一个Action时,动作被加载到我的模态中,所以我的问题是如何停止我的模态？
这是此代码的作用示例：
我的表格：
验证时的表格：
这是完美的代码：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Add Car</h4>
</div>
<div class="modal-body">
@using (Ajax.BeginForm("ModalAdd",new AjaxOptions() {UpdateTargetId = "mymodalform"}))
{
<div id="mymodalform">
@Html.Partial("CreatePartialView",new Car())
</div>
}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
而我的部分：
@model ControliBootstrap.Models.Car
<div class="form-horizontal" >
@Html.ValidationSummary(true)
<div class="form-group">
@Html.LabelFor(model => model.Model,new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Model)
@Html.ValidationMessageFor(model => model.Model)
</div>
</div>
<!--More fields-->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default"/>
</div>
</div>
</div>
现在的问题是,当模型在我的控制器中有效时,我会转到在我的模态中加载的索引动作,所以我的问题又是如何关闭我的模态？
这是我的控制器：
public ActionResult ModalAdd(Car car)
{
if (ModelState.IsValid)
{
db.Cars.Add(car);
db.SaveChanges();
return RedirectToAction("Index");
}
return PartialView("CreatePartialView",car);
}
解决方法
只是为了记录,我发现我的答案希望它能帮助别人,很难找到完整的文章.
我不得不使用更多的jquery,但这是一个干净的答案(我认为).
在我的模型中使用数据注释：
[required] public string Name { get; set; } [required] public string Phone { get; set; }
然后我在包含我的模态表单的共享文件夹中创建了一个部分,因此我可以将其设置为全局.
@model Controli.Models.Provider
<!-- Modal -->
<div class="modal fade" id="mdlnewprovider" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
@using (Html.BeginForm("Add","Providers",FormMethod.Post,new { id = "frmnewprovider" }))
{
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Nuevo Proveedor</h4>
</div>
<div class="modal-body">
<div class="form-group">
@Html.TextBoxFor(u => u.Name,new { @class = "form-control",@placeholder = HttpUtility.HtmlDecode(@Html.DisplayNameFor(u => u.Name).ToHtmlString()) })
@Html.ValidationMessageFor(u => u.Name)
</div>
<!--More TextBoxes and Validaton Messages-->
</div>
<div class="modal-footer">
<input type="submit" value="Agregar" class="btn btn-primary" />
</div>
}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
和剧本：
var frmnewprovider = $("#forms-providers-new");
$(document).ready(function () {
frmnewprovider.submit(function (e) {
e.preventDefault();
frmnewprovider.validate();
if (frmnewprovider.valid()) {
$.ajax({
url: "/Providers/Add",type: "POST",contentType: "application/json; charset=utf-8",data: JSON.stringify({
Name: frmnewprovider.find('#Name').val(),Phone: frmnewprovider.find('#Phone').val(),Email: frmnewprovider.find('#Email').val(),Country: frmnewprovider.find('#Country').val(),State: frmnewprovider.find('#State').val(),Address: frmnewprovider.find('#Address').val()
}),success: function (result) {
//if record was added to db,then...
window.location.replace('/Providers/Index'); //we can redirect
//or simply close our modal.
//$('#mdlnewprovider').modal('hide');
},error: function(result) {
alert('error');
}
});
}
});
});
现在我需要做的就是在我需要的地方渲染我的表单是添加这些行：
<button class="btn btn-primary" data-toggle="modal" data-target="#mdlnewprovider">
Nuevo
</button>
@Html.Partial("Modals/Providers/FrmNew",new Provider())
@section scripts
{
<script src="~/Scripts/Modals/Providers/NewProvider.js"></script>
<!--Where this script is the one above-->
}
最后因为我的模型是客户端验证的我只是将我的模型添加到我的@R_301_457@,并重定向到索引视图,而ajax调用隐藏活动模式更新：我建议在ajax调用时决定是重定向还是隐藏模态.喜欢评论.
public ActionResult Add(Provider provider)
{
if (ModelState.IsValid) //Validate in server side too!
{
db.Providers.Add(provider);
db.SaveChanges();
return Json(new{ success = true}); //return a dummy json,you can pass what
//ever parameter you need. if code reach
//this point. it will always hit success
//in our ajax call
}
}
确保您的web.config包含：
<appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings>
我也使用这些脚本：
<script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
如果事情可能会更好,请告诉我.
