Open (Show) jQuery Modal dialog after form gets submitted in ASP.Net MVC

manish.k

SOLVED CLOSED ACTIVE ANSWERED
User: manish.k
Posted: on Nov 15, 2021 04:38 AM
Forum: ASP.Net MVC
Answer: 1
Views: 13487
Sample Code: Download

I am doing a form submit and showing popup dialog using jQuery.

I refer to the below link and modified my code

http://www.primaryobjects.com/2012/03/21/creating-a-jquery-modal-confirmation-dialog-when-submitting-a-form/

And its working for confirmation and also informing if data is incorrect or null, but now I also want to show dialog box after form data gets saved to the jqgrid which is in the other View

$(document).ready(function () {
    // Confirmation Dialog
    $('#confirmDialog').dialog({
        autoOpen: false,
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            "Yes": function () {
                $(".ui-dialog-buttonpane button:contains('Submit')").button("disable");
                document.uploadForm.submit();
            }
        }
    });

    // Information Dialog
    $('#informDialog').dialog({
        autoOpen: false,
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            "OK": function () {
                 $(this).dialog("close");
            }
        }
    });

    /* After Form Submit Dialog (I want this dialog to open after I submit form and the page 
       reloads then this should popup) */
    $('#finalSavedDialog').dialog({
        autoOpen: false,
        width: 500,
        modal: true,
        resizable: false,
        buttons: {
            "OK": function () {
                 $(this).dialog("close");
            }
        }
    });

    $('#uploadForm').submit(function (e) {
        e.preventDefault();
        
        if(($("#file").val()=="")){
        $('#informDialog').text("Please upload file");
        $('#informDialog').dialog('open');
        }
        else if(($("#Name").val()=="")){
        $('#informDialog').text("Please enter name");
        $('#informDialog').dialog('open');
        }
        else if(($("#Age").val()=="")){
        $('#informDialog').text("Please enter age");
        $('#informDialog').dialog('open');
        }
        else{
        $('#confirmDialog').dialog('open');
        }
        
    });
});

@using (Html.BeginForm("UserDetails","UploadUserDetails", FormMethod.Post, new {enctype = "multipart/form-data", id = "uploadForm", name = "uploadForm"}))
{
<div class="uploadform-title"><h1>Upload Details</h1></div>
<div class="main">
        <div class="user-details">
            <div class="input-box">
                <span class="details">Name</span>
                <input type="text">
            </div>
            <div class="input-box">
                <span class="details">Age</span>
                <input type="text">
            </div>
            <div class="input-box">
                <span class="details">Upload Pdf File</span>
                <input type="file">
            </div>
        </div>
        <div class="button">
            <input type="submit" id= "btnSubmit" value="Save">
        </div>
</div>
}

/*Below is the Html Code for popup dialog boxes*/
<div id="confirmDialog" title="Confirmation">
    <h2>Do you want to submit the form?</h2>
</div>
<div id="informDialog" title="Information">
    <h2>Please enter all the feilds</h2>
</div>
<div id="finalSavedDialog" title="Success">
    <h2>Saved succefully</h2>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 15, 2021 06:14 AM
Modified: on Feb 17, 2022 11:11 AM
Report

Hi manish.k,

Refer below example.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string name, string age, HttpPostedFileBase file)
    {
        // Your condition.
        if (name == "test")
        {
            TempData["Message"] = "Success";
        }
        else
        {
            TempData["Message"] = "failed";
        }
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Confirmation Dialog
            $('#confirmDialog').dialog({
                autoOpen: false,
                width: 500,
                modal: true,
                resizable: false,
                buttons: {
                    "Yes": function () {
                        $(".ui-dialog-buttonpane button:contains('Submit')").button("disable");
                        document.uploadForm.submit();
                    }
                }
            });

            // Information Dialog
            $('#informDialog').dialog({
                autoOpen: false,
                width: 500,
                modal: true,
                resizable: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    }
                }
            });

            /* After Form Submit Dialog (I want this dialog to open after I submit form and the page
               reloads then this should popup) */
            $('#finalSavedDialog').dialog({
                autoOpen: false,
                width: 500,
                modal: true,
                resizable: false,
                buttons: {
                    "OK": function () {
                        $(this).dialog("close");
                    }
                }
            });

            $('#uploadForm').submit(function (e) {
                e.preventDefault();
                if (($("#file").val() == "") || ($("#file").val() == undefined)) {
                    $('#informDialog').text("Please upload file");
                    $('#informDialog').dialog('open');
                }
                else if (($("#Name").val() == "") || ($("#Name").val() == undefined)) {
                    $('#informDialog').text("Please enter name");
                    $('#informDialog').dialog('open');
                }
                else if (($("#Age").val() == "") || ($("#Age").val() == undefined)) {
                    $('#informDialog').text("Please enter age");
                    $('#informDialog').dialog('open');
                }
                else {
                    $('#confirmDialog').dialog('open');
                }
            });
        });
    </script>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data", id = "uploadForm", name = "uploadForm" }))
    {
        <div class="uploadform-title"><h1>Upload Details</h1></div>
        <div class="main">
            <div class="user-details">
                <div class="input-box">
                    <span class="details">Name</span>
                    <input type="text" id="Name" name="name">
                </div>
                <div class="input-box">
                    <span class="details">Age</span>
                    <input type="text" id="Age" name="age">
                </div>
                <div class="input-box">
                    <span class="details">Upload Pdf File</span>
                    <input type="file" id="file" name="file">
                </div>
            </div>
            <div class="button">
                <input type="submit" id="btnSubmit" value="Save">
            </div>
        </div>
    }

    @if (TempData["Message"] != null && TempData["Message"].ToString() == "Success")
    {
        <script type="text/javascript">
            $(function () {
                $('#finalSavedDialog').dialog('open');
            });
        </script>
    }

    <div id="confirmDialog" title="Confirmation">
        <h2>Do you want to submit the form?</h2>
    </div>
    <div id="informDialog" title="Information">
        <h2>Please enter all the feilds</h2>
    </div>
    <div id="finalSavedDialog" title="Success">
        <h2>Saved succefully</h2>
    </div>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Open (Show) jQuery Modal dialog after form gets submitted in ASP.Net MVC

Company

Explore

Follow us

Contact Us