我知道这个问题已被问及我尝试了这些解决方案，但无法解决这个问题。
How clear bootstrap modal on hide
How to clear all input fields in bootstrap modal when clicking data-dismiss button?
但是这些解决方案并没有解决我的问题，
我想清除隐藏的Modal弹出窗口
的输入字段这是我的观点
@model IEnumerable<Recon.Models.BRANCH_CONTACT_INFO>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h4><b>Contact Person Detail</b></h4>
@*<p>
@Html.ActionLink("Create New", "Create")
</p>*@
<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>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<tr class="info">
<th>
@Html.Label("Manager Name")
</th>
<th>
@Html.Label("Designation")
</th>
<th>
@Html.Label("Email 1")
</th>
<th>
@Html.Label("Email 2")
</th>
@*<th>
@Html.Label("Branch Name")
</th>*@
<th>
@Html.ActionLink("Add", "Create_Branch_Contact_info", new { id = Session["Branchid"] }, new { @class = "btn default btn-xs green-stripe", data_toggle = "modal", data_target = "#myModal" })
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.MANAGER_NAME)
</td>
<td>
@Html.DisplayFor(modelItem => item.DESIGNATION.DESIGNATION1)
</td>
<td>
@Html.DisplayFor(modelItem => item.EMAIL1)
</td>
<td>
@Html.DisplayFor(modelItem => item.EMAIL2)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.BRANCH.BRANCH_DESC)
</td>*@
<td>
@Html.ActionLink("Update", "Edit_Branch_Contact_info", new { id = item.BRANCH_CONT_ID }, new { @class = "btn default btn-xs blue-stripe" })
@*@Html.ActionLink("Details", "Details", new { id = item.BRANCH_CONT_ID }) |*@
@Html.ActionLink("Remove", "Delete","contact", new { id = item.BRANCH_CONT_ID }, new { @class = "btn default btn-xs red-stripe" })
</td>
</tr>
}
</table>
@section script{
<script>
debugger;
function myFunction() {
debugger;
//$('.modal').remove();
document.getElementById("demo").innerHTML = "Hello World";
}
$('#myModal').on('hidden', function (e) {
debugger;
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
$('[data-dismiss=modal]').on('click', function (e) {
debugger;
var $t = $(this),
target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];
$(target)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
$('body').on('hidden.modal', '.modal', function () {
debugger;
$(this).removeData('.modal');
});
</script>
}
正如您在我的视图中所看到的，这就是我在Modal弹出窗口中调用其他视图的方式
@Html.ActionLink("Add", "Create_Branch_Contact_info", new { id = Session["Branchid"] }, new { @class = "btn default btn-xs green-stripe", data_toggle = "modal", data_target = "#myModal" })
另一个视图我的模态
@model Recon.Models.BRANCH_CONTACT_INFO
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@{
Layout = "";
}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
@*<h4 class="modal-title" id="myModalLabel">Add Contact</h4>*@
</div>
<div class="modal-body" id="modal123">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Add Contact to Branch
</div>
</div>
<div class="portlet-body form">
<!-- BEGIN FORM-->
<form id="form" action="javascript:;" class="form-horizontal">
<div class="form-body">
<div class="portlet-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Manager Name</label>
<div class="col-md-9">
@Html.TextBoxFor(model => model.MANAGER_NAME, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.MANAGER_NAME)
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Designation</label>
<div class="col-md-9">
@Html.DropDownList("DESIGNATION_ID", null, "Select Designation", new { @class = "form-control" })
@Html.ValidationMessage("DESIGNATION_ID")
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Email 1</label>
<div class="col-md-9">
@Html.TextBoxFor(model => model.EMAIL1, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EMAIL1)
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Email 2</label>
<div class="col-md-9">
@Html.TextBoxFor(model => model.EMAIL2, new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.EMAIL2)
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Branch Name</label>
<div class="col-md-9">
@Html.TextBox("BRANCH_NAME", (string)ViewBag.BranchName, new { @class = "form-control", @readonly = "readonly" })
</div>
</div>
</div>
</div>
@Html.TextBox("BRANCH_ID", (Int16)ViewBag.BRANCH_ID, new { style = "display:none;" })
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-offset-3 col-md-9">
@*<input type="submit" value="Save" class=" btn default btn-xs blue-stripe " id="btnsave" />*@
<button type="button" class="btn btn-default" onclick="myFunction()" data-dismiss="modal">Cancel</button>
<input type="submit" value="Save" class="btn blue" />
@*@Html.ActionLink("Back to List", "Index", new { Trtype = @Session["Trtype"], Product_ID = @Session["Product_ID"] }, new { @class = "btn red" })*@
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</form>
<!-- END FORM-->
<p id="demo"></p>
</div>
</div>
</div>
@*<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Delete" id="btnsave" class="btn btn-primary"/>
</div>*@
}
我使用jquery尝试过这些解决方案，但没有任何作用，
我尝试的第一个解决方案是在取消按钮上创建一个onclick事件并调用此函数
function myFunction() {
debugger;
$('.modal').remove();
}
但它实际上删除了我的整个模态弹出窗口我再也无法打开我的模态
其次我试过这个
$('#myModal').on('hidden', function (e) {
debugger;
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
这个
$('[data-dismiss=modal]').on('click', function (e) {
debugger;
var $t = $(this),
target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];
$(target)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
还有这个：
$('body').on('hidden.modal', '.modal', function () {
debugger;
$(this).removeData('.modal');
});
但他们不工作
不知道我在做什么错误请帮忙!! 任何建议将不胜感激
答案 0 :(得分：1)
****在这里你可以做到...... ****
方法1：
$('#myModal').on('hidden.bs.modal', function (e) {
var modal = $(this);//The modal which is opened
modal.find("input").val("");//Clear all the input fileds inside that modal.
});
方法2：
如果仍然无效，因为您可能使用部分页面调用模态的内部内容，那么您可以尝试在打开时清除模态内的所有字段。
$('#myModal').on('show.bs.modal', function (e) {
var modal = $(this);//The modal which is opened
modal.find("input").val("");//Clear all the input fileds inside that modal.
});