Значения текстовых полей в модуле не очищаются после того, как модаль скрыт

Question

Значения текстовых полей в модуле не очищаются после того, как модаль скрыт

Я знаю, что этот вопрос задан, и я пробовал эти решения, но не смог решить это.

Как очистить загрузочный модальный на шкуре

Как очистить все поля ввода в bootstrap modal при нажатии кнопки «Отмена данных»?

Но эти решения не разрешили мою проблему,

Я хочу очистить поля ввода скрытыми от всплывающих окон 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 popup

@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">&times;</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');
    });

Но они не работают

Не знаю, что я делаю Неправильно, пожалуйста, помогите !! Любое предложение будет оценено

javascript,jquery,html,asp.net-mvc,twitter-bootstrap,

1

Ответов: 1

JavaScript, JQuery, HTML, asp.net-MVC, твиттер-самозагрузки,

Похожие вопросы

score 1 · Accepted Answer

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.
});