Как открыть модальный div MVC - PullRequest
Новая
       26

Как открыть модальный div MVC

0 голосов
/ 27 января 2020

Я хочу открыть свой класс div, содержащий текстовое поле user at password, но ничего не происходит, и я также проверяю свою функцию, если она работает правильно, поэтому я включил оповещение в свою функцию. Это мой код ниже. Я пробую так много решений и все же не показываю мой div. Может ли кто-нибудь дать мне лучшее решение по этому вопросу или другой способ открыть веб-форму, не покидая моей текущей страницы. 

@model TBSWebApp.Models.User

@{
    ViewBag.Title = "UserLogin";
    Layout = "~/Layout/_webLayout.cshtml";
}

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<div>
    <fieldset>
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <button id="btnShowModal" type="button" class="btn btn-sm btn-default pull-left col-lg-11 button button4">
                        Sign-in
                    </button>

                    <div class="modal fade" tabindex="-1" id="loginModal" data-keyboard="false" data-backdrop="static">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        ×
                                    </button>
                                    <h4 class="modal-title">Satya Login</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <input class="form-control" type="text" placeholder="Login Username" id="inputUserName" />
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control" placeholder="Login Password" type="password" id="inputPassword" />
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary button button4">Sign</button>
                                    <button type="button" id="btnHideModal" class="btn btn-primary button button4">
                                        Hide
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </fieldset>
</div>
<footer>
    <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">
        ©
        <script>document.write(new Date().toDateString());</script>
    </p>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//$(document).ready(function () {

$("#btnShowModal").click(function () {
    alert("test");
    $("#loginModal").modal('show');
});

$("#btnHideModal").click(function () {
    $("#loginModal").modal('hide');
});
//  });
</script>

Я уже решил свою проблему 

    <script>
    $(document).ready(function () {
        $("#submitButton").click(function () {

        if (($("#userNameTextBox").val() != "") && ($("#passwordTextBox").val() != ""))
            $.ajax(
                {

                    type: "POST", //HTTP POST Method
                    url: "UserLogin/UserLogin", // Controller/View
                    dataType: "text/html",
                    data:
                    { //Passing data
                        UserID: $("#userNameTextBox").val(),
                        Password: $("#passwordTextBox").val(),

                    }

                });

        });
    });

    //$(document).ajaxStart(function () { $("#loadingImg").show(); });
    //$(document).ajaxStop(function () { $("#loadingImg").hide(); });
</script>
...